いくつ要素があるかわからないリストに対し、”リストの要素をクリックしたらその要素に応じた何かが発生する”、というようにする。この際、リストの各要素にイベントをバインドしてもよいが、もっと楽にやれる方法がある。

例

<ul id="animals">
  <li>こぶた</li>
  <li>たぬき</li>
  <li>きつね</li>
  <li>ねこ</li>
</ul>

  $('#animals').click(function(e) {
    alert($(e.target).text());
  });

こうすると、クリックした動物の名前が出てくる。親要素にイベントをバインドした上で e.target で実際にクリックされた要素を取得することで各 li にイベントバインドするよりも単純に書ける。

例外処理

クリックされてイベントが発生してほしくないものがクリックされた場合の対処は以下がある。

• e.target の内容でフィルタリングする
• クリックされたら困る要素で e.stopPropergation() する

以下の html で class ='noAlert' のものをクリックしても出ないようにすることを考えてみよう。

<ul id="animals">
  <li class='noAlert'>おに</li>
  <li>こぶた</li>
  <li>たぬき</li>
  <li>きつね</li>
  <li>ねこ</li>
  <li class='noAlert'>かいじゅう</li>
</ul>

内容でフィルタリング

  $('#animals').click(function(e) {
    if($(e.target).hasClass('noAlert')) {
      return;
    }
    alert($(e.target).text());
  });

きわめて単純。 noAlert クラスを持つ場合は途中で return してしまう。多分こちらの方が直感的だと思う。

stopPropergation

  $('#animals').click(function(e) {
    alert($(e.target).text());
  });
  $('.noAlert').click(function(e){
    e.stopPropagation();
  });

stopPropagation を使うとイベントが伝播しなくなる。そのため、 li がクリックされたことはわかっても ul がクリックされたことをキャッチできなくなる。

noAlert の要素にイベントをバインドする、という面倒があるが……

参考文献

UI Events Specification にもう少し詳しい話がある。