jQuery事件绑定和委托

jQuery事件的绑定和委托能够用多种方法实现，on()  、 bind()  、 live()  、 delegate() ，还有one()。

 

有时咱们可能会像下面这样绑定一个事件：

$("#div1").click(function() {
    alert("点击后触发");
});

 

上面的事件绑定，咱们能够经过多种方式去实现：

 

1. on()

//无数据参数
$("p").on("click", function(){
alert( $(this).text() );
});


//有数据参数
function myHandler(event) {
alert(event.data.foo);
}
$("p").on("click", {foo: "bar"}, myHandler)

 

与on()对应的是off()，用来移除事件绑定：

var foo = function () {
  // code to handle some kind of event
};

// ... now foo will be called when paragraphs are clicked ...
$("body").on("click", "p", foo);


// ... foo will no longer be called.
$("body").off("click", "p", foo);

 

 off()：移除on()进行的绑定

  one()：只绑定一次。

 

2. bind()

参数：

(type,[data],function(eventObject))

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

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

 

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

 

(type,[data],false)

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

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

 

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

 

同时绑定多个事件类型:

$('#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; })

 

bind存在的问题

       若是表格中要绑定单击事件的有10列500行，那么查找和遍历5000个单元格会致使脚本执行速度明显变慢，而保存5000个td元素和相应的事件处理程序也会占用大量内存（相似于让每一个人亲自站在门口等快递）。

 

       在前面这个例子的基础上，若是咱们想实现一个简单的相册应用，每页只显示50张照片的缩略图（50个单元格），用户点击“第x页”（或“下一页”）连接能够经过Ajax从服务器动态加载另外50张照片。在这种状况下，彷佛使用.bind()方法为50个单元格绑定事件又能够接受了。

 

       事实却否则。使用.bind()方法只会给第一页中的50个单元格绑定单击事件，动态加载的后续页面中的单元格都不会有这个单击事件。换句话说，.bind()只能给调用它的时候已经存在的元素绑定事件，不能给将来新增的元素绑定事件（相似于新来的员工收不到快递）。

 

       事件委托能够解决上述两个问题。具体到代码上，只要用jQuery 1.3新增的.live()方法代替.bind()方法便可：

$("#info_table td").live("click",function(){/*显示更多信息*/});

       这里的.live()方法会把click事件绑定到$(document)对象（但这一点从代码中体现不出来，这也是.live()方法饱受诟病的一个重要缘由，稍后再详细讨论），并且只须要给$(document)绑定一次（不是50次，更不是5000次），而后就可以处理后续动态加载的照片单元格的单击事件。在接收到任何事件时，$(document)对象都会检查事件类型和事件目标，若是是click事件且事件目标是td，那么就执行委托给它的处理程序。

 

unbind()：移除bind进行的绑定。

 

3. live()

到目前为止，一切彷佛很完美。惋惜，事实并不是如此。由于.live()方法并不完美，它有以下几个主要缺点：

• $()函数会找到当前页面中的全部td元素并建立jQuery对象，但在确认事件目标时却不用这个td元素集合，而是使用选择符表达式与event.target或其祖先元素进行比较，于是生成这个jQuery对象会形成没必要要的开销；
• 默认把事件绑定到$(document)元素，若是DOM嵌套结构很深，事件冒泡经过大量祖先元素会致使性能损失；
• 只能放在直接选择的元素后面，不能在连缀的DOM遍历方法后面使用，即$("#info_table td").live...能够，但$("#info_table").find("td").live...不行；
• 收集td元素并建立jQuery对象，但实际操做的倒是$(document)对象，使人费解。

解决之道

为了不生成没必要要的jQuery对象，可使用一种叫作“早委托”的hack，即在$(document).ready()方法外部调用.live()：

(function($){
    $("#info_table td").live("click",function(){/*显示更多信息*/});
})(jQuery);

 

在此，(function($){...})(jQuery)是一个“当即执行的匿名函数”，构成了一个闭包，能够防止命名冲突。在匿名函数内部，$参数引用jQuery对象。这个匿名函数不会等到DOM就绪就会执行。注意，使用这个hack时，脚本必须是在页面的head元素中连接和(或)执行的。之因此选择这个时机，由于这时候恰好document元素可用，而整个DOM还远未生成；若是把脚本放在结束的body标签前面，就没有意义了，由于那时候DOM已经彻底可用了。

为了不事件冒泡形成的性能损失，jQuery从1.4开始支持在使用.live()方法时配合使用一个上下文参数：

$("td",$("#info_table")[0]).live("click",function(){/*显示更多信息*/});

这样，“受托方”就从默认的$(document)变成了$("#info_table")[0]，节省了冒泡的旅程。不过，与.live()共同使用的上下文参数必须是一个单独的DOM元素，因此这里指定上下文对象时使用的是$("#info_table")[0]，即便用数组的索引操做符来取得的一个DOM元素。 

 

 

3. delegate()

      如前所述，为了突破单一.bind()方法的局限性，实现事件委托，jQuery 1.3引入了.live()方法。后来，为解决“事件传播链”过长的问题，jQuery 1.4又支持为.live()方法指定上下文对象。而为了解决无谓生成元素集合的问题，jQuery 1.4.2干脆直接引入了一个新方法.delegate()。

 

使用.delegate()，前面的例子能够这样写：

$("#info_table").delegate("td","click",function(){/*显示更多信息*/});

 

使用.delegate()有以下优势（或者说解决了.live()方法的以下问题）：

• 直接将目标元素选择符（"td"）、事件（"click"）及处理程序与“受拖方”$("#info_table")绑定，不额外收集元素、事件传播路径缩短、语义明确；
• 支持在连缀的DOM遍历方法后面调用，即支持$("table").find("#info").delegate...，支持精确控制；

可见，.delegate()方法是一个相对完美的解决方案。但在DOM结构简单的状况下，也可使用.live()。

       提示：使用事件委托时，若是注册到目标元素上的其余事件处理程序使用.stopPropagation()阻止了事件传播，那么事件委托就会失效。

 

undelegate():移除delegate的绑定