什么是JS事件委托？如何实现？代码
原文地址：http://icaoguo.com/2018/12/05/%E4%BB%80%E4%B9%88%E6%98%AFjs%E4%BA%8B%E4%BB%B6%E5%A7%94%E6%89%98%EF%BC%9F%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0%EF%BC%9F%E4%BB%A3%E7%A0%81/
什么是事件委托？
——什么是事件？
HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。 —— w3school
如果你学过单片机的话，那边管这个叫做“中断”。
简单来说，就是用户在你页面上做了一些动作，称做事件。
只要用户做了动作，就执行相关的代码。
事件机制在设计的时候有一些原则，比如绑定在父元素的事件，用户在子元素上也一样可以触发。
利用这个特性，所以才有了事件委托。
有啥用？
1：绑定事件越多，浏览器内存占用越大，严重影响性能。
2：ajax的出现，局部刷新的盛行，导致每次加载完，都要重新绑定事件
3：部分浏览器移除元素时，绑定的事件并没有被及时移除，导致的内存泄漏，严重影响性能
4：大部分ajax局部刷新的，只是显示的数据，而操作却是大部分相同的，重复绑定，会导致代码的耦合性过大，严重影响后期的维护。
使用事件委托可以解决上述的4个痛点。
怎么做？
实际上很简单，每次捕捉到事件的时候都会获得一个 event对象，这个对象中有一个target属性，也就是我们本次产生交互的具体目标。
只要把这个e.target 的 nodeName 或者 class拿来做判断，得到一个我们想要的目标，才触发相应的事件，这就算完成了。
具体代码。
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>清汤挂面的草果游戏</title> | |
| <style> | |
| div{background: red;} | |
| ul{background: green;} | |
| li{background: blue;} | |
| p{background: gray;} | |
| </style> | |
| </head> | |
| <body> | |
| <div id="wjh"> | |
| <ul> | |
| <li> | |
| <p>233333</p> | |
| </li> | |
| <li> | |
| <p>233333</p> | |
| </li> | |
| </ul> | |
| </div> | |
| <script> | |
| document.getElementById("wjh").addEventListener("click", function(e){ | |
| // 兼容性处理 | |
| var event = e || window.event; | |
| var target = event.target || event.srcElement; | |
| if(e.target.nodeName == "P"){ | |
| console.log(23333); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |
浙公网安备 33010602011771号