事件的委托处理 javascript

javascript的事件模型，采用“冒泡”模式，即子元素的事件会逐级向上“冒泡”，成为父元素的事件。这点可以简化事件的绑定...

例如，一个表格（table）元素含有50个格子（td元素），要求每一个格子绑定一个点击事件，即

　　$("td").bind("click",function(){

　　　　$(this).toggleClass("click");

　　});这样执行50次，显然不需要。。。

只要 把事件绑定在table元素上即可，因为td元素发生点击事件之后，这个事件会冒泡到父元素table上，从而被监听到。所以这个事件只需要在父元素绑定一次即可，从而大大提高性能。

这就是事件的“委托处理”，也就是子元素“委托”父元素处理这个事件。

 

具体有两种写法：.delegate()  和   .live()

$("table").delegate("td","click",function(){

　　　　$(this).toggleClass("click");

　　});

 

$("table").each(function(){

　　$("td",this).live("click",function(){

　　　　$(this).toggleClass("click");

　　});

});

两者写法基本等价，唯一区别在于，.delegate()是当事件冒泡到指定的父元素时触发，.live()则是当事件冒泡到文档的根元素后触发，因此.delegate()稍快一点。

这两种方法均对动态插入的元素有效，bind()只对已经存在的DOM元素有效，对动态插入的元素无效。

 

 

此文是浏览其他博客之后想做的笔记，仅供提醒自己...