如何清除/移除JavaScript事件处理程序？

Question

考虑以下 HTML 片段:

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

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

- Jordan Terrell

Answer 1

不使用任何库来实现这个：

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

- jiggy

---

我可能说得太早了 - 这在IE 6或7上似乎不起作用。它报告一个错误：“未实现”。 - Jordan Terrell

把它设置为 null 而不是 undefined，可以行吗？虽然 undefined 应该是正确的设置，但 null 可能也能行。 - Powerlord

仅出于好奇，将object.eventhandler设置为null会返回typeof object.eventhandler的'undefined'吗？ - anonymous-one

document.getElementById("aspnetForm").removeAttribute('onsubmit') - Rudie

将其设置为''怎么样？我曾经在许多情况下看到过这种用法，代替了null。哪个更好？ - Synetech

只有 removeAttribute 在 Chrome (Tampermonkey) 中有效。我没有尝试 undefined，但我尝试了 delete。 - Grault

Answer 2

使用jQuery

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

然后继续添加你自己的内容。

- Peter Bailey

---

那我不确定 - 移除事件监听器的“jQuery方式”。 - Peter Bailey

你只能解除使用jQuery的bind()方法添加的事件监听器。 - Matthew Scharley

请使用$.die('submit')代替。 - WooDzu

Answer 3

尝试这个，这个对我有效：

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

更多细节请参见此链接。

- Ryan

Answer 4

这个问题已经很老了，但是考虑到主要的浏览器都放弃了EventTarget.getEventListeners()，这里提供一种方法来移除元素及其子元素上所有事件处理程序并保留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”属性 定义的，否则此模式将有效地不会在元素或其子节点上留下任何事件处理程序。

- Aakash

Answer 5

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

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

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

- zwcloud

---

这仅会移除使用jQuery添加的事件处理程序。任何使用原生JS或其他方法添加的事件处理程序都不会被移除。 - beliha

Answer 6

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

- Brian DiCasa

---

.die() 已经被弃用 - ivan_pozdeev