注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

星期五

明天不上班

 
 
 

日志

 
 
关于我

一个特立独行的Java程序员,比较宅,上上网,写博客,听音乐,看电影。

网易考拉推荐

关于JS事件委托  

2014-05-09 23:51:19|  分类: Javascript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
其实,关于事件委托,在不知道它之前,其实已经在实际工作中使用了。
先说说JS事件委托:其实就是利用JS事件的冒泡机制,将事件加在父元素上,实现子元素触发事件的效果。
事件委托的好处:
1.减少事件注册的数量,因为通过对父元素触发,模拟子元素触发效果,不用对子元素注册事件,这样提高了性能。
2.当增加子元素时,不需要在对其注册事件。

实际例子:(对ul中的所有li注册mouseover和mouseout事件)

var ul = document.getElementById("ul1");
var lis = ul.children;

var len = lis.length
for(var i=0; i<len; i++ ) {
var li = lis[i];
li.onmouseover = function(){

};

li.onmouseout = function(){

};
}

使用事件代理,将事件注册到ul上

var ul = document.getElementById("ul1");
ul.onmouseover = function(evt){
var target = evt.target | evt.srcElement;
if(target.nodeName.toLowerCase() === 'li') {

}
};

ul.onmouseout = function(evt) {
var target = evt.target | evt.srcElement;
if(target.nodeName.toLowerCase() === 'li') {

}
};

工作中的例子:
GirdX checkBoxColumn模块中()
 用onCellClick代理checkbox上的onclick

//注册checkBoxClick事件, 当你在点击checkBox时, 对checkBox进行打钩
var checkBoxClickHandler = t.grid.connect(t.grid, 'onCellClick', function(evt){
var target = evt.originalTarget||evt.srcElement;
if(domClass.contains(target, "gridxIndirectSelectionCheckBox")){
var row = t.grid.row(evt.rowId, 1);
var rowData = row.rawData();
var cStatus = rowData[t.checkBoxField];
rowData[t.checkBoxField] = (cStatus === 2? 0 : 2);
t.grid.model.store.put(rowData);
}
});

dojo也提供了专门的事件代理函数
dojox.NodeList.delegate
dojo.query("#navbar").delegate("a", "onclick", function(evt){ ... } )
Gridx上所有的事件,个人感觉也是使用事件代理,最大化节约性能。

参考资料:
http://www.tuicool.com/articles/jQZj6zB
http://hi.baidu.com/icemanjin/item/e324ef3a28454d352e20c4e8
  评论这张
 
阅读(153)| 评论(2)
推荐

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017