浅谈js中的事件冒泡和事件捕获

浅谈js中的事件冒泡和事件捕获

一、事件冒泡

定义：事件从事件目标开始，逐级往上冒泡，直到最上级。

举个例子来讲：页面中存在多个div嵌套，当在所有的div上都加上点击事件时，点击子级div时会依次向上触发父级的点击事件

<div class="div1" onclick="alert('111')">
     <div class="div2" onclick="alert('222')">
         <div class="div3" onclick="alert('333')"></div>
     </div>
 </div>

当点击div3时，会依次弹出333、222、111。
在具体的项目开发中，事件冒泡有时可能会带来一些问题，我们举例来看一下：
页面存在新增按钮，点击新增需要出现半透明弹出层，弹出层中间是内容，如图：

<div class="opacityWrapper">
    <div class="innerWrapper"></div>
</div>

现在需要点击半透明区域关闭弹层,通常我们实现的方式是给“opacityWrapper”这个div加上点击事件，让弹层隐藏，但是这会带来一个问题，当我点击白色区域时，同样触发了“opacityWrapper”div的方法，使弹层隐藏，但这种情况并不是我们想要的。这就是事件冒泡带来的一些问题，此时，我们需要做点什么去阻止这个情况的发生。

阻止事件冒泡

1、event.stopPropagation()

事件处理过程中，阻止了事件冒泡，但不会阻击默认行为，例：

<div class="opacityWrapper" onclick="alert('111')">
    <a target="_blank" href="http://www.baidu.com" id="aaa">1111111111</a>
</div>

<script>
    window.onload = function(){
        const aaa = document.getElementById('aaa')
        aaa.onclick = function(event){
            event.stopPropagation()
        }
    }
</script>

当点击a链接时，不会弹出“111”，但是会跳转到百度页面。

2、return false

<script>
    window.onload = function(){
        const aaa = document.getElementById('aaa')
        aaa.onclick = function(){
            return false
        }
    }
</script>

原生js的return false只会阻止默认行为，并不会阻止事件冒泡，当点击a链接时，会发现页面并不会跳转，但是父级div的点击事件还是触发。
而用jQuery的话则既阻止默认行为又防止对象冒泡。

<script>
	$("#aaa").on("click",function(){
		return false
	})
</script>

3、event.preventDefault()

preventDefault的作用是取消一个目标元素的默认行为。既然是说默认行为，那么元素必须有默认行为才能被取消，如果元素本身就没有默认行为，调用当然就无效了。什么元素有默认行为呢？如a链接，提交按钮等。当Event 对象的 cancelable为false时，表示没有默认行为，这时即使有默认行为，调用preventDefault也是不会起作用的。

vue中如何阻止事件冒泡

只需在目标元素的点击事件上加上stop就可以了

<div class="opacityWrapper" @click="clickEvent">
    <div class="innerWrapper" @click.stop></div>
</div>

react中如何阻止事件冒泡

在目标元素的点击事件上加入e.stopPropagation()

<div onClick={()=>alert('111')}>
    <div onClick={e=>e.stopPropagation()}></div>
</div>

二、事件捕获

定义：事件从最上一级标签开始往下查找，直到捕获到事件目标(target)。

<script>
    window.onload = function () {
        const opacityWrapper = document.getElementById('opacityWrapper')
        const innerWrapper = document.getElementById('innerWrapper')
        opacityWrapper.addEventListener('click',function(){
            alert('111')
        },true)
        innerWrapper.addEventListener('click',function(){
            alert('222')
        },true)
    }
</script>

<div id="opacityWrapper">
    <div id="innerWrapper"></div>
</div>

点击“innerWrapper”div时，会先弹出111，然后弹出222.

结论：绑定事件时通过addEventListener函数，它有三个参数，第三个参数若是true，则表示采用事件捕获，若是false，则表示采用事件冒泡。