18-事件执行的三个阶段

• 1.事件的三个阶段

  • 1.1 捕获阶段(从外向内的传递事件)
  • 1.2 当前目标阶段
  • 1.3 冒泡的阶段(从内向外的传递事件)

• 2. 注意点:

  • 三个阶段只有两个会被同时执行
  • 要么捕获和当前, 要么当前和冒泡

• 3. 为什么要么只能是捕获和当前, 要么只能是当前和冒泡?

  • 这是JS处理事件的历史问题
  • 早期各大浏览器厂商为占领市场, 以及对事件的理解不同
  • 后续W3C为了兼容, 将两种方式都纳入标准
    
    

• 如何设置事件到底是捕获还是冒泡?

  • 通过 addEventListener 方法, 这个方法接收三个参数
  • 第一个参数: 事件的名称
  • 第二个参数: 回调函数
  • 第三个参数: false 冒泡 / true 捕获

    let oFDiv = document.querySelector(".father");
    let oSDiv = document.querySelector(".son");
  
    // 捕获
    oFDiv.addEventListener("click", function () {
        console.log("father");  // 先执行father
    }, true);
    oSDiv.addEventListener("click", function () {
        console.log("son");  // 后执行son
    }, true);
  
    // 冒泡
    oFDiv.addEventListener("click", function () {
        console.log("father");  // 后执行father
    }, false);
    oSDiv.addEventListener("click", function () {
        console.log("son");  // 先执行son
    }, false);
  

• 注意点:

  • onXxx的属性, 不接收任何参数, 所以默认就是冒泡
  • attachEvent 方法, 只能接收两个参数, 所以默认就是冒泡
  • 如果想看到捕获只能通过 addEventListener 方法

    let oFDiv = document.querySelector(".father");
    let oSDiv = document.querySelector(".son");
  
    // 冒泡
    oFDiv.onclick = function () {
        console.log("father");  // 后执行father
    };
    oSDiv.onclick = function () {
        console.log("son");  // 先执行son
    }
  

IE 6.0:
div -> body -> html -> document
其他浏览器:
div -> body -> html -> document -> window

注意：
不是所有的事件都能冒泡，以下事件不冒泡：blur、focus、load、unload