美文网首页
事件代理(事件委托)

事件代理(事件委托)

作者: 南蓝NL | 来源:发表于2019-06-05 22:58 被阅读0次

    事件流

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


    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>
    
    IE8打印出来的event.png

    相关文章

      网友评论

          本文标题:事件代理(事件委托)

          本文链接:https://www.haomeiwen.com/subject/pfrexctx.html