5.事件的传播机制

上一篇:事件的默认行为及阻止

---

事件的传播机制

• 事例 点击inner

          #outer{
              position: absolute;
              top: 30px;
              left: 30px;
              width: 200px;
              height: 200px;
              background:red;
              cursor: pointer;
          }
          #inner{
              position: absolute;
              top: 30px;
              left: 30px;
              width: 100px;
              height: 100px;
              background: #000000;
              cursor: pointer;
          }
      
  

  <div id="outer">
      <div id="inner"></div>
  </div>
  

    document.onclick=function () {
          console.log("window");
      }
      document.documentElement.onclick=function () {
          console.log("html");
      }
      document.body.onclick=function () {
          console.log("body");
      }
      outer.onclick=function () {
          console.log("outer");
      }
      inner.onclick=function () {
          console.log("inner");
      }
  /*冒泡传播：
      *   触发当前元素的某一个事件（点击事件）行为不仅当前元素事件行为触发，而且其祖先元素的相关事件行为也会一次触发，这种机制就是“事件的冒泡传播机制”*/
  

  • 控制台输出
    • 1569481013152.png

第一阶段：捕获阶段

点击inner的时候，首先会从最外层开始向内查找（找到操作的事件源），查找的目的是，构建出冒泡传播阶段需要传播的路线（查找就是按照HTML层级结构找的）

1569479368858.png

第二阶段： 目标阶段

把事件源的相关操作行为触发（如果绑定了方法付，则把方法执行）

1569479584813.png

第三阶段： 冒泡传播

按照捕获阶段规划的路线，自内而外，把当前事件源的祖先元素的相关事件行为依次触发

1569480632949.png

以上XXX.onXXX=function(){}，都是DOM0级事件绑定，给元素事件行为绑定方法，这些都是在当前元事件行为的冒泡阶段（或目标阶段）执行的。

XXX.addEncentListenr(‘xxx’,function(){},false),DOM2级之间绑定，第三个参数FALSE也是控制绑定的方法在冒泡阶段（或目标阶段）执行；只有第三个参数为TRUE时才代表让当前方法在事件传播的捕获阶段触发执行（捕获阶段执行一般不用）。

    document.onclick=function (ev) {
        console.log(ev)
        console.log("window");
    }
    document.documentElement.onclick=function (ve) {
         console.log(ev)
        console.log("html");
    }
    document.body.onclick=function (ev) {
         console.log(ev)
        console.log("body");
    }
    outer.onclick=function (ev) {
         console.log(ev)
        console.log("outer");
    }
    inner.onclick=function (ev) {
         console.log(ev)
        console.log("inner");
    }

控制台输出g

• 关于事件对象的一些理解
  1. 事件对象是用来存储当前本次操作的相关信息，和操作无关，和元素无必然关系，
  2. 但我们基于鼠标或者键盘等操作的时候，浏览器会把本次操作的信息存储起来（标准浏览器存储到默认的内存中，IE低版本存储到window.event中），存储的值是一个对象（堆内存），操作肯定会触发当前元素的某个行为，也就会绑定的方法执行，此时标准浏览器会把当前存储的对象当做实参传递给执行的方法，所以操作一次，即使再多方法中都有ev,但存储的都是一个一个