web-dev-qa-db-ja.com

要素にバインドされたすべてのJavaScriptイベントを単一の新しいイベントでオーバーライドする

不明な数とタイプのイベントがバインドされているサイト全体に多数の要素があると仮定します。

これらすべてのイベントを1つのバインドされたイベントでオーバーライドする必要があり、そのイベントのみが発生する場合、いくつかの推奨事項は何ですか？

イベントをクリックイベントハンドラーにバインドし、jQueryを使用しています。

前もって感謝します。

javascriptjqueryeventsevent-handlingevent-binding
24
jerome

_jQuery#unbind_ を探しています。

要素または要素のセットのすべてのイベントハンドラーを削除するには、次のようにします。

_$('.some-selector').unbind();
_

クリックハンドラのみをバインド解除するには、unbind('click')を使用します。

_$('.some-selector').unbind('click');
_

すべてのクリックハンドラーをバインド解除し、その後すぐに独自のハンドラーをバインドするには、次のようにします。

_$('.some-selector').unbind('click').click(function(event) {
  // Your code goes here
});
_

これはjQueryを使用してバインドされたイベントに対してのみ機能することに注意してください（_.bind_または_.bind_を内部で使用する任意のjQueryメソッドを使用）。特定の要素のセットからすべての可能なonclickイベントを削除したい場合は、以下を使用できます。

_$('.some-selector')
  .unbind('click') // takes care of jQuery-bound click events
  .attr('onclick', '') // clears `onclick` attributes in the HTML
  .each(function() { // reset `onclick` event handlers
    this.onclick = null;
  });
_
50
Mathias Bynens

すべてのイベントをまとめて削除せずに（単にオーバーライドするだけで）、考えを提供したいと思います。

新しい1つのバインドされたイベント（ここでは "クリック"と呼びます）が、バインド先の要素に固有である場合、stopPropagation（）関数を使用するだけで他のイベントを無視できると思います。このような

$("specific-selector").on("click", ".specific-class", function (e) {
  e.stopPropagation()
  // e.stopImmediatePropagation()
  /* your code continues ... */
});

イベントが止まるので、他のイベントは発生しません。 stopImmediatePropagation（）を使用して、「クリック」と同じ要素に他のイベントがアタッチされないようにします。

たとえば、「mouseleave」イベントが$（ "specific-selector .specific-class"）要素にもバインドされている場合、イベントも発生しません。

最後に、他のすべてのイベントはこの要素ではなく、新しい「クリック」要素で発生します。

未解決の質問は、他のイベントもstopPropagation（）を使用している場合はどうなりますか？ ...そして、仕様が最も良いものが勝つと思うので、複雑で多すぎるイベントは避けてください。

詳細については、 jQueryサイト の「直接イベントと委任イベント」を参照してください。

7
francischan

bindの代わりに live を使用してください。次に、セレクターから die を使用してライブバインディングを簡単に削除し、別のライブを同様に高速に設定できます。

   $('selection here').live('..', .....);  // multiple invocations
   $('selection here').die();
   $('selection here').live('click',.....);

DOMには一切触れません。イベント条件は、イベントの発生時に評価されます。

しかし、一般的に、ハンドラー関数を交換したいだけなら、なぜこのようにしないのか：

var ahandler = function(evt) { /* first implementation */ }
$('.selector').bind('click', function(evt) { ahandler(evt); });

//and then if you want to change handlers
ahandler = function(evt) { /* new implementation */ };

これにより、変更、再バインドなどの費用は一切かかりません。

1
gertas

これは実際にはかなり単純なように見えます：

$('#foo').unbind('click');
$('#foo').bind('click', myNewFunction);

ご回答ありがとうございます。

1
jerome