|
jQuery事件相关介绍
一、文档加载事件
$(document).ready()和window.onload方法区别？
jQuery当中用$(document).ready()代替了传统的、javascript当中的window.onload
1、执行时机不同
window.onload方法是在网页中的元素（包括元素的所有关联文件）完全加载到浏览器后执行，即javascript此时才可以访问网页中的任何元素。
而$(document).ready()方法在DOM完全就绪时就可以被调用，无需等待元素的相关联文件下载完毕，可以大大提高程序的响应速度。
2、使用次数不同
window.onload事件一次只能保存一个函数的引用。
$(document).ready()方法每次调用都会在现有的行为上追加新的行为。
3、$()和window.onload区别.html
<html>
<head>
<title>$()和window.onload区别</title>
<style type="text/css">
</style>
<script type="text/javascript" src="script/jquery-3.6.0.js"></script>
<script type="text/javascript">
/*
//javascript事件可以获得图片宽度
window.onload=function(){
alert($("img").width());
};
*/
/*
//jQuery事件
//目前jQuery也可以获取图片宽度，加载时机提前了？
$(function(){
alert($("img").width());
});
*/
/*
//jQuery中类似window.onload事件
//$(window).load()在1.8开始不支持了
//.load, .unload, and .error, deprecated since jQuery 1.8, are no more. Use .on() to register listeners.
$(window).on("load",function(){
alert($("img").width());
});
*/
/*
//只能绑定最后一个函数
window.onload=function(){
alert("hello1");
}
window.onload=function(){
alert("hello2");
}
*/
//弹出两个消息框，提示hello1，再提示hello2
$(function(){
alert("hello1");
});
$(function(){
alert("hello2");
});
</script>
</head>
<body>
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" />
</body>
</html>
二、jQuery事件绑定
1、在文档装载完成后，如果打算为元素绑定事件来完成某些操作，则可以使用bind()方法来对匹配元素进行特定事件的绑定
格式：
bind(type, [data], fn);
说明：
type：事件类型
data：传递给处理函数进行处理的额外数据
fn：用来绑定的处理函数
例子：
$("div").bind("click", function(){}); //给div绑定一个点击事件
$("div").bind("mouseover mouseout", function(){}); //同时绑定多个事件
三、jQuery常用的事件类型
1、click、dbclick、blur、focus、resize、scroll、unload、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keyup、keypress和error等。
当然这些事件类型都可以用bind方法来绑定，其实jQuery也为这些事件类型专门设计了简写的方法。
2、绑定事件.html
<html>
<head>
<title>绑定事件</title>
<style type="text/css">
table{ border:0; border-collapse:collapse; }
td{ font:normal 12px/17px Arial; padding:2px; width:100px; }
th{ font:bold 12px/17px Arial; text-align:center; padding:4px; border-bottom:1px solid #333; }
.even{ background:#FFF38F; } /*偶数行样式*/
.odd{ background:#FFFFEE; } /*奇数行样式*/
.selected{ background:#FF6500; color:#fff; }
.over{ background:green; }
</style>
<script type="text/javascript" src="script/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function(){
//给奇偶行加上背景色
//查找tbody元素内的tr的奇数行，添加类选择器
$("tbody>tr:odd").addClass("odd");
$("tbody>tr:even").addClass("even");
/*
//给tbody里所有行绑定一个点击事件，点击一行增加样式
$("tbody>tr").bind("click", function(){
//判断行有没有被选中
var hasSelected=$(this).hasClass("selected");
if (hasSelected){
$(this).removeClass("selected").find(":checkbox").attr("checked",false);
}else{
$(this).addClass("selected").find(":checkbox").attr("checked",true);
}
})
//当鼠标移到某一行上给它加背景
//链式操作再绑定一个事件
.bind("mouseover", function(){
$(this).addClass("over");
}).bind("mouseout", function(){
$(this).removeClass("over");
});
*/
//不用bind，用jQuery提供的方法
//给tbody里所有行绑定一个点击事件，点击一行增加样式
$("tbody>tr").click(function(){
//判断行有没有被选中
var hasSelected=$(this).hasClass("selected");
if (hasSelected){
$(this).removeClass("selected").find(":checkbox").attr("checked",false);
}else{
$(this).addClass("selected").find(":checkbox").attr("checked",true);
}
})
//当鼠标移到某一行上给它加背景
//链式操作再绑定一个事件
.mouseover(function(){
$(this).addClass("over");
}).mouseout(function(){
$(this).removeClass("over");
});
//一开始被选中的控件添加背景色
$("tbody>tr:has(':checked')").addClass("selected");
});
</script>
</head>
<body>
<table>
<thead>
<th> </th>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="choice" value="" /></td>
<td>张三</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value="" /></td>
<td>李四</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value="" checked="checked" /></td>
<td>王五</td>
<td>男</td>
<td>湖南长沙</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value="" /></td>
<td>赵六</td>
<td>男</td>
<td>浙江温州</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value="" /></td>
<td>rain</td>
<td>男</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value="" /></td>
<td>max</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
</tbody>
</table>
</body>
</html>
3、事件触发范围
对li标签绑定一个click事件，那么点击事件的范围是这个<li>标签到</li>标签内的所有空间
四、合成事件
1、hover()方法
格式：
hover(enter, leave);
说明：
用于模拟光标悬停事件，当鼠标移到元素上的时候会触发enter函数，当鼠标离开元素的时候会触发leave函数
2、toggle()方法
格式：
toggle([fn1], [fn2], [fn3]...)
说明：
（1）用于绑定两个或多个事件的处理器函数，以响应被选元素的轮流的click事件。第一次点击执行fn1函数，第二次点击执行fn2函数，第三次点击执行fn3函数。假设总共有三个函数，再点击的时候又从第一个函数开始
（2）当toggle内没有参数时，toggle()方法另一个功能是，元素原来为显示的时候隐藏，隐藏的时候显示
3、hover.html
<html>
<head>
<title>hover</title>
<style type="text/css">
* {margin:0; padding:0; }
body {font-size:13px; line-height:130%; padding:60px; }
#panel {width:300px; border:1px solid #0050D0; }
.head {height:24px; line-height:24px; text-indent:10px; background:#96E555; cursor:pointer; width:100%; }
.content {padding:10px; text-indent:24px; border-top:1px solid #0050D0; display:none; }
</style>
<script type="text/javascript" src="script/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function(){
//当鼠标移动到h5标题上时，下面div内容可见。离开标题内容不可见
$(".head").hover(function(){
//当前对象的下一个对象，显示
$(this).next().show();
}, function(){
//隐藏
$(this).next().hide();
});
});
</script>
</head>
<body>
<div id="panel">
<h5 class="head">什么是jQuery?</h5>
<div class="content">
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
</div>
</div>
</body>
</html>
4、toggle.html
<html>
<head>
<title>hover</title>
<style type="text/css">
* {margin:0; padding:0; }
body {font-size:13px; line-height:130%; padding:60px; }
#panel {width:300px; border:1px solid #0050D0; }
.head {height:24px; line-height:24px; text-indent:10px; background:#96E555; cursor:pointer; width:100%; }
.content {padding:10px; text-indent:24px; border-top:1px solid #0050D0; display:none; }
</style>
<script type="text/javascript" src="script/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function(){
//点击h5标题，div显示的变隐藏，隐藏的变显示
$(".head").click(function(){
$(this).next().toggle();
});
});
</script>
</head>
<body>
<div id="panel">
<h5 class="head">什么是jQuery?</h5>
<div class="content">
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
</div>
</div>
</body>
</html>
五、事件对象
1、事件对象主要封装了事件发生的详细信息，尤其是鼠标、键盘事件。在jQuery中使用事件对象非常简单，只需要为函数添加一个参数
例子：
$("element").bind("click", function(event){ //event事件对象
//函数处理语句
});
六、停止事件冒泡
1、使用event.stopPropagation()方法来停止事件冒泡。
冒泡事件：
就是当设定了多个div的嵌套时；即建立了父子关系，当父div与子div共同加入了onclick事件时，当触发了子div的onclick事件后，子div进行相应的js操作。但是父div的onclick事件同样会被触发。这就造成了事件的多层并发，导致了页面混乱。这就是冒泡事件。
2、停止事件冒泡.html
<html>
<head>
<title>停止事件冒泡</title>
<style type="text/css">
* {margin:0; padding:0; }
body {font-size:13px; line-height:130%; padding:60px; }
#content {width:220px; border:1px solid #0050D0; background:#96E555; }
span {width:200px; margin:10px; background:#666666; cursor:pointer; color:white; display:block; }
p {width:200px; background:#888; color:white; height:16px; }
</style>
<script type="text/javascript" src="script/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function(){
//为span元素绑定click事件
$("span").bind("click",function(){
var txt = $("#msg").html() + "<p>内层span元素被点击.</p>";
$("#msg").html(txt);
event.stopPropagation();
});
//为div元素绑定click事件
$("#content").bind("click",function(){
var txt = $("#msg").html() + "<p>外层div元素被点击.</p>";
$("#msg").html(txt);
event.stopPropagation();
});
//为body元素绑定click事件
$("body").bind("click",function(){
var txt = $("#msg").html() + "<p>body元素被点击.</p>";
$("#msg").html(txt);
});
});
</script>
</head>
<body>
<div id="content">
外层div元素
<span>内层span元素</span>
外层div元素
</div>
<div id="msg"></div>
</body>
</html>
七、阻止默认行为
1、使用event.preventDefault()方法来阻止元素的默认行为。
2、阻止默认行为.html
<html>
<head>
<title>阻止默认行为</title>
<style type="text/css">
</style>
<script type="text/javascript" src="script/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function(){
$("#sub").bind("click",function(event){
var username = $("#username").val(); //获取元素的值
if (username=="") {
//判断值是否为空
$("#msg").html("<p>文本框的值不能为空.</p>");
//默认情况下，只要点击了submit，就会提交到action上的地址去
//阻止默认行为
event.preventDefault();
}
});
});
</script>
</head>
<body>
<form action="http://www.baidu.com">
用户名：<input type="text" id="username" />
<br/>
<input type="submit" value="提交" id="sub" />
</form>
<div id="msg"></div>
</body>
</html>
八、同时对事件对象停止冒泡和默认行为
1、使用return false这种简写方式即可。大可不必写上面两句。
九、常用的事件对象属性
1、event.type：用于获取到事件类型，比如click等。
2、event.target：用于获取到事件触发的元素。
3、event.pageX：获取到光标相对于页面x的坐标。
4、event.pageY：获取到光标相对于页面y的坐标。
5、event.which：获取鼠标的左、中、右键，分别为1、2、3。
6、event.metaKey：键盘事件中获取<ctrl>按键。
7、事件对象属性.html
<html>
<head>
<title>事件对象属性</title>
<style type="text/css">
</style>
<script type="text/javascript" src="script/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function(){
/*
$("a").click(function(event){
alert(event.type); //获取事件类型
var tg=event.target; //获取触发事件的事件源
alert(tg.href); //弹出事件源的href属性
alert(event.pageX+"--"+event.pageY); //获取点击位置在浏览器中的x坐标和y坐标
return false;
});
*/
//鼠标按下事件
$("a").mousedown(function(event){
alert(event.which);
return false;
});
$("input").keyup(function(event){
alert(event.which); //event.which既可以获得鼠标按键，也可以获得键盘按键
return false;
});
});
</script>
</head>
<body>
<a href="http://www.baidu.com">点击我</a>
<input type="button" value="点击我" />
</body>
</html>
十、移除事件
1、unbind()方法
格式：
unbind([type], [bind]);
说明：
（1）如果没有参数则删除所有的绑定事件
（2）如果提供了事件类型作为参数，则只删除该类型的绑定事件
（3）如果把在绑定时传递的处理函数作为第2个参数，则只有这个特定的事件处理函数被删除
2、解除绑定事件.html
<html>
<head>
<title>解除绑定事件</title>
<style type="text/css">
* {margin:0; padding:0; }
body {font-size:13px; line-height:130%; padding:60px; }
p {width:200px; background:#888; color:white; height:16px; }
</style>
<script type="text/javascript" src="script/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function(){
//一个元素可以绑定多个事件
$("#btn").bind("click",myfun1=function(){ //指定函数名称
$("#test").append("<p>我的绑定函数1-click</p>");
}).bind("mouseout",myfun2=function(){
$("#test").append("<p>我的绑定函数2-mouseout</p>");
}).bind("click",myfun3=function(){
$("#test").append("<p>我的绑定函数3-click</p>");
});
//解除绑定
$("#del1").click(function(){
//找到这个按钮
$("#btn").unbind();
//删除之后，再点btn不会有事件绑定！！！相当于bind的代码没有了
})
$("#del2").click(function(){
$("#btn").unbind("mouseout");
})
$("#del3").click(function(){
//删除具有myfun1这个指定函数的click事件
$("#btn").unbind("click",myfun1);
})
});
</script>
</head>
<body>
<button id="btn">点击我</button>
<div id="test"></div>
<button id="del1">删除所有事件</button>
<button id="del2">删除指定的事件</button>
<button id="del3">删除具有指定处理函数的事件</button>
</body>
</html>
十一、模拟事件操作
1、以前都是通过用户单击按钮，触发按钮的点击事件。有时候需要在用户进入页面后就触发按钮的点击事件。
2、在jQuery中，可以使用trigger()方法完成模拟操作。
例子：
$("#btn").trigger("click"); //模拟点击事件
3、触发自定义事件
例子：
$("#btn").bind("myclick",function(){
//函数体
});
$("#btn").trigger("myclick");
4、传递数据
event事件对象自动会传过来
例子：
$("#btn").bind("myclick",function(event,msg1,msg2){
$("#test").append("<p>"+msg1+msg2+"</p>");
});
$("#btn").trigger("myclick",["我的自定义","事件"]);
说明：
“我的自定义”会赋值给msg1
“事件”会赋值给msg2
5、trigger.html
<html>
<head>
<title>trigger</title>
<style type="text/css">
* {margin:0; padding:0; }
body {font-size:13px; line-height:130%; padding:60px; }
p {width:200px; background:#888; color:white; height:16px; }
</style>
<script type="text/javascript" src="script/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function(){
/*
$("#btn").bind("click",function(){
$("#test").append("<p>我的绑定函数1-click</p>");
}).bind("click",function(){
$("#test").append("<p>我的绑定函数2-click</p>");
}).trigger("click"); //模拟自身的click
*/
//方式二，简写click()
/*
$("#btn").bind("click",function(){
$("#test").append("<p>我的绑定函数1-click</p>");
}).bind("click",function(){
$("#test").append("<p>我的绑定函数2-click</p>");
}).click();
*/
//触发自定义事件
/*
$("#btn").bind("hao",function(){
alert("hello world");
}).trigger("hao");
*/
//传递数据
$("#btn").bind("hao",function(event,msg1,msg2){
alert(msg1+"---"+msg2);
}).trigger("hao",["hello","world"]);
});
</script>
</head>
<body>
<button id="btn">点击我</button>
<div id="test"></div>
</body>
</html>
|