JavaScriptのデリゲート
- カテゴリ:
- JavaScript
- コメント数:
- Comments: 0
◆ デリゲートはデリケート?
(いえ、なんでもないです)
(いえ、なんでもないです)
デリゲートはイベントリスナー自体は親要素に付けておき イベントが起きたエレメントを見て目的のエレメントでイベントが起きていた場合に関数を実行するというものです
これの良い所は 例えばulの中に1000個のliがあって すべてのliにクリック時に●●するイベントリスナーを設定したいとします
そのときに
というか無駄が多いです
そこでul自体にイベントリスナーをつけて
それだけでなく この方法にすればliがユーザの操作で後からどんどん増えるようなページであっても 追加するliに毎回addEventListenerを付ける必要はありません
イベントリスナーは親のulについているので後から増えたものもちゃんと認識してくれます
なんでulにつけてもliのイベントまでわかるの?と思った人はこのページが役に立つかも
これの良い所は 例えばulの中に1000個のliがあって すべてのliにクリック時に●●するイベントリスナーを設定したいとします
そのときに
[].forEach.call(document.querySelector("ul").children, function(e){
e.addEventListener("click", function(eve){/* ... */}, false);
});
と1000回も addEventListener するのは大変ですというか無駄が多いです
そこでul自体にイベントリスナーをつけて
document.querySelector("ul").addEventListener("click", function(eve){
if([].indexOf.call(this.children, eve.target) >= 0){
/* ... */
}
}, false);
のようにすればイベントリスナーは1つで済みますそれだけでなく この方法にすればliがユーザの操作で後からどんどん増えるようなページであっても 追加するliに毎回addEventListenerを付ける必要はありません
イベントリスナーは親のulについているので後から増えたものもちゃんと認識してくれます
なんでulにつけてもliのイベントまでわかるの?と思った人はこのページが役に立つかも