javascript中的事件代理初探
事件在javascript中一直是最强大的对象之一。javascript提供了addEventListener和attachEvent两个方法来为DOM节点绑定事件，jquery作了进一步封装，提供了兼容各个浏览器的bind方法。现在来看，这种传统的事件绑定方式存在着以下不足：
1.可能需要绑定很多的EventHander。
假如页面中某个表有100行，现在必须为每一行绑定一个click事件。那么就必须绑定100个EventHandler，这对页面性能来说有着极大的负担，因为需要创建更多的内存来存放这些Handler。
2.事件无法绑定后加入的DOM节点。
假如页面中的代码如下：
$("#dv").bind('click',function(){alert('test');});
$(body).append('<div id="dv">test</div>')
后加入的div是无法触发点击事件的。
为了解决这两个问题，javascript引入了事件代理（event proxy）。首先，我们了解一下js中的冒泡机制。
基本上所有的浏览器都支持事件冒泡。当在某个DOM节点上触发事件上，事件会一直向上传递，一直到文档的根节点。既然所有的节点的事件最终都会传递到文档根节点，那么我们如果直接将事件绑定到文档根节点（document节点），然后通过event.target来判断是哪个节点触发的事件，是不是减少很多EventHandler的绑定呢？
jquery中的live方法正式根据这个原理来实现的，下面我们来实现一个live简单版：
$.fn.mylive=function(eventType,fn){
var that=this.selector;
$(document).bind(eventType,function(event){
var match=$(event.target).closest(that)
if(match.length !== 0){
fn.apply($(event.target),[event]);
}
})
}
$("#tb td").mylive('click',function(event){
alert(event.target.innerHTML);
});
var tb='<table id="tb"> \
<tr> \
<td>the first column</td>\
<td>the second column</td>\
<td>the third column</td>\
</tr>\
</table>';
$("body").append(tb);
live方法中，事件绑定在document节点上，$(event.target).closest(that)来匹配真正触发事件的元素。demo中，我们为每个后加入的td都绑定了click事件，单击不同的td，我们发现会弹出他们对应Text的提示框。
live方法弥补了前面提到的传统事件绑定方法的两个不足。但live方法仍存在它的不足之处。看这句代码：
$("#tb td").mylive('click',function(event){
alert(event.target.innerHTML);
});
它会首先根据jquery选择器遍历整个文档，找到所有的#tb td元素，将他们存储成对象。然而，在live的实现方法中，并没有利用这些对象，而仅仅是将"#td td"作为字符串与事件源进行匹配而已。这就大大增加了很多无谓的消耗。
那么有没有办法改善这一状况呢？jquery中提供了delegate代理方法，它支持将事件绑定到指定的元素上，而不仅仅是document上。了解了它的原理，我们来实现一个delegate简单版：
$(body).append('<div id="dv"></div>');
$.fn.mydelegate=function(selector,eventType,fn){
$(this).bind(eventType,function(event){
var match=$(event.target).closest(selector);
if(match.length !== 0){
fn.apply($(event.target),[event]);
}
});
}
$("#dv").mydelegate('td','click',function(event){
alert(event.target.innerHTML);
});
var tb='<table id="tb"> \
<tr> \
<td>the first column</td>\
<td>the second column</td>\
<td>the third column</td>\
</tr>\
</table>';
$("dv").append(tb);
mydeletage方法不需要获取所有的td对象，而仅仅只需要获取绑定事件的div对象。这在执行效率上要优于live方法。
这里仅仅起到一个抛砖引玉的作用，让大家了解到事件代理的原理而已，jquery中的live和delegate实现要复杂的多。
相关文章
这篇文章主要为大家详细介绍了微信小程序实现YDUI的ScrollTab组件，滚动选项卡效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-02-02
这篇文章主要介绍了JS动态修改iframe内嵌网页地址的方法,涉及javascript动态修改iframe中src属性的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-04-04
一个不错的用JavaScript实现的UBB编码函数...2007-03-03
这篇文章主要介绍了Bootstrap风格的zTree右键菜单功能，实现代码分为html，css和js三部分，代码简单易懂，非常不错，需要的朋友可以参考下2017-02-02
bootstrap时间插件daterangepicker使用详解
这篇文章主要为大家详细介绍了bootstrap时间插件daterangepicker使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
这篇文章主要为大家详细介绍了微信小程序实现登录界面，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
这篇文章主要介绍了Javascript监视变量变化的方法,涉及javascript针对变量的相关操作技巧,需要的朋友可以参考下2015-06-06
这篇文章主要为大家详细介绍了JS实现进度条动态加载特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-03-03
这篇文章主要为大家分享了前端面试知识点锦集JavaScript篇，细致的给出了每个js面试知识点的答案，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要介绍了原生js+css调节音量滑块，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-01-01
最新评论