サイト全体に、未知の数とタイプのイベントがバインドされている要素が多数あると仮定します。
これらすべてのイベントを1つのバインドされたイベントでオーバーライドする必要があり、そのイベントのみが発生する場合、いくつかの推奨事項はありますか?
イベントをクリックイベントハンドラーにバインドし、jQueryを使用しています。
前もって感謝します。
サイト全体に、未知の数とタイプのイベントがバインドされている要素が多数あると仮定します。
これらすべてのイベントを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
または.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;
});
すべてのイベントをまとめて削除せずに(オーバーライドするだけで)考えを提供したいと思います。
新しい単一のバインドされたイベント(ここでは「クリック」と呼びます)がバインド先の要素に固有である場合、stopPropagation()関数を使用するだけで他のイベントを無視できると思います。このような
$("specific-selector").on("click", ".specific-class", function (e) {
e.stopPropagation()
// e.stopImmediatePropagation()
/* your code continues ... */
});
イベントのバブルを停止するので、他のイベントは発生しません。stopImmediatePropagation()を使用して、「クリック」と同じ要素に他のイベントがアタッチされないようにします。
たとえば、「mouseleave」イベントが$( "specific-selector .specific-class")要素にもバインドされている場合、それも発生しません。
最後に、他のすべてのイベントはこの要素では発生しませんが、新しい「クリック」要素で発生します。
未解決の問題は、他のイベントもstopPropagation()を使用する場合はどうなるかということです。...次に、最高の仕様のものが勝つと思うので、複雑なイベントは避けてください。イベントが多すぎることが最終的な提案です。
詳細については、 jQueryサイトの「直接および委任されたイベント」を参照してください。
の代わりにライブを使用してみてください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 */ };
これにより、変更や再バインドなどのコストがまったく発生しません。
これは実際には非常に単純なように見えます。
$('#foo').unbind('click');
$('#foo').bind('click', myNewFunction);
でもあなたの応答をありがとう。