DOM事件流的三个阶段

DOM事件流的三个阶段

1. js代码只能执行捕获和冒泡其中的一个阶段
2. onclick和attachEvent(ie)只能获得冒泡阶段
3. 捕获阶段 如果addEventListener 的第三个参数为true 那么处于捕获阶段：document >> html >> body >> father >> son html结构：

<div id="father">
<div id="son"></div>

css样式

#father {
      width: 300px;
      height: 300px;
      background-color: pink;
      box-sizing: border-box;
      padding: 50px;
      margin: 0 auto;
    }
    #son {
      width: 200px;
      height: 200px;
      background-color: skyblue;
    }

js：

var father = document.querySelector("#father");
     var son = document.querySelector("#son");
     son.addEventListener(
       "click",
       function () {
         alert("son");
       }, true
     );
     father.addEventListener(
       "click",
       function () {
         alert("father");
       }, true
     );   //加了true 先弹father再弹son，如果father不加true，只给son加true的话会先弹son再弹father

4. 冒泡阶段 如果addEventListener 的第三个参数为false或者省略 那么处于冒泡阶段：son >> father >> body >> html >> document

 var father = document.querySelector("#father");
    var son = document.querySelector("#son");
    son.addEventListener("click", function () {
      alert("son");
    });
    father.addEventListener("click", function () {
      alert("father");
    });