JavaScript 事件冒泡、事件捕获、事件委托

最新推荐文章于 2024-04-05 11:31:21 发布

奥特曼　

最新推荐文章于 2024-04-05 11:31:21 发布

阅读量830

点赞数 8

分类专栏： js 面试题文章标签： js JavaScript html

本文链接：https://blog.csdn.net/m0_46846526/article/details/119548982

版权

js 同时被 2 个专栏收录

41 篇文章 9 订阅

订阅专栏

面试题

36 篇文章 8 订阅

订阅专栏

结构

<style>
    .father {
        width: 500px;
        height: 500px;
        background: black;
    }

    .son {
        width: 250px;
        height: 250px;
        background: yellow;
    }
</style>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

效果

一、事件冒泡

  <script>
        let father = document.querySelector('.father')
        let son = document.querySelector('.son')
        father.addEventListener('click',()=>{
            console.log('father');
        })
        son.addEventListener('click',(e)=>{
            console.log('son');
        })
    </script>

父盒子和子盒子是嵌套关系当点击子盒子和父盒子共同的部分时，就会产生一种现象叫作事件冒泡，分别给父子盒子注册事件后打印输出结果

发现点击子盒子时父盒子的事件也触发了，为什么叫冒泡呢因为子盒子在父盒子里面是从里向外冒出来的，所以称为冒泡。

阻止冒泡

通过事件参数e.stopPropagation方法达到阻止冒泡的效果

 son.addEventListener('click',(e)=>{
            e.stopPropagation()
            console.log('son');
        })

如果是vue

<button @click.stop="hClick"></button>

二、事件捕获

事件捕获只能通过addEventListener 的第三个参数去实现，如果不写则为false，如果为ture则是开启了事件捕获，通过下面的代码继续点击相同的部分。

        let father = document.querySelector('.father')
        let son = document.querySelector('.son')
        father.addEventListener('click',()=>{
            console.log('father');
        },true)
        son.addEventListener('click',(e)=>{
            console.log('son');
        })

捕获正好和冒泡相反，是从外向里传递事件，注意onclick并不能达到事件捕获的效果，只有addEventListener 的第三个参数手动去实现。

三、事件委托

事件委托本质上发生在事件中，委托事情交给被人去做,达到自己做的一个目的，如果一个元素是动态创建的且要给该元素注册事件，那么必须使用委托，给ul注册点击事件 e.target拿到的是每个li

<body>
    <ul>
        <li>第1个li</li>
        <li>第2个li</li>
        <li>第3个li</li>
        <li>第4个li</li>
    </ul>
    <script>

        // 事件捕获
        let ul = document.querySelector('ul');
        ul.addEventListener('click', function (e) {
            console.log(e.target.innerText);
        })
    </script>
</body>

奥特曼　

关注

8
点赞
踩
10

收藏

觉得还不错? 一键收藏
5
评论
JavaScript 事件冒泡、事件捕获、事件委托

结构<style> .father { width: 500px; height: 500px; background: black; } .son { width: 250px; height: 250px; background: yellow; }</style><body> <div class="father
复制链接

扫一扫