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>にイベントハンドラを登録し直す必要は無い。
バブリング最高や!