JavaScript事件处理机制（捕获，目标，冒泡）

最新推荐文章于 2023-05-30 11:47:38 发布

扛狼1427

最新推荐文章于 2023-05-30 11:47:38 发布

阅读量641

点赞数

分类专栏： JavaScript 文章标签： JavaScript 事件处理机制冒泡捕获

本文链接：https://blog.csdn.net/weixin_42661283/article/details/95203052

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

事件处理机制的三个阶段（捕获阶段，目标阶段，冒泡阶段）

冒泡阶段：事件从内向外执行捕获阶段：事件从外向内执行；

addEventListener(type,fn,useCapture)
useCapture:事件处理机制（捕获阶段true，目标阶段，冒泡阶段false）默认为冒泡阶段
捕获阶段：事件从外向内执行; 冒泡阶段：事件从内向外执行

捕获情况：

    <style>
        #parent{
            height: 300px;
            width: 300px;
            background-color: red;
        }
        #son{
            height: 100px;
            width: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="son"></div>
    </div>
</body>
<script>
    document.getElementById('parent').addEventListener('click',function(e){
        console.log('是你爸爸')
    },true)
    document.getElementById('son').addEventListener('click',function(e){
        console.log('你儿子')
    },true)
</script>

冒泡情况：

    <style>
        #parent{
            height: 300px;
            width: 300px;
            background-color: red;
        }
        #son{
            height: 100px;
            width: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="son"></div>
    </div>
</body>
<script>
    document.getElementById('parent').addEventListener('click',function(e){
        console.log('是你爸爸')
    },false)
    document.getElementById('son').addEventListener('click',function(e){
        console.log('你儿子')
    },false)
</script>

阻止冒泡行为：

    <style>
        #parent{
            height: 300px;
            width: 300px;
            background-color: red;
        }
        #son{
            height: 100px;
            width: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="son"></div>
    </div>
</body>
<script>
    document.getElementById('parent').addEventListener('click',function(e){
        console.log('是你爸爸')
    },false)
    document.getElementById('son').addEventListener('click',function(e){
        console.log('你儿子')
        e.stopPropagation() // 阻止冒泡
    },false)
</script>

阻止冒泡行为的兼容性：

非 IE8及以下浏览器使用 e.stopPropagation()

IE8及以下浏览器使用 window.event.cancelBubble = true

扛狼1427

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JavaScript事件处理机制（捕获，目标，冒泡）

事件处理机制的三个阶段（捕获阶段，目标阶段，冒泡阶段）冒泡阶段：事件从内向外执行捕获阶段：事件从外向内执行； addEventListener(type,fn,useCapture) useCapture:事件处理机制（捕获阶段true，目标阶段，冒泡阶段false）默认为冒泡阶段捕获阶段：事件从外向内执行; 冒泡阶段：事件从内向外执行捕获情况： ...
复制链接

扫一扫