第79天：jQuery事件总结（二）

       上一篇讲到的jQuery中的事件，深入学习了加载DOM和事件绑定的相关知识，这篇主要深入讨论jQuery的事件中的合成事件，事件冒泡和事件移除等内容。

　　一，合成事件

　　jQuery有两个合成事件 - hover（）方法和toggle（）方法，同就绪（）方法一样，这些都是jQuery自定义的方法。

　　hover（）方法： hover（）方法的语法结构为：

hover(enter, leave);

hover（）方法用于模拟鼠标悬停事件。当鼠标移动到元素上时，会触发指定的第一个函数（输入）;当鼠标移出这个元素时，会触发指定的第二个函数（离开） 。

　　上篇中有一个例子是这样写的：

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” “），那么这两对绑定函数，其实是两对事件是什么区别呢解析如下？

　　鼠标悬停与的mouseenter

　　不论鼠标指针穿过被选元素或其子元素，都会触发mouseover事件。
　　只有在鼠标指针穿过被选元素时，才会触发mouseenter事件。

　　mouseout与mouseleave
　　不论鼠标指针离开被选元素还是任何子元素，都会触发mouseout事件。
　　只有在鼠标指针离开被选元素时，才会触发mouseleave事件。

　　简单的说，mouseover和mouseout会引起触发的区域更大，mouseenter 和mouseleave只能针对绑定的元素来触发。

　　toggle（）方法： toggle（）方法的语法结构为：

toggle(fn1, fn2, fn3, ...);

　　肘节（）方法用于模拟鼠标连续单击事件。每次单击元素，依次触发指定的相应的函数，直到最后一个。随后的每次单击都重复对这几个。

　　上篇有过下面的一个例子，在其中如果要连续单击“标题”链接，实现“内容”隐藏和显示的效果，那么按照之前的做法就需要在绑定“单击”事件的时候判断当前的“内容”部分是隐藏还是显示，然后进行相反的操作，显然就麻烦的多。

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   })

但是这种方式显然麻烦的多，不是最合适的再看这个需求，刚好就很适合使用。肘节（）方法使用肘节（）方法改写上面的例子如下：

1 $(function(){
2   $("#container h4.head").toggle(function(){
3     $(this).next().show();
4   },  function(){
5     $(this).next().hide()
6   })
7 })

2，事件冒泡：

在页面上可以有多个事件，也可以多个元素相应同一个事件，就像上面介绍的那两对事件一样。再比如，假设网页上有两个元素，一个元素甲嵌套在另一个元素乙中，并且都被绑定了点击事件，同时体元素上也绑定了点击事件那么在单击子元素甲的时候，会依次触发三个单击事件;单击元素乙的时候，会依次触发两个单击事件。

　　就上面的简单描述，已经可以看出问题所在了，那就是会出现意想不到的单击事件，所以需要对事件作用范围进行限制。

　　jQuery的有三种办法可以解决事件冒泡导致的问题。

　　1，事件对象：也就是之前介绍过的使用绑定（）方法，例如：

$("element").bind("click", function(event){  //event:事件对象
  //code...
})

上面代码中，当单击元件元素时，事件对象就被创建了。这个事件对象只有事件处理函数才能访问到。事件处理函数执行完毕后，事件对象就被销毁。

　　2，停止事件冒泡：。停止事件冒泡可以阻止事件中其他的jQuery中提供了 stopPropagation（）方法来停止事件冒泡。

$("element").bind("click", function(event){  //event:事件对象
  //code...
　//code...
  event.stopPropagation();    //停止事件冒泡
})

阻止默认行为：与上面的stopPropagation（）方法相似，jQuery的也提供了preventDefault（）方法方法来阻止元素的默认行为。

 

　　三，移除事件：

在绑定事件的过程中，不仅可以为同一个元素绑定多个事件，也可以为多个元素绑定同一个事件。

　　所以，移除事件就涉及两种情况下的移出，一种是移除之前注册的所有事件，二是移除其中的一个事件以一个按钮为例：假设网页中有一个ID为BTN的按钮，其上绑定了几个点击事件那么：

　　首先添加一个移除事件的按钮：

<button id="delAll">移除所有事件</button>

然后可以为该按钮绑定若干的单击事件，使用链式操作就可以很简单的为其绑定几个点击事件。

　　最后就是编写用于移除所有点击事件的处理函数了.jQuery代码如下：

$("#delAll").click(function(){
  $('#btn').unbind("click");
})

因为元素绑定的都是点击事件，所以上面不写“单击”参数也可以达到相同的效果。

　　因此可以看出解除绑定（）方法的语法结构：

unbind([type], [data]);

　其中，一个第参数的英文事件类型，个第二参数的英文将要移除移除的函数。显然移除元素上的所有事件是使用没有第二个参数的解除绑定（）方法。

　　如果没有第一个参数，则移除所有绑定的事件;否则只删除该类型的事件。

　　如果传入了第二个参数，则只有这个特定的事件处理函数会被删除。正是这移除移除元素的某一个事件的方法。

 

外面的世界那么浮躁，我只想要一块键盘，安静下来，奏出精彩的代码篇章。