jQuery入門 | イベント処理 | イベントの委任 event.preventDefault()

イベントの委任

jQueryはイベントの委任によって、多数の要素に共通して適用されるイベントハンドラを、共通の上位要素に1回だけ接続するだけで動作できるようにする。

次の例では、複数の<a>要素にクリックイベントハンドラを接続している。

$("#linkList a").on("click", function(event) {
  event.preventDefault();
  alert("このリンクは動作しません!");
});

<ul id="linkList">
  <li><a href="//www.devkuma.com">最初のリンク</a></li>
  <li><a href="//www.devkuma.com">2番目のリンク</a></li>
</ul>

コードを実行

この場合、各要素に接続されたイベントハンドラは、画面に現在存在する<a>要素には接続されるが、新しく追加される要素には接続されない。

上の例に、新規追加ボタンを追加してみよう。

$("button").one("click", function() {
  $("#linkList").append('<li><a href="//www.devkuma.com">新規リンク</a></li>');
});

<button>新規リンク追加</button>

コードを実行

このような場合にイベントの委任を利用すると、新しく追加された<a>要素にも接続できる。

$("#linkList").on("click", "a", function(event) {
  event.preventDefault();
  alert("このリンクは動作しません!");
});

コードを実行

.on()メソッドは、該当要素に第1引数として渡されたイベントが伝播したとき、そのイベントを発生させた要素が第2引数として渡されたセレクタと一致するかどうかを確認する。もしイベントが発生した要素と第2引数で渡されたセレクタが一致すれば、接続されたイベントハンドラを実行する。

イベントの委任を利用すると、現在存在する下位要素だけでなく、新しく追加される下位要素まですべて自動的に接続される。

イベントの伝播

イベントの伝播とは、イベントが発生したときに、ブラウザがイベントハンドラを実行する対象要素を決定する過程である。イベントがDocumentオブジェクトやHTML文書の要素で発生すると、対象オブジェクトを決定するためにイベントの伝播が起こる。このようにイベントが伝播する過程をイベントバブリングという。

イベントバブリングは、イベントが発生した要素から始まり、DOMツリーに沿って上方向へ伝播する過程を意味する。つまり、イベントが発生した要素に接続されたイベントハンドラが実行された後、その親要素に接続されたハンドラが実行される。さらにその親要素に登録されたハンドラが実行され、最後にはDocumentオブジェクトまで伝播が続く。

このような伝播によって、イベントの委任が可能になる。

イベントの伝播に関する詳しい内容は、JavaScriptのイベントリスナー呼び出しのレッスンで確認できる。