事件的绑定与移除

事件的绑定

在jQuery中，可以使用bind()方法来对元素进行特定事件的绑定，该方法接受三个参数：第一个参数是事件类型：blur、focus、click等，也可以是自定义名称；第二个参数是可选参数，作为event.data属性值传递给事件对象的额外数据对象；第三个参数则是用来绑定的处理函数。

<button id="btn">点击我</button>
<script type="text/javascript">
    $(function(){
       $('#btn').bind("click",function(){
             $('body').append("<p>我的绑定函数</p>");
       })
    })
</script>

但是，在事件操作过程中，我们经常采用简写的方式为元素绑定事件。

<button id="btn">点击我</button>

<script type="text/javascript">

　　$(function(){

　　　　$('#btn').click(function(){

　　　　　　$('body').append("<p>我的绑定函数</p>");

　　　　})

　　})

</script>

有的时候，我们还可以根据需要，为同一个元素绑定多个事件。

<button id="btn">点击我</button>
<script type="text/javascript">
    $(function(){
       $('#btn').bind("click", function(){
                     $('body').append("<p>我的绑定函数1</p>");
              }).bind("click", function(){
                     $('body').append("<p>我的绑定函数2</p>");
              }).bind("click", function(){
                       $('body').append("<p>我的绑定函数3</p>");
              });
    })
</script>

当我们点击按钮的时候，会依次触发绑定的三个事件：

事件移除

 在jQuery中，使用unbind()方法进行事件的移除，该方法接收两个参数：事件类型和要移除的函数。

• 如果没有传入参数，则删除所有绑定的事件
• 如果提供了事件类型作为参数，则只删除该类型的绑定事件
• 如果把在绑定时传递额处理函数作为第二个参数，则只有这个特定的事件处理函数会被删除

我们将上面绑定多个事件的代码进行修改

<button id="btn">点击我</button>
<div id="test"></div>
<button id="del">删除事件</button>
<script type="text/javascript">
    $(function(){
       $('#btn').bind("click", myFun1 = function(){
                     $('#test').append("<p>我的绑定函数1</p>");
              }).bind("click", myFun2 = function(){
                     $('#test').append("<p>我的绑定函数2</p>");
              }).bind("click", myFun3 = function(){
                       $('#test').append("<p>我的绑定函数3</p>");
              });
    })
</script>

当unbind()没有传入参数时：

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

此时表示移除所有的绑定事件，当先点击删除事件按钮再点击上面的按钮时，页面不会有任何变化，因为所有的事件均被移除。

当unbind()只有一个参数的时候：

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

此时表示只移除匹配元素的单击事件，因为上面绑定的多个事件均为单击事件，所以看到的效果和上面的是一样的。

当unbind()接收两个参数时：

$('#del').click(function(){
      $('#btn').unbind("click",myFun2);
});

此时表示只移除事件处理函数名为“myFun2”的单击事件，当先点击删除事件，在点击上面的按钮时，会出现下面的变化：

one()

 有时候，我们为某些元素绑定事件时，只希望这些事件执行一次就立即被移除，针对这种情况，jQuery提供了一种简写的方法：one()方法，该方法可以为元素绑定处理函数，当处理函数触发一次后，立即被删除。该方法的结构和使用语法同bind()方法一样，这里就不再赘述了。

为了演示该方法，我们依旧将上面的例子进行改造：

<button id="btn">点击我</button>
<div id="test"></div>
<script type="text/javascript">
    $(function(){
       $('#btn').one("click", function(){
                     $('#test').append("<p>我的绑定函数1</p>");
              }).one("click", function(){
                     $('#test').append("<p>我的绑定函数2</p>");
              }).bind("click", function(){
                       $('#test').append("<p>我的绑定函数3</p>");
              });
    })
</script>

上面，我们为元素绑定了三个单击事件，其中有两个是只执行一次就会被立即移除的，所以，当我们第一次点击按钮时，三个事件都会触发，随后，前面两个事件就会被移除，第二次再点击按钮时，就只触发最后一个事件了。

事件委派

在使用bind()时，选择器匹配的元素会附加一个事件处理函数，而以后再添加的元素则不会有，比如下面这个例子。

<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>樱桃</li>
</ul>
<script type="text/javascript">
       $("ul li").bind("click",function(){
           $(this).css('color','red');
       })
</script>

在上面的例子中，给每个li添加了一个点击事件，当点击li时，会为点击的元素添加一个样式，如果我们此时在ul中再添加一个li，那么这个新添加的li，是没有绑定点击事件的，因为这个元素是在调用bind()方法之后添加的。

<script type="text/javascript">
       $("ul").append("<li>芒果</li>");
</script>

但是，如果在一开始将bind()方法换成live()方法，通过事件委派的方法来给匹配的元素添事件，然后再添加新的元素，那么新添加的元素也能触发事件处理函数。

<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>樱桃</li>
</ul>
<script type="text/javascript">
       $("ul li").live("click",function(){
           $(this).css('color','red');
       })
       $("ul").append("<li>芒果</li>");
</script>

live()方法之所以能够对一个还没有添加进DOM的元素有效，是由于使用了事件委托：绑定在祖先元素上的事件处理函数可以对在后代上触发的事件做出回应。传递给live()的事件处理函数不会绑定在元素上，而是把它作为一个特殊的事件处理函数，绑定在DOM树的根节点上。