JavaScript
WebAPI
dom

jQuery Event Delegation の代替えを考える

More than 3 years have passed since last update.


jQuery Event Delegationとは?

$('body').on('click', 'button', handleButtonClicks)

function handleButtonClicks(event) {
console.log(event.target.id, 'button clicked!')
}

みたいなやつです。

動くサンプル

親要素へのイベントハンドラで、子要素のイベントが拾えます。


何が嬉しいのか?

例えば、Todoリストのdoneチェックボックスを考えてみましょう。


DOM要素それぞれにイベントハンドラを設定すると

Todoの項目を追加して、DOM要素を増やすと

DOM要素を増やすたびにイベントハンドラを設定します。


Event Delegationを使うと

最初に一回だけ親要素にイベントハンドラを設定します。

子要素が増えても同じイベントハンドラで対応します。

詳しいことはUnderstanding Event Delegation | jQuery Learning Centerを読んでください。


jQueryに代わるもの

Finacial TimesFT Labs製の

ftlabs/ftdomdelegateというライブラリがあります。

こんな風に使います

<script src="http://wzrd.in/standalone/dom-delegate@latest"></script>

<script>
document.addEventListener("DOMContentLoaded", main)

function main() {
domDelegate(document.body).on('click', 'button', handleButtonClicks)
document.body.innerHTML = '<button>ボタン</button>'
}

function handleButtonClicks(event) {
console.log('click', event)
}
</script>

動くサンプル


Event Delegationを実現する仕組み

ソースを見るとElement.matches APIを使っています。

matchesの具体的な使い方は、以下のブログが詳しいです。

Selectors APIのmatchesSelectorと、動的なページでのイベント処理 - 素人がプログラミングを勉強していたブログ