如何清除/删除 JavaScript 事件处理程序？答案

【问题标题】：How to Clear/Remove JavaScript Event Handler?如何清除/删除 JavaScript 事件处理程序？
【发布时间】：2010-10-22 16:21:21
【问题描述】：

给定以下 HTML 片段：

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

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

我可能很快就谈过了 - 这似乎不适用于 IE 6 或 7。它报告错误：“未实现”。
嗯...如果将其设置为 null 而不是 undefined 是否有效？虽然未定义应该是正确的设置，但 null 可能会起作用。
出于好奇，将 object.eventhandler=null 设置为 typeof object.eventhandler 会返回 'undefined' 吗？
document.getElementById("aspnetForm").removeAttribute('onsubmit')
将其设置为'' 怎么样？我已经多次看到它代替null。哪个更好？

【解决方案2】：

使用 jQuery

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

然后继续添加您自己的。

【讨论】：

【解决方案3】：

试试这个，这对我有用：

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

更多详情请见this。

【讨论】：

【解决方案4】：

现在这是一个古老的问题，但鉴于主要浏览器都放弃了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);

这种模式实际上不会在元素或其子节点上留下任何事件处理程序，除非它们是用"on" attribute 定义的，例如onclick="foo()"。

【讨论】：

【解决方案5】：

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

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

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

【讨论】：

【解决方案6】：

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

【讨论】：