深入学习jquery源码之bind()与delegate()

深入学习jquery源码之bind()与delegate()

bind(type,[data],fn)

概述

为每个匹配元素的特定事件绑定事件处理函数。

参数

type,[data],function(eventObject) String,Object,Function

type: 含有一个或多个事件类型的字符串，由空格分隔多个事件。比如"click"或"submit"，还可以是自定义事件名。

data:作为event.data属性值传递给事件对象的额外数据对象

fn:绑定到每个匹配元素的事件上面的处理函数

type,[data],false  String,Object,bool

type:含有一个或多个事件类型的字符串，由空格分隔多个事件。比如"click"或"submit"，还可以是自定义事件名。

data:作为event.data属性值传递给事件对象的额外数据对象

false: 将第三个参数设置为false会使默认的动作失效。

events  String

一个或多个事件类型的字符串和函数的数据映射来执行他们。

使用

当每个段落被点击的时候，弹出其文本。

$("p").bind("click", function(){
  alert( $(this).text() );
});

同时绑定多个事件类型

$('#foo').bind('mouseenter mouseleave', function() {
  $(this).toggleClass('entered');
});

同时绑定多个事件类型/处理程序

$("button").bind({
  click:function(){$("p").slideToggle();},
  mouseover:function(){$("body").css("background-color","red");},  
  mouseout:function(){$("body").css("background-color","#FFFFFF");}  
});

你可以在事件处理之前传递一些附加的数据。

function handler(event) {
  alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)

通过返回false来取消默认的行为并阻止事件起泡。

$("form").bind("submit", function() { return false; })

通过使用 preventDefault() 方法只取消默认的行为。

$("form").bind("submit", function(event){
  event.preventDefault();
});

通过使用 stopPropagation() 方法只阻止一个事件起泡。

$("form").bind("submit", function(event){
  event.stopPropagation();
});

 

unbind(type,[data|fn]])

概述

bind()的反向操作，从每一个匹配的元素中删除绑定的事件。

如果没有参数，则删除所有绑定的事件。

你可以将你用bind()注册的自定义事件取消绑定。

如果提供了事件类型作为参数，则只删除该类型的绑定事件。

如果把在绑定时传递的处理函数作为第二个参数，则只有这个特定的事件处理函数会被删除。

参数

type,[fn] String,Function

type:删除元素的一个或多个事件,由空格分隔多个事件值。

fn:要从每个匹配元素的事件中反绑定的事件处理函数

type,false String,bool 

type:删除元素的一个或多个事件,由空格分隔多个事件值

false:设置为false会使默认的动作失效。

eventObj String

事件对象。这个 eventObj 参数来自事件绑定函数

把所有段落的所有事件取消绑定

$("p").unbind()

将段落的click事件取消绑定

$("p").unbind( "click" )

删除特定函数的绑定，将函数作为第二个参数传入

var foo = function () {
  // 处理某个事件的代码
};

$("p").bind("click", foo); // ... 当点击段落的时候会触发 foo 

$("p").unbind("click", foo); // ... 再也不会被触发 foo

 

delegate(selector,[type],[data],fn)

概述

指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。

使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。

参数

selector,[type],fn String,String,Function

selector:选择器字符串，用于过滤器触发事件的元素。

type:附加到元素的一个或多个事件。 由空格分隔多个事件值。必须是有效的事件。

fn:当事件发生时运行的函数

selector,[type],[data],fn String,String,Object,Function

selector:选择器字符串，用于过滤器触发事件的元素。

type:附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。

data:传递到函数的额外数据

fn:当事件发生时运行的函数

selector,events String,String

selector:选择器字符串，用于过滤器触发事件的元素。

events:一个或多个事件类型的字符串和函数的数据映射来执行他们。

当点击鼠标时，隐藏或显示 p 元素：

这是一个段落。
请点击这里

$("div").delegate("button","click",function(){
  $("p").slideToggle();
});

delegate这个方法可作为live()方法的替代，使得每次事件绑定到特定的DOM元素。

以下两段代码是等同的:

$("table").delegate("td", "hover", function(){
    $(this).toggleClass("hover");
});

$("table").each(function(){
    $("td", this).live("hover", function(){
          $(this).toggleClass("hover");
    });
    
});

 

undelegate([selector,[type],fn])

概述

删除由 delegate() 方法添加的一个或多个事件处理程序。

参数

selector,[type] String,String

selector:需要删除事件处理程序的选择器。

type:需要删除处理函数的一个或多个事件类型。 由空格分隔多个事件值。必须是有效的事件。

selector,[type],fn String,String,Function

selector:需要删除事件处理程序的选择器。

type:需要删除处理函数的一个或多个事件类型。 由空格分隔多个事件值。必须是有效的事件。

fn:要删除的具体事件处理函数。

selector,events String,String 

selector:需要删除事件处理程序的选择器。

events:一个或多个事件类型的字符串和函数的数据映射来执行他们。

namespace String

namespace:一个字符串，其中包含一个命名空间取消绑定的所有事件。

从p元素删除由 delegate() 方法添加的所有事件处理器：

$("p").undelegate();

从p元素删除由 delegate() 方法添加的所有click事件处理器：

$("p").undelegate( "click" )

从form元素删除由 delegate() 方法添加的".whatever"命名空间：

var foo = function () {
  //.....
};
//用delegate() 方法给click事件增加".whatever"命名空间
$("form").delegate(":button", "click.whatever", foo);
$("form").delegate("input[type='text']", "keypress.whatever", foo); 

// 用undelegate()方法删除delegate()方法增加的".whatever"命名空间
$("form").undelegate(".whatever");

 

live(type, [data], fn)

概述

jQuery 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。

这个方法是基本是的 .bind() 方法的一个变体。使用 .bind() 时，选择器匹配的元素会附加一个事件处理函数，而以后再添加的元素则不会有。为此需要再使用一次 .bind() 才行。比如说

  
Click here

可以给这个元素绑定一个简单的click事件：

$('.clickme').bind('click', function() {
  alert("Bound handler called.");
});

当点击了元素，就会弹出一个警告框。然后，想象一下这之后有另一个元素添加进来了。

$('body').append('
Another target
');

尽管这个新的元素也能够匹配选择器 ".clickme" ，但是由于这个元素是在调用 .bind() 之后添加的，所以点击这个元素不会有任何效果。

.live() 就提供了对应这种情况的方法。如果我们是这样绑定click事件的：

$('.clickme').live('click', function() {
  alert("Live handler called."); 
});

然后再添加一个新元素：

$('body').append('
Another target
');

然后再点击新增的元素，他依然能够触发事件处理函数。

事件委托

.live() 方法能对一个还没有添加进DOM的元素有效，是由于使用了事件委托：绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。传递给 .live() 的事件处理函数不会绑定在元素上，而是把他作为一个特殊的事件处理函数，绑定在 DOM 树的根节点上。在我们的例子中，当点击新的元素后，会依次发生下列步骤：

1. 生成一个click事件传递给

   来处理

2. 由于没有事件处理函数直接绑定在