参考链接：https://segmentfault.com/a/1190000006667581
当在点击一个按钮时，实际上点击了按钮区域、body区域和html区域。

js的dom事件流

三个阶段
1、捕获
2、处于目标阶段
3、冒泡

事件冒泡

  • 认为事件触发的最深层元素首先接收事件，然后是它的父元素，一次向上。最后到达body、html、document.

  • 即事件冒泡就是事件触发时，会从目标DOM元素向上传播，直到文档根节点，一般情况下，会是如下形式传播：
    targetDOM → parentNode → ... → body → document → window

  • 如果想使用冒泡机制，就在addEventListener('click',function(evt){
    alert('button clicked');
    },false);这种监听函数里设置第三个参数为false。
    此时点击这个元素，会依次触发各级的click。

  • 但当我们想要让事件独立触发时，必须阻止冒泡，要使用event的stopPropagation()方法

    <button id="btn">ClickMe</button>
/* js */
// 给按钮增加click监听
document.getElementById('btn').addEventListener('click',function(evt){
  alert('button clicked');
  evt.stopPropagation(); //阻止事件冒泡
},false);
// 给body增加click监听
document.body.addEventListener('click',function(evt){
  alert('body clicked');
},false);

    点击按钮后，只会触发按钮本身的click事件，得到一个alert效果；该按钮的点击事件，不会向上传播，body节点就接收不到此次事件命令。

  • 注意注意！
    不是所有的事件都能冒泡，如blur、focus、load、unload就不能
    在ie中要使用event.cancelBubble=true来阻止冒泡

事件捕获

与事件冒泡相反，由外向内触发事件