|
先说说为什么要接头这个话题，事变阅历多一点的WEB前端工程师都知道，我们常常必要对页面上大量具有某种共性的节点绑定同样的一个变乱处理赏罚器，传统的方法是将这些节点获取为一个工具荟萃，然后对每个荟萃绑定一次变乱，很显然，当荟萃只有两三个元素的时辰，我们这样做无所谓。但当数目到达几十乃至几百个的时辰怎么办呢？行使这种遍历工具集依次举办绑定的方法势必会造成很蛋疼的机能题目。出格是在那些低端赏识器上。他们拥有着机能很是可悲的javascript表明引擎，这给我们那些要求页面体验和流通度的工程师们带来的无疑是很极重的冲击。
本日就给各人先容一个名词“变乱委托”，好手就不要在这里讥笑我了，我这都是写给新手看看的。所谓“变乱委托”，犹如名字一样，是我们将这个荟萃中每个元素的变乱，委托给某一个元向来处理赏罚，这样我们只必要绑定一个元素的某个变乱，就可以到达我们所必要的结果。为了各人可以或许清晰的相识个中的道理，我在这里不举办变乱绑定的相干讲授，绑定的时辰只行使DOM0级要领，兼容全部赏识器即可。
不空话，且看代码，道理在代码的注释中写得很具体
你也可以直接查察文章后头的无注释代码
//变乱委托
//这里我们建设bind函数，给了四个参数
//obj,必要绑定变乱的节点，
//tar,在obj容器中的必要批量绑定变乱的方针元素标署名
//evName,必要绑定的变乱名称
//fn,必要为方针元素绑定的变乱处理赏罚函数
var bind = function(obj,tar,evName,fn){
obj['on'+evName] = function(event){
var e = event||window.event,
//起首对event做兼容，window.event首要用于兼容IE
target = e.target|| e.srcElement,
//对target做兼容，e.srcElement首要用于兼容IE，这里获取的是触发变乱的方针元素
bool = true;
//配置一个bool型变量，后头会用到
if(target != obj){
//这一步较量重要，判定target是否和obj相称，目标在于区别触发变乱的元素是否为绑定变乱的元素自己，假如是，很明明不切合要求，由于我们要触发变乱的工具应该是绑定元素内的某一些元素。
(function(){
//这里做了一个匿名函数，首要用于轮回判定我们触发变乱的元素（target）是否在我们的方针元素（tar）内
if(target.tagName != tar.toUpperCase()){
//判定触发变乱的元素标署名（tagName）是否和我们提供的方针元素的标署名（tar）相称，
target = target.parentNode;
//假如不是方针元素，则探求触发变乱元素的父元素，并修改target指向这个父元素
if(target!=obj){
//判定修改事后的target是否为我们绑定变乱的元素
arguments.callee();
//假如不是我们绑定变乱的元素，则从头运行这个匿名函数
}else{
bool = false;
//假如是这个我们绑定变乱的元素，则遏制从头运行这个匿名函数，由于这代表我们的轮回已经到达了绑定变乱的元素，再往外查找已经没有须要了，这里将bool配置为false
}
}
})();
//这里的空括号用于执行匿名函数
if(bool){fn(target);}
//判定是bool是否为true,假如为true，暗示我们触发变乱的元素在方针元素(tar)内，运行变乱处理赏罚函数，并传入方针元素工具，假如为false，则相反。
}
}
}
看完上面的代码，不免各人有点模糊，其拭魅这内里有两个要点，我来总结一下，各人便大白了
第一、通过给obj容器绑定变乱，然后通过target来获得触发这个变乱的工具
第二、操作内里的匿名函数举办轮回，检测触发变乱的元素是否为我们想要委托的工具
附上逻辑图
无注释版本代码
var bind = function(obj,tar,evName,fn){
obj['on'+evName] = function(event){
var e = event||window.event,
target = e.target|| e.srcElement,
bool = true;
if(target != obj){
(function(){
if(target.tagName != tar.toUpperCase()){
target = target.parentNode;
if(target!=obj){
arguments.callee();
}else{
bool = false;
}
}
})();
if(bool){fn(target);}
}
}
}
本文来自：webzhan的前端技能博客 （编辑：河北网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
