DOMイベントの仕組み｜イベント・デリゲート #DOM

DOM

ドキュメント・オブジェクト・モデルは、ウェブページやスクリプトを他のプログラミング言語にリンクします。

DOMイベント

イベントは、基本的なユーザーインタラクションから、レンダリングモデルで発生する自動通知まで、あらゆるものを表すことができます。

言い換えると、DOM イベントには、ブラウザの内部イベントと、ブラウザがユーザーと対話するときに発生するイベントの両方が含まれます。一般的な種類としては、リソースイベント｜ウェブイベント｜フォーカスイベント｜CSS アニメーションイベント｜フォームイベント｜キーボードイベント｜マウスイベントなどがあります。

JavaScript自体はイベントをサポートしておらず、呼び出すDOMによって提供されるaddEventListenter()のみです。

DOMイベントモデル

DOM のイベントモデルは、それぞれキャプチャとバブリングです。イベントが発生すると、キャプチャフェーズ、ターゲットフェーズ、バブリングフェーズの順に、子要素と親要素の間を伝搬します。

言い換えると、あるタイプのイベント A が発生すると、DOM は Window オブジェクトから始まり、ターゲット DOM オブジェクトに下り、ターゲットオブジェクトから Window にエスカレートするシーケンスで、イベントのすべてのレベルでイベントリスナーを探します。

イベント・リスナー関数の実行を、2つのキャプチャ／バブリング・フェーズのいずれかで制御できるようにしたい場合は、次のように設定します。

js
dom.addEventLisenter('click',f2,true) // true:キャプチャ段階で関数を実行する

dom.addEventLisenter('click',f2[,false]) // false:バブリングフェーズで関数を実行する

泡立ちを抑える

イベントストリームのキャプチャフェーズをブロックすることはできませんが、バブリングフェーズは次のコードで中断できます。

js
e.stopPropagation()

イベント委任

イベントデリゲートは、ターゲットイベントの祖先をリッスンし、クリックされた要素がリッスンしたい要素であるかどうかを判断し、もしそうであれば関数を実行する要素です。利点は、メモリの節約と動的に生成された要素をリッスンできることです。

js
element.addEventListener(event,(e)=>{
 t = e.target //ユーザーが操作する要素
 もし.tagName.toLowercase() === selector){ //selectorはターゲットタグ名である。
 fn
 }
})

DOMイベントの仕組み｜イベント・デリゲート

DOM