孤独プログラマー譚

孤独死が近い。

JavaScript バブリングの活用

例えば、以下のようなHTMLがあるとする。

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  ... x 1000 !
</ul>

<li>をクリックした時のイベントハンドラを登録したいとする。

jQueryで普通に書くとこうなる。

$('li').on('click', function () {
  console.log(this.textContent);
});

(19ms)

ピュアJSで書くとこうなる。

var liArray = document.querySelectorAll('li');
for (var i = 0; i < liArray.length; i++) {
  liArray[i].addEventListener('click', function () {
    console.log(this.textContent);
  });
}

(17ms)

この場合、1000個の<li>にイベントハンドラが登録される。

1000個に登録なんて…、色々と効率が悪い気がする。(多分)

そこで、バブリングを利用して、同様の機能を実現する。

親ノードの<ul>にイベントハンドラを登録する。

var ul = document.querySelector('ul');
ul.addEventListener('click', function (event) {
  event.stopPropagation();
  console.log(event.target.textContent);
}, true);

(0.04ms)

addEventListenerの第3引数にtrueを設定することで、イベントが発火されたノード<li>をすっ飛ばして、<ul>が発火される。

stopPropagation() とすることで、そこで処理は終了。<li>のイベントは発火されない。

後々、DOM操作で<li>が追加されても、<li>にイベントハンドラを登録し直す必要は無い。

バブリング最高や!