javascript中事件委托的详细说明

这几天看到一个面试问题，就是让你给1000 li加一个点击事件。应该怎么加？大多数人最初的感觉可能是每里加一。如果是这样的话，估计面试的时候会出现GG。这是我们的事件冒泡和捕获机制以及事件委托机制的撤销。我们将慢慢看上面的内容。

首先，我们来谈谈事件冒泡和事件捕获的机制。事件冒泡由微软公司提出，事件捕捉由网景公司提出。当时，两家公司正在为对方争吵。后来，w3c别无选择，只能采取妥协的方式。事件发生后，先捕捉，再冒泡。

一般来说，js中监控事件的方法有三种，分别是：

ele.addEventListener(类型，Listener，[useCapture])；//不支持IE6~8

ele.attachEvent('on '类型，侦听器)；//IE6~10支持，IE11不支持

ele . OnClick=function(){ }；//所有浏览器都支持

w3c规范定义了三个事件阶段，依次是捕获阶段、目标阶段和冒泡阶段。在w3c指定的dom2中，addEventListener用于监视事件。所以我们将使用addEventListener来解释它。首先，事假冒泡就像往水里扔石头，从下面往水里冒泡。这意味着在事件被触发后，它是从父元素的方向被触发的，但是捕获机制正好相反。捕获机制将事件从父元素触发到子元素，addEventListener函数中的第三个参数决定是使用捕获机制还是冒泡机制。当useCapture为真时，它是一种捕获机制，当useCapture为假时，它是一种冒泡机制。让我们看一下示例3360。

复制代码

div class=' parent ' div class=' child '/div/div script var parent=document . getelementsbyclassname(' parent ')[0]；var child=document . getelementsbyclassname(' child ')[0]；Parent.addeventlistener ('click '，function () {console.log('这里是父元素')；}，false)；Child.addeventlistener ('click '，function () {console.log('这里是子元素')；}，false)；/脚本

当我们单击子元素时，它会显示上图。当我们变假为真时，我们会发现执行顺序会颠倒。这就是事件冒泡和捕获的区别。他们正好相反。

那么使用这种绑定机制的缺点就是将事件绑定到每个对象会是一件特别麻烦的事情，当我们想要删除一个事件或者改变一个事件的时候会特别麻烦。更重要的是，我们增加了JavaScript和dom节点之间的关联，还有一个循环引用，可能会造成内存泄漏。这些都是它的缺点。

那么解决这个缺点的一个方法就是事件委托。此方法允许您避免逐个向每个节点添加事件。它的方法是将这些监控事件绑定到这些节点的父元素，而父元素上的这个监控函数会自动确定是哪个子元素触发了事件，这样就可以操作触发事件的子元素。我们这里给出的例子是davidwalsh :给出的例子。

现在我们有一个父元素ul和几个li子元素。

ul id=' parent-list ' li id=' post-1 ' Item 1/li Li id=' post-2 ' Item 2/Li Li id=' post-3 ' Item 3/Li Li id=' post-4 ' Item 4/Li Li id=' post-5 ' Item 5/Li Li id=' post-6 ' Item 6/Li/ul我们现在要实现的是，当我们单击每个Li节点时，Li节点中的内容将被输出。根据上面的文字，您可以选择这些li，稍后将这些方法添加到它们中，然后在不再需要它们时删除它们。如果有100里和里，1000里，就会成为你的噩梦。我们可以在监控事件中判断当前事件的目标，判断它是否是我们要找的节点。这里我们有一个简单的例子：

//找到父元素并绑定监听事件文档. getelementbyid ('parent-list ')。addeventlistener ('click ')，函数(e) {//e.target是被单击的元素//如果是li元素if(e . target e . target . nodename==' Li '){//console . log(' listitem '，e.target.id.replace ('post-'，'')，'))；}});当ul中发生点击事件时，由于默认情况下addEventListener是冒泡事件，因此当底层事件冒泡时，将执行监控事件。事件触发后，我们会检查它是否是我们要寻找的目标元素。如果不是，我们会忽略过去。那么我们不仅可以检查目标元素的标签是否是我们需要的目标元素，还可以根据目标元素的属性或者类名进行检查，并使用API ele.maeches进行处理。

Document.getelementbyid ('mydiv ')。addeventlistener ('click ')，函数(e) {//e.target是当前单击的元素，如果(e . target e . target . matches(' a . class a ')){ console . log(' anchor element clicked！');}});因此，我们可以看到使用事件代理可以给我们带来很多便利，避免很多坑。使用事件代理是一种非常强大的方法。

感谢您的阅读，希望对大家有所帮助，感谢您对本网站的支持！