元旦过后，新年第一篇。
初衷：很多的面试都会涉及到事件委托，前前后后也看过好多博文，写的都很不错，写的各有千秋，自己思前想后，为了以后自己的查看，也同时为现在找工作的前端小伙伴提供一个看似更全方位的解读事件委托的地方来认识了解他的原理，本篇文章汇总了两个版本的事件委托：javascript、jquery;
利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。
事件委托的优势：在js中添加到页面上的事件处理程序的个数直接影响到网页的运行性能。因为每个事件处理函数都是一个对象，是对象就会占用内存，而内存中对象越多，导致的结果就是性能越差；而访问dom的次数越多，就会引起结构的重绘或者重排的次数也随之增多，会延迟整个页面的交互就绪时间；
对于在页面进行处理过后新增的dom元素，运用事件委托可以为新增的dom元素一并增减事件处理程序；
在下面的代码中p标签要实现的效果是鼠标点击p标签的时候背景色变为红色，以下是js、jq的处理方法 <body> <div> <P>第一个p</P> <P>第二个p</P> <P>第三个p</P> <div> <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("p"); p.innerHTML = inner + "新增的p标签啊"; nodes.appendChild(p); addEvent();//将新dom元素增加到页面后再执行循环函数 console.log(ps); }; function addEvent() { for (let i = 0; i < ps.length; i++) { ps[i].onclick = function () { this.style.background = 'red' } } } addEvent() //先执行一遍循环
这时候浏览器中运行如图二所示:
这时候虽然解决了为新增dom元素增加事件处理函数的问题，但是仔细考虑他的性能却是比之前都有所下降，究其原因就是又增加了一个事件处理函数（对象），又一次占用了内存；所以，这个时候就会用但事件委托，这时候事件委托的优势也有所体现出来： 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); }; //事件委托，为nodes指定一个事件处理函数，处理nodes下为p标签的所有元素的cilck事件 nodes.onclick= function(e){ let ev = e || window.event let target = ev.target || ev.srcElement //srcElement IE浏览器 //这里要判被处理元素节点的名字，也可以增加相应的判断条件 target.nodeName.toLowerCase() == 'p'||target.nodeName.toLowerCase() == 'span',但是要注意不要使用父级元素的名称，因为再点击子元素之间的空气的时候，由于事件冒泡他会给父级元素也增加相应的事件处理函数；因为返回的节点名称一般都是大写，所以这时要用toLowerCase()处理一下； if(target.nodeName.toLowerCase() == 'p'){ target.style.background = 'green' } }
这时候浏览器中运行的结果如图三所示：
