元旦过后，新年第一篇。
初衷：很多的面试都会涉及到事件委托，前前后后也看过好多博文，写的都很不错，写的各有千秋，自己思前想后，为了以后自己的查看，也同时为现在找工作的前端小伙伴提供一个看似更全方位的解读事件委托的地方来认识了解他的原理，本篇文章汇总了两个版本的事件委托：javascript、jquery;
事件委托的定义:
利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。
事件委托的优势：
- 在js中添加到页面上的事件处理程序的个数直接影响到网页的运行性能。因为每个事件处理函数都是一个对象，是对象就会占用内存，而内存中对象越多，导致的结果就是性能越差；而访问dom的次数越多，就会引起结构的重绘或者重排的次数也随之增多，会延迟整个页面的交互就绪时间；
-
对于在页面进行处理过后新增的dom元素，运用事件委托可以为新增的dom元素一并增减事件处理程序；
在下面的代码中p标签要实现的效果是鼠标点击p标签的时候背景色变为红色，以下是js、jq的处理方法
<body> <div id="nodes"> <P class="node_p">第一个p</P> <P class="node_p">第二个p</P> <P class="node_p">第三个p</P> <div id="childDiv"> <p>这是子集菜单</p> <div>我是子集的div <p>我是子集的p</p> </div> </div> </div> <button>点击加一</button> </body>一、js事件委托
在js中不用事件委托的情况：获取页面中所有的p标签然后用for循环遍历给每一个元素增加事件处理函数
let nodes = document.getElementById("nodes"); let ps = document.getElementsByTagName("p"); console.log(ps); let btn = document.getElementsByTagName("button")[0]; let inner = 33; btn.onclick = function() { inner++; let p = document.createElement("p"); p.innerHTML = inner + "新增的p标签啊"; nodes.appendChild(p); console.log(ps); }; for (let i= 0;i<ps.length;i++){ ps[i].onclick= function(){ this.style.background = 'red' } }这时候在浏览器中运行之后进行测试，发现如图一所示的结果；
那么js不用事件委托怎么给新增加的标签添加事件处理函数呢？解决方案如下：
let nodes = document.getElementById("nodes"); let ps = document.getElementsByTagName("p"); console.log(ps); let btn = document.getElementsByTagName("button")[0]; let inner = 33; btn.onclick = function () { inner++; let p = document.createElement(
