イベント伝播の知識

デモ：http://codepen.io/mo4_9/pen/LkqJZJ

最下層にdiv3のDOM構造

<div id="div1">#div1
  <div id="div2">#div2
    <div id="div3">#div3</div>
  </div>
</div>

var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
var div3 = document.getElementById('div3');

div1.addEventListener('click', () => {
  console.log('#div1.');
});
div2.addEventListener('click', () => {
  console.log('#div2. stopPropagation()してない');
});
div3.addEventListener('click', e => {
  console.log('#div3. stopPropagation()してる');
  e.stopPropagation(); // イベントの伝播を止める
});

イベント伝播の3フェーズ

海に潜って浮上してくるイメージ

1.capture phase

上層から下層へイベントを伝播させていく

window -> document -> ... -> div3

2.target phase

イベントターゲット＝もっとも下層にある要素 に到達

div3

3.bubbling phase

下層から上層へイベントを評価していく

div3 -> div2 -> ... window

useCapture

addEventListener()の第三引数
capture phaseでイベントを評価するかどうかの設定

false

bubbling phase（フェーズ3）でイベントが評価される（＝イベント発火が遅い）

div3 -> div2 -> div1

これがデフォルト

true

capture phase（フェーズ1）でイベントが評価される（＝イベント発火が早い）

div1.addEventListener('click', () => {
    // ...
}, true);

なら div1 -> div3 -> div2 になる

e.stopPropagation();

capture phaseでイベント伝播を止める

参考
JavaScript再入門
UI Events W3C Working Draft, 26 July 2016