jQuery中的事件
Posted Tony_copper
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery中的事件相关的知识，希望对你有一定的参考价值。
javascript和html之间的交互是通过用户和浏览器操作页面时引发的事件来处理的。当文档或者它的元素发生某些变化或操作时，浏览器就会自动生成一个事件。例如，用户通过键盘在浏览器上打字时，就会生成一个事件。
在常规的JavaScript中使用最多的是window.onload方法，而在jQuery中，使用最多的则是$(function(){})方法。$(function(){})方法是事件模块中最重要的一个函数，可以极大的提高Web应用程序的响应速度。在使用中需要注意window.onload和$(function(){})方法之间的区别。
那么，它们的执行时机是什么？
1.window.onload
window.onload方法是在所有元素加载到浏览器后才开始执行（包括元素的所有关联文件）。
2.$(function(){})
通过jQuery中的$(function(){})注册的事件处理程序，在DOM完全就绪时就可以调用了。
就好比一个网页加载图片，点击一张图片，使用window.onload必须等到所有图片加载完成后才可以能够进行操作。而使用$(function(){})方法，只要DOM准备就绪就可以进行操作了，不需要等待所有图片加载完毕。从而可以看出，$(function(){})方法在网页加载方面要比window.onload方法速度要更快。
此外，需要注意，由于在$(function(){})方法内注册的事件，只要DOM就绪就会被执行，因此可能此时的关联文件并为下载完成。想要解决并不难，可以使用jQuery中另一个加载页面方法：load（）方法。load（）会在onload事件中绑定一个处理函数。如果处理函数绑定给window对象，则会在所有内容加载完成后触发，如果处理函数绑定在元素上，则会在元素加载完成后触发。jQuery代码如下，
1 $(function(){ 2 //要执行的代码 3 });
等价于JavaScript中的代码，
1 window.onload=function(){ 2 //要执行的代码 3 };
另外，两者的使用情况也不相同，JavaScript中的window.onload方法和jQuery中的$(function(){})方法的执行次数也不相同。window.onload方法在页面中只能有一个，而$(function(){})在页面中可以有多个。
事件绑定和移除
1.绑定事件
在jQuery中，如果需要为匹配的元素同时绑定一个或者多个事件，可以使用bind（）方法，语法如下：
bind(type,[data],参数类型)
bind（）方法有三个参数，
第一个参数是事件类型，类型包括：blur,focus,load,resize,seroll,unload,click,dblclick,mousedown,mouseup,mousemove,mouseover,mouseout,moueseenter等。
第二个参数为可选参数，可以省略。
第三个参数用来绑定处理函数。
下面说一下bind()的使用方法，代码如下：
1 $(function(){ 2 //给div注册事件 3 $("div").bind("mouseover",function(){ 4 //div变化的颜色 5 $(this).css("color","red"); 6 }); 7 });
这里的this与JavaScript中的作用一样，this引用的是携带相应行为的DOM元素。为了能够使该DOM元素能够使用jQuery中的方法，可以使用$(this)转换为jQuery对象。
通过上面的小例子就可以做成更多的好玩的小程序，下面就使用绑定事件来书写一个光棒效果，代码如下：
1 $(function () { 2 $("li").bind("mouseover",function () { 3 //鼠标移动到当前jQuery对象时发生，字体改变为红色 4 $(this).css("color","red"); 5 //鼠标移开时发生，字体恢复到初始状态 6 }).bind("mouseout",function () { 7 $(this).css("color",""); 8 }); 9 }); 10 //body块代码 11 <ul> 12 <li>海贼王</li> 13 <li>火影忍者</li> 14 </ul>
效果如下：
当鼠标移开时“海贼王”会由当前的红色，变回原先的颜色。
合成事件
jQuery中有两个合成事件：hover()方法和toggle()方法。hover()方法和toggle()方法都属于jQuery自定义方法。
1.hover()方法
语法为：
hover(enter,leave);
hover()用于模拟鼠标悬停事件。当光标移动到元素上时会触发第一个函数(enter),当光标移除这个元素时会触发第二个函数(leave)。
使用hover()方法实现光棒效果，代码如下：
1 1 $(function(){ 2 2 $("div").hover(function(){ 3 3 //将字体背景色换为黄色 4 4 $(this).css("background","yellow"); 5 5 }).function(){ 6 //鼠标移出时发生 7 $(this).css("background",""); 8 } 9 6 });
2.toggle()
语法为：
toggle(fn1,fn2,fn3....,fnN);
toggle()方法用于模拟鼠标连续点击事件。第一次单击元素，触发第一个元素；再次点击时，触发第二个元素。如果有更多的元素，则依次触发，直到最后。
1 $(function(){ 2 $("div").toggle(function(){ 3 $(this).css("background","yellow"); 4 }.function(){ 5 $(this).css("background",""); 6 }) 7 });
使用toggle()方法不仅实现了同样的方法，同时还节省了代码量。
事件冒泡
1.什么是事件冒泡？
在页面上有多个事件，也可以多个事件响应同一个事件。如，在网页上有两个元素，其中一个元素嵌套在另一个元素中，并且都被绑定了click事件。就好比公安机关，有情况必须得先经过你的队长，然后是大队长，在往上是局长等等，就可以称为冒泡。完整代码如下：
1 <script type="text/javascript"> 2 $(function(){ 3 //为span元素绑定click事件 4 $(“span”).bind("click",function(){ 5 var txt=$(\'#mysg\').html()+"<p>span标签被单击</p>"; 6 $("mysg").html(txt); 7 }) 8 //为div元素绑定click事件 9 $(“#content”).bind("click",function(){ 10 var txt=$(\'#mysg\').html()+"<p>div标签被单击</p>"; 11 $("mysg").html(txt); 12 }) 13 //为body元素绑定click事件 14 $(“body”).bind("click",function(){ 15 var txt=$(\'#mysg\').html()+"<p>body标签被单击</p>"; 16 $("mysg").html(txt); 17 }) 18 }) 19 </script> 20 21 <body> 22 <div id="concent"> 23 外层div元素 24 <span>内部span元素</span> 25 外层div元素 26 </div> 27 <div id="mysg"> 28 </div> 29 </body>
当单击内部<span>元素时，会触发<span>元素的click事件。 在单击<span>元素的同时，也单击了包含<span>元素的<div>元素和包含<div>元素的<body>元素，并且每一个都按照指定的顺序响应click事件。
2.停止事件冒泡
代码如下：
1 $(“span”).bind("click",function(even){//even事件对象 2 var txt=$(\'#mysg\').html()+"<p>span标签被单击</p>"; 3 $("mysg").html(txt); 4 even.stopPropgation();//停止冒泡 5 })
移除事件
在绑定事件的过程中，不仅可以为同一个元素绑定多个事件，也可以多个元素绑定一个事件。绑定多个事件使用代码如下：
1 <script> 2 $("#btn").bind("click",function(){ 3 $("#text").append("<p>span标签</p>"); 4 }.bind("click",function(){ 5 $("#text").append("<p>span标签</p>"); 6 }.bind("click",function(){ 7 $("#text").append("<p>span标签</p>"); 8 }); 9 </script> 10 <body> 11 <input type="button" id="btn" value="单击我" /> 12 <div id="test"></div> 13 </body>
以上是关于jQuery中的事件的主要内容，如果未能解决你的问题，请参考以下文章