码迷,mamicode.com
首页 > 编程语言 > 详细

事件的委托处理 javascript

时间:2016-11-30 17:10:03      阅读:146      评论:0      收藏:0      [点我收藏+]

标签:提醒   javascrip   tab   动态插入   笔记   处理   事件   bin   绑定   

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元素有效,对动态插入的元素无效。

 

 

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

事件的委托处理 javascript

标签:提醒   javascrip   tab   动态插入   笔记   处理   事件   bin   绑定   

原文地址:http://www.cnblogs.com/lynnekanuo/p/6118317.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!