事件捕获方式和冒泡方式—它们的区别是什么?

最新推荐文章于 2024-07-22 15:13:59 发布

THER1881

最新推荐文章于 2024-07-22 15:13:59 发布

阅读量684

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/thwr1881/article/details/125451590

版权

事件冒泡、捕获：事件冒泡和事件捕获分别由微软和网景公司提出，这两个概念都是为了解决页面中事件流（事件发生顺序）的问题。

1、事件冒泡

微软提出了名为事件冒泡的事件流。结构上（非视觉上）嵌套关系的元素，会存在冒泡的功能，即同一事件，自子元素冒泡向父元素。（自底向上）

那么接下来我们来验证一下：

<style>
    *{
        margin: 0;
        padding: 0;
    }
    div{
        width: 200px;
        height: 100px;
        background-color: red;
        text-align: center;
        line-height: 100px;
        cursor: pointer;
    }
</style>
<body>
    <div>点击</div>
    <script>
        let body = document.querySelector('body')
        let div = document.querySelector('div')
        body.addEventListener('click',function(){
            console.log('body')
        })
        div.addEventListener('click',function(){
            console.log('1')
        })
    </script>
</body>

在这里插入图片描述

2、事件捕获

结构上（非视觉上）嵌套关系的元素，会存在事件捕获的功能，即同一事件，自父元素捕获至子元素（事件源元素）。（自顶向下）（ie没有捕获事件）

那么接下来我们来验证一下：

<style>
    *{
        margin: 0;
        padding: 0;
    }
    div{
        width: 200px;
        height: 100px;
        background-color: red;
        text-align: center;
        line-height: 100px;
        cursor: pointer;
    }
</style>
<body>
    <div>点击</div>
    <script>
        let body = document.querySelector('body')
        let div = document.querySelector('div')
        body.addEventListener('click',function(){
            console.log('body')
        },ture)
        div.addEventListener('click',function(){
            console.log('1')
        },ture)
    </script>
</body>