事件代理(事件委托)

事件流

事件从页面中接收事件的顺序


4092152-e8abec3b8f60b47c.png
image.png

事件捕获

从window对象传到目标节点(上层到下层),成为捕获阶段

事件冒泡

从目标节点传到window对象(下层到上层)

事件代理(事件委托)

原理:利用冒泡机制把所需要相应的事件绑定到外层
实现:

<body>
    <ul id="list">
        <li>1111111</li>
        <li>22222222</li>
        <li>43333</li>
    </ul>
    <script>
        document.getElementById('list').addEventListener('click', function (e) {
          // e.target IE8就有这个属性,所以IE8以上不需要写兼容
            if (e.target && e.target.nodeName.toUpperCase() === 'LI') {
                console.log(e.target)
            }
        })
    </script>
</body>
4092152-b6fefc29e7ed2ecf.png
IE8打印出来的event.png

转载于:https://www.jianshu.com/p/724517ef0156

猜你喜欢

转载自blog.csdn.net/weixin_34032792/article/details/91051959