delegate ，on，bind，live，off

本文的主要目的是说说他们之间的区别：

delegate：

方法基于一组特定的根元素将处理程序附加到匹配选择器的所有元素（现在的将来的）的一个或多个事件上。

也就是即使是执行delegate函数之后添加的新元素，只要是他满足条件，绑定的事件处理函数就是有效的。这个桉树可以为同一个元素，同一个对象绑定多个事件处理函数。执行函数的时候按循序执行。不过随着jquery的不断发展，现在推荐用on来代替

用法：$（selector）.delegate(childSelector,event,[data],function);其中除了data剩下的都是必须的。

返回值：delegate函数返回值为jquery类型，返回当前的iquery对象本身。

html：

<div>
    <p>这是一个段落</p>
    <p>点击一个段落他就会消失</p>
    <button>点击创建一个新的段落</button>
</div>

js：

  $(document).ready(function () {
      $('div').delegate('p','click',function () {
          $(this).slideToggle()
      })
      $('button').click(function () {
          $('<p>这是一个新的段落</p>').insertAfter('button');
      })
  })

这个用的就是delegate，如果你后用button创建了p，他也会有前面的p的功能，点击自己消失。

你也看到了上述的用法，delegate并不是直接为后代元素直接绑定事件，他是利用委托给当前的jquery对象，之后利用时间冒泡来执行。他是会判断是哪一个后代元素触发了事件，如果说该元素符合选择器，那么jquery就会捕获该事件，从而执行绑定事件的处理函数。

bind：

绑定事件，对新添加的事件不起作用，方法用于讲一个处理程序附加到每个匹配元素的事件上并返回jquery对象。

用法：$(selector).bind(event,[data],function);

其中的参数也可以是个对象：$(selector).bind({event:function,event:function});

如果上面的例子bind的话，虽说没有什么太大的用处，不过可以让你看见他们的不同。

js：

 $(document).ready(function () {
      $('div').bind('click',function () {
          $('p').slideToggle()
      })
      $('button').click(function () {
          $('<p>这是一个新的段落</p>').insertAfter('button');
      })
  })

可以看到对于后面生成的那个是不好使的。同样我们举一个bind的例子。

html：

<p>这是一个段落</p>
<button>点击它你可以隐藏段落</button>

js：

    $(document).ready(function () {
        $('button').bind({click:function () {
            $('p').slideToggle();
        },mouseover:function () {
            $('body').css({backgroundColor:'red'})
        },
        mouseout:function () {
            $('body').css({backgroundColor:'yellow'})
        }})
    })

这个是利用的第二个方法，你也可以用多个参数的那个。

live：

方法讲一个处理程序附加到与当前选择器匹配的所有元素（包含现在的将来添加的）的指定事件上并返回jquery对象。

用法：$(selector).live(event,[data],function);

html：

<p>这是一个段落</p>
<p>这是一个p段落</p>
<button>点击会消失</button>

js：

    $(document).ready(function(){
        $("p").live("click",function(){
            $(this).slideToggle();
        });
        $("button").click(function(){
            $("<p>This is a new paragraph.</p>").insertAfter("button");
        });
    });

首先你在测试之前要知道live的jquery支持版本是1.7以下，所以说早就不支持使用了，如果你想测试呢个版本就要用1.7以下的。

on：

首先你要知道on和off是对立的，off可以删除on绑定的事件。

用法：on(events,[selector],[data],fn)

注意上面的例子都是基于你引用了jquery的情况下。

上面的参数中data是传递到函数的额外参数，都是不必须的。