第79天：jQuery事件总结
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了第79天：jQuery事件总结相关的知识，希望对你有一定的参考价值。
上一篇讲到jQuery中的事件，深入学习了加载DOM和事件绑定的相关知识，这篇主要深入讨论jQuery事件中的合成事件、事件冒泡和事件移除等内容。
一、合成事件
jQuery有两个合成事件——hover()方法和toggle()方法，同ready()方法一样，这些都是jQuery自定义的方法。
hover()方法：hover()方法的语法结构为：
hover(enter, leave);
hover()方法用于模拟鼠标悬停事件。当鼠标移动到元素上时，会触发指定的第一个函数（enter）；当鼠标移出这个元素时，会触发指定的第二个函数（leave）。
上篇中有一个例子是这样写的：
1 $(function(){ 2 $("#container h4.head").bind("mouseover", function(){ 3 $(this).next().show(); //获取并显示“内容”元素 4 }).bind("mouseout", function(){ 5 $(this).next().hide(); 6 }); 7 })
可以将这个例子改写成以下的jQuery代码：
1 $(function(){ 2 $("#container h4.head").hover(function(){ 3 $(this).next().show(); //获取并显示“内容”元素 4 }, function(){ 5 $(this).next().hide(); 6 }); 7 })
上述两种写法的代码的运行效果是一致的。
*这里要注意的一点是，jQuery的hover()方法准确来说是替代jQUery中的bind("mouseenter")和bind("mouseleave")，而不是替代bind("mouseover")和bind("mouseout")，那么这两对绑定函数，其实是两对事件是什么区别呢？解析如下：
mouseover与mouseenter
不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。
只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。
mouseout与mouseleave
不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。
只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。
简单的说，mouseover和mouseout会引起触发的区域更大，mouseenter和mouseleave只能针对绑定的元素来触发。
toggle()方法：toggle()方法的语法结构为：
toggle(fn1, fn2, fn3, ...);
toggle()方法用于模拟鼠标连续单击事件。每次单击元素，依次触发指定的相应的函数，直到最后一个。随后的每次单击都重复对这几个函数的轮番调用。
上篇有过下面的一个例子，在其中如果要连续单击“标题”链接，实现“内容”隐藏和显示的效果，那么按照之前的做法就需要在绑定“click”事件的时候判断当前的“内容”部分是隐藏还是显示，然后进行相反的操作，显然就麻烦的多。
1 $(function(){ 2 $("#container h4.head").bind("click", function(){ 3 var $content = $(this).next(); 4 if($content.is(":visible")) 5 $content.hide(); 6 else 7 $content.show(); 8 } 9 })
但是这种方式显然麻烦的多，不是最合适的。再看这个需求，刚好就很适合使用toggle()方法。使用toggle()方法改写上面的例子如下：
1 $(function(){ 2 $("#container h4.head").toggle(function(){ 3 $(this).next().show(); 4 }, function(){ 5 $(this).next().hide() 6 }) 7 })
2、事件冒泡：
在页面上可以有多个事件，也可以多个元素相应同一个事件，就像上面介绍的那两对事件一样。再比如，假设网页上有两个元素，一个元素A嵌套在另一个元素B中，并且都被绑定了click事件，同时body元素上也绑定了click事件。那么在单击子元素A的时候，会依次触发三个click事件；单击元素B的时候，会依次触发两个click事件。
就上面的简单描述，已经可以看出问题所在了，那就是会出现意想不到的click事件，所以需要对事件作用范围进行限制。
jQuery有三种办法可以解决事件冒泡导致的问题。
1、事件对象：也就是之前介绍过的使用bind()方法，例如：
$("element").bind("click", function(event){ //event:事件对象
//code...
})
上面代码中，当单击element元素时，事件对象就被创建了。这个事件对象只有事件处理函数才能访问到。事件处理函数执行完毕后，事件对象就被销毁。
2、停止事件冒泡：停止事件冒泡可以阻止事件中其他对象的事件处理函数被执行。在jQuery中提供了stopPropagation()方法来停止事件冒泡。
$("element").bind("click", function(event){ //event:事件对象 //code...
//code...
event.stopPropagation(); //停止事件冒泡 })
阻止默认行为：与上面的stopPropagation()方法相似，jQuery也提供了preventDefault()方法来阻止元素的默认行为。
三、移除事件：
在绑定事件的过程中，不仅可以为同一个元素绑定多个事件，也可以为多个元素绑定同一个事件。
所以，移除事件就涉及两种情况下的移出，一种是移除之前注册的所有事件，二是移除其中的一个事件。以一个按钮为例：假设网页中有一个id为btn的按钮，其上绑定了几个click事件。那么：
首先添加一个移除事件的按钮：
<button id="delAll">移除所有事件</button>
然后可以为该按钮绑定若干的click事件，使用链式操作就可以很简单的为其绑定几个click事件。
最后就是编写用于移除所有click事件的处理函数了。jQuery代码如下：
$("#delAll").click(function(){
$(‘#btn‘).unbind("click");
})
因为元素绑定的都是click事件，所以上面不写“click”参数也可以达到相同的效果。
因此可以看出unbind()方法的语法结构：
unbind([type], [data]);
其中，第一个参数是事件类型，第二个参数是将要移除的函数。显然移除元素上的所有事件是使用没有第二个参数的unbind()方法。
如果没有第一个参数，则移除所有绑定的事件；否则只删除该类型的事件。
如果传入了第二个参数，则只有这个特定的事件处理函数会被删除。这正是移除元素的某一个事件的方法。
以上是关于第79天：jQuery事件总结的主要内容，如果未能解决你的问题，请参考以下文章
100天精通Python（可视化篇）——第79天：matplotlib绘制不同种类炫酷折线图代码实战（网格趋势对比百分比多条折线堆积百分比堆积多坐标子图3D折线图）