turunto: 動的に追加される要素にイベントを登録する

なぜこんな記事を書いたのか。

前回のhandleEventってなんかよさそうこの記事書いてて

思い出したついでです。

<html>
<head>
<body>
<button id="add">追加</button>
<ul id="listUL">
<li>list1<button class="remove">削除</button></li>
</ul>

このリストは動的に追加され、削除ボタンでそのリストを削除したい場合。

add.addEventListener('click', function() {
  var listLength = document.getElementsByClassName('remove').length;
  var list = '
list' + (listLength + 1) + '
';
  listUL.innerHTML += list;
});
listUL.addEventListener('click', function(e) {
//親がイベントを監視し、伝播するイベントをキャッチし発生元の親listを削除する
//親が上の要素にいけば行くほど（広く監視するほど）無駄なイベント捕捉が増える？？と思われる
  if(e.target.className === 'remove') {
    this.removeChild(e.target.parentNode);
    //ここのthisはリスナが登録されたlistULを指す
    //thisは e.currentTarget、e.targetはクリックされた要素
  }
});

ちなみに動的な要素もそうだけど、大量のリストにイベント設定するときとかもforで回すして

全ての要素に登録するより、親に1つ登録してe.taｒgetを監視した方がよいのかしら？？

以前、ふとどーやってあとから追加された要素にイベント登録するんだろーって思って、

ググったところjQueryのliveとかonとか出てくるんですよね。

まぁみなさんその情報を求めているんでしょう。

がしかしここ最近なぜかjQueryをあまり使わなくって。

そんで調べてなるほど！

うーん、

参考

jQueryのliveやdelegateは実際何をやってるのか

turunto

2014/02/12

動的に追加される要素にイベントを登録する

0 件のコメント :

コメントを投稿