Javaｓｃｒｉｐｔ事件代理的初步研究

事件已在javaｓｃｒｉｐｔ.javaｓｃｒｉｐｔ最强大的对象提供了两种方式调用addEventListener和attachevent进一步封装DOM节点绑定事件，jQuery，并提供绑定方法兼容所有浏览器。现在，这一传统的事件绑定以下缺点：

1。可能需要结合很多eventhander。

如果在页面表中有100行，现在有必要把每行一个单击事件。然后你要绑定100个EventHandler，即页面性能带来很大的负担，因为更多的内存需要创建存储汉德勒。

2。事件不能绑定到DOM节点。

如果页面中的代码如下所示：
复制代码代码如下所示：
$（# DV）。Bind（听到咔哒声，函数（）{ alert（测试）；}）；
$（体）。追加（测试）

后添加的div无法触发单击事件。

为了解决这两个问题，Javaｓｃｒｉｐｔ引入了事件代理（事件代理）。弗斯特，让我们来看看JS中的冒泡机制。

基本上所有的浏览器都支持事件冒泡。当一个事件发生在一个DOM节点触发，事件传递了所有的方式到文档的根节点。由于该事件的所有节点最终转移到文档的根节点，所以如果我们直接将事件绑定到文档的根节点（文档节点），然后通过event.target确定哪个节点触发事件，不常与许多处理器

jQuery的活方法是基于这个原理正式实现的，我们将实现一个简单的实时版本：
复制代码代码如下所示：
美元。FN。mylive =函数（事件类型，FN）{
var = this.selector；
$（document）。Bind（事件类型，函数（事件）{ {）
var匹配= $（事件目标）。
如果（match.length！= 0）{
fn.apply（$（事件。目标），{事件}）；
}
}）
}

$（# TB TD）。Mylive（听到咔哒声，功能（事件）{）
警报（事件。目标。innerHTML）；
}）；

var =
◎
第一列
第二列
第三列
◎
'；
$（）；

在活的方法中，事件被绑定到文档节点和$（事件）目标。最接近的（即）匹配真正触发事件的元素。在演示中，我们为每个添加后的TD绑定点击事件，然后单击不同的TD，我们发现它们会弹出文本提示框。

活的方法弥补了前面提到的传统事件绑定方法的两个缺点，但是活的方法仍然有它的缺点：
复制代码代码如下所示：
$（# TB TD）。Mylive（听到咔哒声，功能（事件）{）
警报（事件。目标。innerHTML）；
}）；

它将遍历整个文件根据jQuery选择器，找到所有的# TB TD元素，并将它们存储为对象。然而，在现场的实施，不使用这些对象，但只有# TD作为一个字符串匹配的事件源，大大增加了很多不必要的消费。

那么有没有办法改善这种状况呢代理代理方法是在jQuery中提供的，它支持绑定事件到指定元素，而不仅仅是在文档上，了解其原理后，我们实现了一个简单的委托版本：
复制代码代码如下所示：
$（正文）。追加（）；

美元。FN。MyDelegate =功能（选择器、事件类型，FN）{
$（这）。Bind（事件类型，函数（事件）{ {）
var = $（事件对象）。最近的（选择器）；
如果（match.length！= 0）{
fn.apply（$（事件。目标），{事件}）；
}
}）；
}

$（# DV）。Mydelegate（'td '，点击'功能（事件）{）
警报（事件。目标。innerHTML）；
}）；

var =
◎
第一列
第二列
第三列
◎
'；
$（）；

的mydeletage方法不需要把所有的TD对象，只需要结合事件的div对象。这比活方法的执行效率。

这仅仅是抛出一个JADE的角色，让您了解事件代理的原理，而jQuery中的Live和委托实现更为复杂。