标签（空格分隔）： 事件委托 冒泡 性能优化

序：

开启本文前，首先有几点要说明一下。
问题
1:添加到文档上的事件处理程序越多，页面整体运行性能越低。
2：每个函数都是对象，都要占内存，内存中的对象越多，性能越差，跑不动
3：页面一加载上来要事先指定DOM的事件处理程序，导致访问DOM的次数，进而延迟了整个文档的交互就绪时间。
所以：从以上的角度考虑：
解决
1》避免向页面中DOM添加大量的事件处理程序，限制了DOM和js建立连接的数量。利用委托，只是给某个祖级指定一个事件处理程序，来管理某一类的所有事件。例如：管理所有的点击。
2》对于即将移除的DOM，要手动移除其身上的事件处理程序。有些浏览器不会做只能处理释放掉，比如：通过innerHTML方式替换掉的元素。

方案一：利用委托

论证上边写的很清楚了，下面就是针对每个方案上一段代码吧。
HTML:

<div class="con">
    <button id="btn1">点击我变色</button>
    <p id="btn2">点击出弹窗</p>
    <h6 id="btn3">点击做跳转</h6></div>

CSS:

 .con {            background: rgba(0, 0, 0, .2);            border: 1px solid #ff9;
        }.btn1, .btn2, .btn3 {            width: 300px;            height: 50px;            border: 1px solid #000;            text-align: center;            line-height: 50px;            cursor: pointer;
}

目标：
点击3个元素走不同的事件处理程序。

分析：
3个元素共同的祖级是类名叫.con的元素。所以把事件执行程序与他建立联系即可。而不是传统的给每个元素绑定一次事件处理代码。

实现：
JS:

  window. = function () {//1:获取DOM
        var btn1 = document.querySelector('#btn1');        var btn2 = document.querySelector('#btn2');        var btn3 = document.querySelector('#btn3');        var con = document.querySelector('.con');//2:事件委托
        con.addEventListener('click', function (e) {            var e = e || event;            if (e.target.id == 'btn1') {                //换背景色
                con.style.background = '#80B3FF';
            }            if (e.target.id == 'btn2') {                //弹出目标的id
                alert(e.target.id);
            }            if (e.target.id == 'btn3') {                //做跳转
                window.location.href = 'https://macrolam.github.io/MK/';
            }

        }, true)
    }

===================================================
tip:
这里是通过事件对象的里的target对象里的id属性，当然这种在实际开发事使用较少，毕竟要给每个元素一个id，id甚是宝贵，不能乱来，所以，再看看通过其他方式选中你要操作的元素。普通元素还可以通过节点名（标签名），标签内容。表单元素还可以通过name属性，例如这里的button按钮。标签身上设置下name属性。js里根据这个属性去拿到对应DOM。

===================================================

通过其他方式拿到对应的DOM

1.标签名：

HTML：

<div class="con">
    <button>点击我变色</button>
    <p>点击出弹窗</p>
    <h6>点击做跳转</h6></div>

这里省略样式，和上边一致的。.con里的子只有标签名字。

JS：

   window. = function () {   
        var btn1 = document.querySelector('button');        var btn2 = document.querySelector('p');        var btn3 = document.querySelector('h6');        var con = document.querySelector('.con');


        con.addEventListener('click', function (e) {            var e = e || event;     
            if (e.target.nodeName.toLowerCase() == 'button') {                //换背景色
                con.style.background = '#80B3FF';
            }            if (e.target.nodeName.toLowerCase() == 'p') {                //弹出目标的id
                alert(e.target.nodeName);                //二者是一致的
                alert(e.srcElement.nodeName);
            }            if (e.target.nodeName.toLowerCase() == 'h6') {                //做跳转
                window.location.href = 'https://macrolam.github.io/MK/';
            }

        }, true)
    }

e.target.nodeName拿到的是大写的标签名字，所以需要转换成小写好处理些。toLowerCase()一下就OK了。

2.标签内容：

HTML：

<div class="con">
    <button>点击我变色</button>
    <p>点击出弹窗</p>
    <h6>点击做跳转</h6></div>

JS：

   window. = function () {        var con = document.querySelector('.con');

        con.addEventListener('click', function (e) {            var e = e || event;            if (e.target.innerHTML == '点击我变色') {                //换背景色
                con.style.background = '#80B3FF';
            }            if (e.target.innerHTML == '点击出弹窗') {                //弹出目标的id
                alert(e.target.nodeName);                //二者是一致的
                alert(e.srcElement.nodeName);
            }            if (e.target.innerHTML == '点击做跳转') {                //做跳转
                window.location.href = 'https://macrolam.github.io/MK/';
            }

        }, true)
    }

利用 e.target.innerHTML或者是e.target.innerText都可以。

3.表单标签的name属性：

如果是表单元素，还可以在表单元素上把name属性设置下。

HTML:

<div class="con">
    <button name="fromDomBtn">点击我变色</button>
    <p>点击出弹窗</p>
    <h6>点击做跳转</h6></div>

JS:这里只是写按钮部分了。

con.addEventListener('click', function (e) {            var e = e || event;            
            if (e.target.name == 'fromDomBtn') {                //换背景色
                con.style.background = '#80B3FF';
            }
    }

利用表单身上的属性name;即e.target.name

常规处理方式就是以上几种，可以根据你的代码选择合适的方案。

方案二：手动移除事件处理程序

如果心里清楚，哪些带有事件处理程序的元素将要被移除，那么最好手动置空他的事件处理程序，即切断了DOM和js之间的引用关系。如果直接对DOM进行增删改查中的“删”，即：removeChild()/replaceChild()等，是不需要咱们手动再置空他们身上原来的事件引用。因为前端的代码一般不需要我们进行内存管理、垃圾回收等操作，浏览器会帮我们做好。这里说的将要被移除是指通过innerHTML的方式替换达到删除的结果，此时就需要我们做点事了，因为一些浏览器不会很好的处理这一块，例如（IE）；下边用代码演示下具体怎么实现：

HTML:

<div class="con">
    <button>点击我发生con的内容替换</button></div>

JS:

  window. = function () {        var con = document.querySelector('.con');        var btn = document.querySelector('button');        
        const txt = ` <h1>Lorem ipsum dolor.</h1>
    <p> Error esse est illo impedit libero molestias, perspiciatis ratione repudiandae voluptate voluptatem!</p>`;



        btn. = function () {
            btn. = null;//点击进来后手动释放自身和事件处理程序的引用关系；用过一次就释放掉了
            con.innerHTML = txt;
        }
    }

把这段代码，复制到你的编译器试试吧，点击事件肯定只会执行一次。

js库实现委托

如果你不是使用原生js，使用jQuery或是zepto等怎么做呢？更简单。直接上代码。

HTML片段截取：

    ![](/gameInfo/images/ban.jpg)    <a href="###" class="loadBtn hrefTo"></a>
    <b class="clickDetail hrefTo">（点击了解详情）</b>

由于jQuery/zepto里自带的事件注册on方法只能接受3个参数，所以对于第二个参数DOM；要好好利用下了，把需要的做同一件事的dom都附属一个类名叫：hrefTo的。OK。

    //1:引入库
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/common/js/zepto.min.js"></script>
    //2:点击banner/了解详情/下载按钮三处实现跳转
    
    $('body').on('click','.hrefTo',function () {        window.location.href="https://www.baidu.com/";
    });

作者：麦壳儿UIandFE2
链接：https://www.jianshu.com/p/5bccc38b6671
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。