単一の新しいイベントで要素にバインドされたすべてのJavaScriptイベントをオーバーライドする
-
09-10-2019 - |
質問
サイト全体に多数の要素があると仮定して、それらに縛られたイベントの数と種類の種類があります。
これらのすべてのイベントを1つのバインドされたイベントでオーバーライドする必要があり、そのイベントだけが発砲する場合、いくつかの推奨事項は何ですか?
イベントをクリックイベントハンドラーにバインドし、JQueryを使用しています。
前もって感謝します。
解決
あなたが探しています jQuery#unbind
.
要素または一連の要素ですべてのイベントハンドラーを削除するには、次のことを行います。
$('.some-selector').unbind();
バインドするには、ハンドラーをクリックするだけで使用します unbind('click')
:
$('.some-selector').unbind('click');
すべてのハンドラーをクリックして、その後すぐに独自のハンドラーをバインドするには、次のようなことができます。
$('.some-selector').unbind('click').click(function(event) {
// Your code goes here
});
これは、jqueryを使用してバインドされたイベントでのみ機能することに注意してください(使用する .bind
または使用するjQueryメソッド .bind
初めの)。特定の要素セットから可能なすべてのオンクリックイベントを削除する場合は、以下を使用できます。
$('.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;
});
他のヒント
すべてのイベントを一緒に削除することなく、考えを提供したいと思います(それらを無効にします)。
新しい1つの単一のバウンドイベント(ここで「クリック」と呼ぶ)が拘束される要素に固有の場合、StopPropagation()関数だけで他のイベントを無視できると思います。このような
$("specific-selector").on("click", ".specific-class", function (e) {
e.stopPropagation()
// e.stopImmediatePropagation()
/* your code continues ... */
});
イベントが泡立つのを止めるので、他のイベントは発生しません。 stopimmediatepropagation()を使用して、「クリック」と同じ要素に接続されている他のイベントを防ぎます。
たとえば、「Mouseleave」イベントが$( "固有のセレクター.Specific-Class")要素にもバインドされている場合、発火しません。
最後に、他のすべてのイベントは、この要素ではなく、新しい「クリック」要素を発射しません。
未解決の質問は、他のイベントがStopPropagation()も使用している場合はどうでしょうか? ...それから私は最高の仕様を持つものが勝つと思うので、複雑なことを避けるようにしてください、あまりにも多くのイベントが最終的な提案です。
「直接および委任されたイベント」を見ることができます jQueryサイト 詳細については。
これは実際には非常に簡単です:
$('#foo').unbind('click');
$('#foo').bind('click', myNewFunction);
ご回答ありがとうございます。
使用してみてください 住む それ以外の bind
. 。次に、ライブバインディングを簡単に削除できます 死ぬ 高速操作であり、別のライブを等しく速く設定するセレクターから。
$('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 */ };
これにより、変更、再バインディングなどの費用はまったくありません。