somemo's diary

プログラマ、雑記、プログラミング関係はLinkから、数式はこっちでまとめていることが多い

【Javascript】親要素へのイベントの伝播

タイトルは、イベントバブリングと呼ばれているJavascriptの現象についてです。

イベントバブリング

子要素で発生したイベントを親要素が持っているとき、親要素でもそのイベントが実行されます。親を上と見ているので、イベントが泡のように上るため名づけられているようです。毎回Javascriptエンジンで同じイベントを持っているかを調べている感じですね。

動作確認

以下、サンプルです。

window.addEventListener('load', function() {
  var div = document.createElement('div');
  div.id = 'div';
  div.innerHTML = div.id;

  var span = document.createElement('span');
  span.id = 'span';
  span.innerHTML = '[' + span.id + ']';

  div.appendChild(span);
  document.body.appendChild(div);

  document.addEventListener('click', function() {
    alert('document');
  });

  div.addEventListener('click', function() {
    alert(this.id)
  }, true);

  span.addEventListener('click', function() {
    alert(this.id)
  }, false);
});

まず、widowのロード時に実行するようにしています。bodyにdiv、divにspanを追加しています。追加した要素とdocumentにクリック時のイベントを設定しています。各要素をクリックしたときの動作は以下のようになります。

要素動作
documentアラート「document」が表示される
divアラートが「div、document」の順に表示される
spanアラートが「div、span、document」の順に表示される

3つともクリックイベントが設定されているので、子要素をクリックすると親要素のイベントが実行されました。spanクリック時に2つ実行されることからも、親の親と順々に実行されることが分かります。spanより、divが先に表示されるのは、リスナー設定時にdivのイベントを優先するように第三引数で設定したからです。

余談ですが、bodyではなく、windowに設定するほうがいいようです。

参考