js事件冒泡

最新推荐文章于 2025-09-27 22:27:15 发布

原创最新推荐文章于 2025-09-27 22:27:15 发布 · 303 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

15 篇文章

订阅专栏

本文通过一个简单的HTML示例详细介绍了事件冒泡机制的工作原理。当一个子元素被点击时，不仅该元素上的事件监听器会被触发，其父级元素上的事件监听器也会依次被触发。这种机制使得开发者可以在不同层级的DOM节点上设置事件处理函数，从而实现更加灵活的交互逻辑。

事件冒泡：事件发生时，事件发生的元素的祖先元素也可以被触发该事件

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul>
        <li>li的内容 <span>span内容</span></li>
    </ul>
    <script>
        var ul = document.getElementsByTagName('ul')[0];
        var li = document.getElementsByTagName('li')[0];
        var span = document.getElementsByTagName('span')[0];
        span.onclick = function () {
            console.log('触发span的点击事件！');
            /*触发span的点击事件！
            触发li的点击事件！
            触发ul的点击事件！*/
        };
        li.onclick = function () {
            console.log('触发li的点击事件！');
            /*触发li的点击事件！
             触发ul的点击事件！*/
        };
        ul.onclick = function () {
            console.log('触发ul的点击事件！');
//            触发ul的点击事件！
        }
    </script>
</body>
</html>