事件冒泡和事件委派

准备工作:


事件冒泡:

        事件向上的传到,后代被触发,祖先也会触发

        例子:点击h2  发现box 和 body都被触发了

可复制下方代码证明例子的结论:

  <style>
        #box{
            width: 300px;
            height: 300px;
            background-color: #bfa
        }
        h2{
            background-color: red
        }
    </style>

    

<body>
    <div id="box">
        我是box <br>
        <h2>我是h2</h2>
    </div>
    我是box外的body
    <script>
    var box=document.getElementById('box')
    var h2=document.querySelector('h2')
  
    box.onclick=function(){
        alert("我是box")
    }
    h2.onclick=function(){
        alert('我是h2')
    }
    document.body.onclick=function(){
        alert('我是box外的body')
    }
    </script>
</body>

 如何取消事件冒泡?

这里要用到事件对象(event对象_百度百科

 box.onclick=function(event){
        event.cancelBubble=true;
        alert("我是box")
    }

其他的还是一样,只是取消了box的向上传导(body的弹窗不会出现),点击h2依然存在冒泡,按需加入event.cancelBubble=true;不过一般不常用,常用的是事件委派


事件委派

事件委派的作用就是,我想为每个li都添加点击事件,一个一个添加太麻烦了,如果在项目实战中li的个数还不确定,这个时候就可以利用事件委派,那怎么区分自己点的是哪个呢?

 还是利用了事件对象来区分,下方有 关于事件委派配合vue的实战链接

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
    <script>
    var ul=document.querySelector('ul')
    ul.onclick=function(event){
        console.log(event.target.innerHTML) }
    </script>
</body>



三级路由跳转之利用事件委派_那只猫喝咖啡的博客-CSDN博客_路由跳转事件

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值