0 Comments

委托事件

发布于:2014-04-03  |   作者:广州网站建设  |   已聚集:人围观

委托事件

从事件冒泡时开始就发生了事件委托,我们可以直接给父元素绑定事件监听,用来检测在其子元素内发生的事件。这也是类似SproutCore(http://www.sproutcore.com/)这种框架所使用的技术,用来减少应用中的事件监听的数量:

 


  1. // 在ul 列表上做了事件委托  
  2. list.addEventListener("click", function(e){  
  3. if (e.currentTarget.tagName == "li") {  
  4. /* ... */  
  5. return false;  
  6. }  
  7. }, false); 

广州网站建设,广州网站设计,广州网站制作,网站建设,网站设计,广州网站建设公司,广州网站设计公司

jQuery 的处理方式更妙,只需给delegate() 函数传入子元素的选择器、事件类型和回调函数即可。如果使用事件绑定的话,就会给每一个li 元素都绑定click 事件,然而使用delegate() 方法就能减少这种事件监听的数量,改善代码性能:

  1. // 不要这样做,这样会给每个li 元素都添加事件监听(非常浪费)  
  2. $("ul li").click(function(){ /* ... */ });  
  3. // 这样只会添加一个事件监听  
  4. $("ul").delegate("li", "click", /* ... */); 

 

使用事件委托的另一个好处是,所有为元素动态添加的子元素都具有事件监听。因此,在上面的例子中,在页面载入完成后添加的li 节点同样可以触发点击事件的回调。
标签:
飞机