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

Question

给出以下HTML片段:

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

我需要删除/清除onsubmit事件的处理程序,并使用jQuery或任何其他JavaScript使用方式注册我自己的处理程序.

Answer 1

要做到这一点没有任何库:

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

Answer 2

用jQuery

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

然后继续添加自己的.

Answer 3

试试这个,这对我有用:

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

有关详细信息,请参阅此

Answer 4

这是一个古老的问题，但鉴于主要浏览器都已放弃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()".