62-事件流

事件流

• 概念：当标签发生嵌套时，事件执行的顺序问题

• 冒泡：事件触发时,从子标签开始触发,然后父标签相继触发,直到最顶层window结束

  // Dom0级默认为冒泡触发
   document.querySelector("span").onclick = function(){    
      console.log("span被点击了");
    }
  
   document.querySelector("div").onclick = function(){ 
   console.log("div被点击了");
   }
  
  document.body.onclick = function () {    
  console.log("body被触发了");
  }
  
  document.documentElement.onclick = function () {   
  console.log("html被触发了");
  }
  
  document.onclick = function () {  
  console.log("document被触发了");
  }
  
  window.onclick = function () {    
  console.log("window被触发了");
  }
  

• 捕获：事件顺序从window开始,相继往下,直到触发事件的子标签截至。

  document.querySelector("span").addEventListener("click",function () { 
  console.log("span被点击了");
  },true)
  
  document.querySelector("div").addEventListener("click",function () { 
  console.log("div被点击了");
  },true)
  
  document.body.addEventListener("click",function () { 
  console.log("body被点击了");
  },true)
  
  document.documentElement.addEventListener("click",function () { 
  console.log("html被点击了");
  },true)
  
  document.addEventListener("click",function () {   
  console.log("document被点击了");
  },true)
  
  window.addEventListener("click",function () {   
  console.log("window被点击了");
  },true)
  

  • 注意：dom0级只有冒泡没有捕获，dom2级默认为冒泡，可以通过第三个参数设置是否在捕获阶段执行

    标签变量名.addEventListener("事件类型",函数名,是否在捕获阶段执行)
    

    • 是否在捕获阶段执行：值为布尔类型。

  • 当捕获和冒泡同时存在时，先执行捕获再执行冒泡

事件委托

• 概念：通过冒泡机制和event对象，将子标签上的事件委托给静态父标签上完成，可以减少页面当中事件处理的次数

• 优点：

  • 减少页面中事件处理程序的绑定次数
  • 绑定给静态父标签，那么该事件不会因为标签动态生成而重新绑定
  • 方便管理事件处理程序

event对象

• 属性：

  • target：获取当前触发的标签（用户实际点击的标签是谁）
  • currentTarget：获取事件处理节点的标签
  • pageX/PageY：获取鼠标点击的页面坐标
  • clientX/clientY：获取鼠标点击的页面视口坐标

• 方法：

  • stopPropagation()：阻止事件传播
  • preventDefault()：阻止标签的默认行为