jQuery：同じイベントの複数のハンドラー

2つのイベントハンドラーを同じ要素の同じイベントにバインドするとどうなりますか？

例えば：

var elem = $("...")
elem.click(...);
elem.click(...);

最後のハンドラーは「勝ち」ますか、それとも両方のハンドラーが実行されますか？

両方のハンドラーが実行され、jQueryイベントモデルでは1つの要素で複数のハンドラーが許可されるため、後のハンドラーが古いハンドラーをオーバーライドすることはありません。

ハンドラーは、バインドされた順序で実行されます。

2つのハンドラーfとgがあり、それらが既知の固定された順序で実行されることを確認してから、単にそれらをカプセル化するとします。

$("...").click(function(event){
  f(event);
  g(event);
});

このように、（jQueryの観点から）fとgを指定された順序で呼び出すハンドラーは1つだけです。

jQueryの.bind（）は、バインドされた順序で起動します。

イベントが要素に到達すると、その要素のそのイベントタイプにバインドされているすべてのハンドラーが呼び出されます。複数のハンドラーが登録されている場合、それらは常にバインドされた順序で実行されます。すべてのハンドラが実行された後、イベントは通常のイベント伝播パスに沿って続行されます。

ソース：http : //api.jquery.com/bind/

jQueryの他の関数（例：）はの.click()ショートカット.bind('click', handler)であるため、それらもバインドされた順序でトリガーされると思います。

チェーンを使用してイベントを順番に実行できる必要があります。例：

$('#target')
  .bind('click',function(event) {
    alert('Hello!');
  })
  .bind('click',function(event) {
    alert('Hello again!');
  })
  .bind('click',function(event) {
    alert('Hello yet again!');
  });

以下のコードも同じことをしていると思います

$('#target')
      .click(function(event) {
        alert('Hello!');
      })
      .click(function(event) {
        alert('Hello again!');
      })
      .click(function(event) {
        alert('Hello yet again!');
      });

出典：http : //www.peachpit.com/articles/article.aspx?p=1371947&seqNum=3

TFMはまた言います：

イベントが要素に到達すると、その要素のそのイベントタイプにバインドされているすべてのハンドラーが呼び出されます。複数のハンドラーが登録されている場合、それらは常にバインドされた順序で実行されます。すべてのハンドラが実行された後、イベントは通常のイベント伝播パスに沿って続行されます。

両方のハンドラーが呼び出されます。

インラインイベントバインディング（など"onclick=..."）を考えているかもしれませんが、大きな欠点は、イベントに対して1つのハンドラーしか設定できないことです。

jQueryは、DOMレベル2のイベント登録モデルに準拠しています。

DOMイベントモデルでは、1つのEventTargetに複数のイベントリスナーを登録できます。これを実現するために、イベントリスナーは属性値として保存されなくなりました

Stephan202のカプセル化と複数のイベントリスナーという2つの方法を使用して、正常に機能するようにしました。私には3つの検索タブがあります。それらの入力テキストIDを配列で定義しましょう。

var ids = new Array("searchtab1", "searchtab2", "searchtab3");

searchtab1の内容が変更された場合、searchtab2とsearchtab3を更新します。カプセル化のためにこのようにしました：

for (var i in ids) {
    $("#" + ids[i]).change(function() {
        for (var j in ids) {
            if (this != ids[j]) {
                $("#" + ids[j]).val($(this).val());
            }
        }
    });
}

複数のイベントリスナー：

for (var i in ids) {
    for (var j in ids) {
        if (ids[i] != ids[j]) {
            $("#" + ids[i]).change(function() {
                $("#" + ids[j]).val($(this).val());
            });
        }
    }
}

私は両方の方法が好きですが、プログラマーはカプセル化を選択しましたが、複数のイベントリスナーも機能しました。テストにはChromeを使用しました。

1つのハンドラーが次々と発生することを保証する回避策があります。2番目のハンドラーをコンテナー要素にアタッチし、イベントをバブルアップさせます。コンテナーに接続されたハンドラーで、event.targetを調べて、目的のものである場合は何かを行うことができます。

粗野かもしれませんが、確実に機能するはずです。

jqueryは複数のイベントハンドラーを許可するため、両方のハンドラーを実行します。サンプルコードを作成しました。あなたはそれを試すことができます

デモ