事件冒泡和事件委派

最新推荐文章于 2024-09-21 11:29:05 发布

那只猫喝咖啡

最新推荐文章于 2024-09-21 11:29:05 发布

阅读量129

点赞数

分类专栏： JavaScript 文章标签：前端 html

本文链接：https://blog.csdn.net/guhanfengdu/article/details/126681229

版权

JavaScript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

准备工作：

事件冒泡：

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

例子：点击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博客_路由跳转事件