事件冒泡和阻止事件冒泡：
事件冒泡的原理：从实际操作的元素（事件）向上级父元素一级一级执行下去，直到达到document/window,冒泡过程结束。例如：假设我有一个 div 盒子，里面嵌套了1个子元素 p，我要给子元素 p 绑定了onclick事件，如果父元素也绑定了这个相同的事件，当触发子元素（p标签）事件的时候就会触发这个事件并进行冒泡向上传递，也就是父元素 div 也会触发这个事件，父元素的相同事件也会一级一级根据嵌套关系向外触发，直到document/window，冒泡过程结束。下面我用具体的实例来说明一下下，为了大家更方便的看到这个效果，我在标签上添加了一些样式，下面是我的代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #box { width: 200px; height: 200px; background-color: pink; } #box1 { width: 100px; height: 100px; margin: 0 auto; background-color: purple; } </style> </head> <body> <div id="box"> 我是box盒子 <p id="box1">我是 p 标签</p> </div> </body> </html> <script> /* 事件冒泡原理 向上传递 当后代元素被触发后 其祖先元素也会会触发相同事件 */ var box = document.getElementById('box'); var box1 = document.getElementById('box1'); box1.onclick = function() { alert(`我是 p 绑定的事件`); } box.onclick = function() { alert(`我是 div 绑定的事件`); } </script>
在谷歌浏览器中打开后的效果是这样的
当鼠标点击 p 标签这个盒子的时候，它会触发自己绑定的onclick事件,并且当这个事件结束之后又会触发 div 标签的点击事件，这时就发生了事件冒泡的现象。
如何阻止事件冒泡：只需要给冒泡元素函数对象添加一个隐式参数 e 再调用 stopPropagation();这个方法即可阻止事件冒泡。下面是具体代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #box { width: 200px; height: 200px; background-color: pink; } #box1 { width: 100px; height: 100px; margin: 0 auto; background-color: purple; } </style> </head> <body> <div id="box"> 我是box盒子 <p id="box1">我是 p 标签</p> </div> </body> </html> <script> /* 事件冒泡原理 向上传递 当后代元素被触发后 其祖先元素也会会触发相同事件 */ var box = document.getElementById('box'); var box1 = document.getElementById('box1'); // 阻止事件冒泡 必须要传一个隐式参数 e box1.onclick = function(e) { // 阻止冒泡 e.stopPropagation(); alert(`我是 p 绑定的事件`); } box.onclick = function() { alert(`我是 div 绑定的事件`); } </script>