事件一直是javascript中最强大的对象之一。Javascript提供了两种方法，addEventListener和attachEvent，为DOM节点绑定事件。jquery被进一步封装，并提供了兼容所有浏览器的绑定方法。现在，这种传统的事件绑定方法有以下缺点：1。可能需要绑定很多EventHander。如果页面中的表有100行，现在必须为每行绑定一个click事件。那么必须绑定100个EventHandler，这对页面性能是一个很大的负担，因为需要创建更多的内存来存储这些Handler。2.该事件不能绑定到稍后添加的DOM节点。假设页面中的代码如下：复制代码如下： $ ('# dv ')。bind ('click ')，function(){ alert(' test ')；});在$ (body)后面添加了一个div。追加(' div id=' dv' test/div ')不能触发点击事件。为了解决这两个问题，javascript引入了事件代理。首先，我们了解js中的冒泡机制。

基本上，所有浏览器都支持事件冒泡。当在DOM节点上触发一个事件时，该事件将被向上传递到文档的根节点。由于所有节点的事件最终都会传递到文档根节点，如果我们直接将事件绑定到文档根节点，然后通过event.target判断是哪个节点触发了事件，会不会减少很多EventHandler的绑定？jquery中的live方法就是根据这个原则正式实现的。下面我们实现一个简单版本的live:复制代码如下： $ .fn.mylive=function(事件类型，fn) {var那=this.selector$(文档)。bind(eventType，function(event){ var match=$(event . target))。最接近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 t第二列/TD t第三列/TD /tr /table '；$(“body”)。追加(TB)；在live方法中，事件绑定到文档节点$(event.target)。与实际触发事件的元素最接近。在演示中，我们为后来添加的每个td绑定了一个点击事件，当我们点击不同的td时，我们发现对应于它们的Text的提示框会弹出。live方法弥补了上述传统事件绑定方法的两个缺点。然而，直播方法仍然有其缺点。看看这个代码：复制代码如下： $ ('# tbtd ')。mylive ('click '，function (event) {alert (event。target . innerhtml)；});它将首先根据jquery选择器遍历整个文档，找到所有#tb td元素，并将它们存储为对象。但是在live的实现方法中，并没有使用这些对象，而是只使用了' #td td '作为字符串来匹配事件源。这大大增加了很多不必要的消耗。那么有什么办法可以改善这种情况呢？jquery中提供了委托代理方法，它支持将事件绑定到指定的元素，而不仅仅是文档。了解其原理后，我们将实现委托的简单版本：复制代码如下： $ (body)。追加(' div id=' dv '/div ')；$ . fn . my delegate=函数(选择器、eventType、fn){$(this)。bind(eventType)，function(event){ var match=$(event . target)。最近的(选择器)；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 t第二列/TD t第三列/TD /tr /table '；$(“dv”)。追加(TB)；mydeletage方法不需要获取所有td对象，只需要获取绑定事件的div对象。这在执行效率上优于live方法。在这里，它只是作为一个指南，让大家知道事件代理的原理。jquery中live和delegate的实现要复杂得多。