参考链接:https://baike.baidu.com/item/%E4%BA%8B%E4%BB%B6%E5%86%92%E6%B3%A1/4211429
当事件发生后,这个事件就要开始传播(从里到外或者从外向里)。为什么要传播呢?因为事件源本身(可能)并没有处理事件的能力,即处理事件的函数(方法)并未绑定在该事件源上。例如我们点击一个按钮时,就会产生一个click事件,但这个按钮本身可能不能处理这个事件,事件必须从这个按钮传播出去,从而到达能够处理这个事件的代码中(例如我们给按钮的onclick属性赋一个函数的名字,就是让这个函数去处理该按钮的click事件),或者按钮的父级绑定有事件函数,当该点击事件发生在按钮上,按钮本身并无处理事件函数,则传播到父级去处理。
什么是事件冒泡
编辑
页面上有好多事件,也可以多个元素响应一个事件.假如:
1
2
3
4
5
6
7
上面这段代码一共有三个事件,body,div,a都分别绑定了单击事件。在页面中当单击a标签会连续弹出3个提示框。这就是事件冒泡引起的现象。事件冒 泡的过程是:a --> div --> body 。a冒泡到div冒泡到body。
事件冒泡引发的问题
编辑
本来在上面的代码中只想触发元素的onclick事件,然而 stopPropagation阻止事件冒泡实现 编辑 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 var onBodyClickFn = function() { alert("我是body上事件"); } window.onload = function() { var body = document.body; body.addEventListener('click', onBodyClickFn, false); // false 冒泡阶段 //停止事件冒泡 document.getElementById("stopBubble").addEventListener("click", function(event) { alert("我是stopBubble_btn上事件"); event.stopPropagation(); }, false); //正常事件冒泡 document.getElementById("bubble").addEventListener("click", function() { alert("我是bubble_btn上事件"); }, false); }; < /script>