JavaScript 事件冒泡与事件委托

时间 2019-11-10

原文原文链接

事件冒泡

IE的事件流叫作事件冒泡。顾名思义当事件发生后，事件就开始从里向外传播，查看下方代码：html

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <div id="myDiv"></div>
    </body>
</html>

若是点击页面中的 <div> 元素，那么这个 chick 事件就会按照以下顺序传播：dom

click 事件在直系DOM 树的每一级节点都会发生（自下而上），直到 document 对象。spa

事件委托

又称事件代理。对“事件处理程序过多”问题的解决方案就是事件委托。事件委托利用了事件冒泡，只指定一个父类事件处理程序，就能够管理某一类型的全部子类元素事件。代理

<ul id="myList">
    <li id="goSth"></li>
    <li id="doSth"></li>
    <li id="sayHi"></li>
</ul>

三个<li> 被单击，按照传统方式，会给他们单独添加事件：code

document.getElementById('sayHi').onClick(function(){...})

点击事件很少的状况下还好，如果全部元素都采用这样的方式，结果就会有数不清的代码用于添加事件处理。就比如一万我的全挤到公司前台去拿快递，那场面，蔚为壮观啊！可是把快递放到前台，前台接收，而后分批次派送，就会舒服不少：htm

document.getElementById('myList').onClick(function(ev){
        var e = ev || window.event;
        var target = e.target;
        switch (target.id) {
            case 'goSth':
                ...
                break;
            case 'doSth':
                ...
                break;
            ...
        }
    })

上面是用事件委托的方式，子元素是带有事件效果的，咱们能够发现，当用事件委托的时候，根本就不须要去遍历元素的子节点，只须要给父级元素添加事件就行了，子元素点击，会经过以事件冒泡的方式激活父元素已添加的相同事件，减小了不少 js 对于 dom 的事件操做，占用更少的内存，这大概是事件委托的精髓所在。对象

全部用到按钮的事件（多数鼠标和键盘事件）都适合采用事件委托。blog