Loading

事件触发的阶段与事件冒泡

事件触发的几个阶段

  • 捕获阶段：事件从根节点流向目标节点，途中流经各个DOM节点，在各个节点上触发捕获事件，直到达到目标节点。
  • 目标阶段：事件到达目标节点时，就到了目标阶段，事件在目标节点上被触发
  • 冒泡阶段：事件在目标节点上触发后，不会终止，一层层向上冒，回溯到根节点

为什么通常在冒泡阶段执行事件

兼容性更好，在IE8中没有捕获阶段

事件冒泡实例

<body>
    <ul id='list'>
        <li id='listItem' data-id='1'>
            <!-- 很多子节点,但不包含li -->
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
        </li>
    </ul>
</body>
<script>
    var list = document.getElementById("listItem")
    list.addEventListener('click',function(){
            console.log(list.getAttribute('data-id'))
        })
</script>
posted @ 2021-01-26 20:36  不吃苦瓜^  阅读(167)  评论(0)  编辑  收藏  举报