javascript - 如何清除/删除 JavaScript 事件处理程序？

Question

给定以下 HTML 片段：

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

我需要删除/清除 onsubmit 事件的处理程序，并使用 jQuery 或任何其他类型的 JavaScript 使用注册我自己的处理程序。

score 84 · Accepted Answer

要在没有任何库的情况下执行此操作：

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

score 26 · Accepted Answer

26

使用 jQuery

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

然后继续添加你自己的。

于 2009-04-29T19:41:24.470 回答

score 11 · Accepted Answer

试试这个，这对我有用：

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

有关更多详细信息，请参阅此内容。

score 5 · Accepted Answer

这是一个古老的问题，但鉴于主要浏览器都已放弃EventTarget.getEventListeners()，这里有一种方法可以删除元素及其子元素上的所有事件处理程序并仅保留 HTML 结构。我们只需克隆元素并替换它：

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

这与使用跟踪每个处理函数的方法抢占原型一样多addEventListener()，但至少可以在 DOM 已经与另一个脚本的事件连接后使用。

这也与上面使用 jQueryclone()而不是cloneNode()：

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

这种模式将有效地在元素或其子节点上不留下任何事件处理程序，除非它们是使用“on”属性定义的，例如onclick="foo()".

score 3 · Accepted Answer

对于 jQuery，off()从其中删除 jQuery 添加的所有事件处理程序。

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

不带参数调用 .off() 会删除所有附加到元素的处理程序。

score 2 · Accepted Answer

对于 jQuery，如果您使用 .live 绑定事件处理程序，您可以使用 .die 取消绑定所有与 .live 绑定的实例。

6 回答 6