web-dev-qa-db-ja.com

JavaScriptイベントハンドラをクリア/削除する方法は？

次のHTMLフラグメントがある場合：

<form id="aspnetForm" onsubmit="alert('On Submit Run!'); return true;">

Onsubmitイベントのハンドラーを削除またはクリアし、jQueryまたはその他のJavaScript使用を使用して独自のハンドラーを登録する必要があります。

javascripthtmldom-events
56
Jordan Terrell

ライブラリなしでこれを行うには：

document.getElementById("aspnetForm").onsubmit = null;
81
jiggy

JQueryを使用

$('#aspnetForm').unbind('submit');

そして、独自の追加に進みます。

24
Peter Bailey

これを試してください、これは私のために働いています：

$('#aspnetForm').removeAttr('onsubmit').submit(function() {   
    alert("My new submit function justexecuted!"); 
});

詳細については、 this を参照してください。

11
Ryan

JQueryの場合、 off() は、jQueryによって追加されたすべてのイベントハンドラーを削除します。

$('#aspnetForm').off();

引数なしで.off（）を呼び出すと、要素にアタッチされているすべてのハンドラーが削除されます。

2
zwcloud

JQueryの場合、.liveでイベントハンドラーをバインドしている場合、.dieを使用して、.liveでバインドされたすべてのインスタンスのバインドを解除できます。

2
Brian DiCasa

これは今では古くからの質問ですが、主要なブラウザがEventTarget.getEventListeners()をすべて放棄していることを考えると、[〜＃〜] all [〜＃〜]要素とその子のイベントハンドラー。HTML構造のみを保持します。要素を複製して置き換えます。

_let e = document.querySelector('selector');
let clone = e.cloneNode(true);
e.replaceWith(clone);
_

これは、すべてのハンドラー関数を追跡するメソッドでaddEventListener()プロトタイプをプリエンプトするのと同じくらいハッキングですが、少なくともこれは、DOMが別のスクリプトのイベントと既に関連付けられた後に使用できます。

これは、jQueryの clone() をcloneNode()の代わりに使用して、上記とほぼ同じように機能します。

_let original = $('#my-div');
let clone = original.clone();
original.replaceWith(clone);
_

このパターンでは、onclick="foo()"のような "on"属性 で定義されていない限り、要素またはその子ノードにイベントハンドラーが事実上残されません。

1
Akash