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

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
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值