對javascript事件的深度理解

時間 2019-11-07

原文原文鏈接

事件流

事件流是描述對頁面接受事件的順序，IE和Netscape提出了徹底相反的事件流模型，描述的是從頁面中接收事件的順序,也可理解爲事件在頁面中傳播的順序。html

咱們經過日常使用知道addEventListener最後的參數是切換句柄的，當這個布爾值爲true時，表示在捕獲階段調用事件處理程序；若果是false，表示在冒泡階段調用事件處理程序。函數

MDN：useCapture 可選（）
Boolean，是指在DOM樹中，註冊了該listener的元素，是否會先於它下方的任何事件目標，接收到該事件。沿着DOM樹向上冒泡的事件不會觸發被指定爲use capture（也就是設爲true）的listener。當一個元素嵌套了另外一個元素，兩個元素都對同一個事件註冊了一個處理函數時，所發生的事件冒泡和事件捕獲是兩種不一樣的事件傳播方式。事件傳播模式決定了元素以哪一個順序接收事件。ui

Once the propagation path has been determined, the event object passes through one or more event phases. There are three event phases: capture phase, target phase and bubble phase. Event objects complete these phases as described below. A phase will be skipped if it is not supported, or if the event object’s propagation has been stopped. For example, if the bubbles attribute is set to false, the bubble phase will be skipped, and if stopPropagation() has been called prior to the dispatch, all phases will be skipped.this

The capture phase: The event object propagates through the target’s ancestors from the Window to the target’s parent. This phase is also known as the capturing phase.spa

The target phase: The event object arrives at the event object’s event target. This phase is also known as the at-target phase. If the event type indicates that the event doesn’t bubble, then the event object will halt after completion of this phase.code

The bubble phase: The event object propagates through the target’s ancestors in reverse order, starting with the target’s parent and ending with the Window. This phase is also known as the bubbling phase.htm

爲何要使用 addEventListener?

addEventListener 是 W3C DOM 規範中提供的註冊事件監聽器的方法。它的優勢包括：three

它容許給一個事件註冊多個 listener。當存在其餘的庫時，使用 DHTML 庫或者 Mozilla extensions 不會出現問題。事件
它提供了一種更精細的手段控制 listener 的觸發階段。（便可以選擇捕獲或者冒泡）。ip
它對任何 DOM 元素都是有效的，而不單單隻對 HTML 元素有效。

事件冒泡

IE的事件流叫事件冒泡，逐級向上傳播

<html>
    <body>
        <div>
        </div>
    </body>
</html>

點擊div以後，順序是div -> body -> html

事件捕獲

Netscape事件捕獲是與冒泡相反的

DOM事件流

DOM規定的事件流包括三個階段

捕獲階段
目標階段
冒泡階段

事件捕獲階段，爲截獲事件提供機會，而後是實際的目標接受事件，最後是事件冒泡階段

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
  #wrap {
    width: 200px;
    height: 200px;
    background: orange;
  }
  #outer {
    position: relative;
    top: 50px;
    left: 50px;
    width: 100px;
    height: 100px;
    background: #eeddff;
  }
  #inner {
    position: relative;
    top: 25px;
    left:25px;
    width: 50px;
    height: 50px;
    background: #44ddff;
  }

  </style>
</head>
<body>
  <div id="wrap">
    <div id="outer">
      <div id="inner"></div>
    </div>
  </div>
  <script>
    var wrap = document.getElementById('wrap');
    var outet = document.getElementById('outer');
    var inner = document.getElementById('inner');

    wrap.addEventListener('click',function(){
      alert('789');
    },false);
    outer.addEventListener('click',function(){
      alert('456');
    },false);
    inner.addEventListener('click',function(){
      alert('123');
    },false);
    wrap.addEventListener('click',function(){
      alert('wrap');
    },true);
    outer.addEventListener('click',function(){
      alert('outer');
    },true);
    inner.addEventListener('click',function(){
      alert('inner');
    },true);
  </script>
</body>
</html>