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

IT技术 javascript html dom-events
2021-02-28 08:24:38

给定以下 HTML 片段:

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

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

6个回答

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

document.getElementById("aspnetForm").onsubmit = null;
嗯...如果你将它设置为 null 而不是 undefined 会起作用吗?尽管 undefined应该是正确的设置,但 null 可能会起作用。
2021-04-19 08:24:38
出于好奇,设置 object.eventhandler=null 会返回 'undefined' 作为 typeof object.eventhandler 吗?
2021-04-19 08:24:38
document.getElementById("aspnetForm").removeAttribute('onsubmit')
2021-04-19 08:24:38
我可能很快就谈过 - 这似乎不适用于 IE 6 或 7。它报告错误:“未实现”。
2021-04-21 08:24:38
把它设置成''怎么样?我已经多次看到它代替null. 哪个更好?
2021-05-15 08:24:38

使用 jQuery

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

然后继续添加你自己的。

然后我不确定 - 这是删除事件侦听器的“jQuery 方式”。
2021-04-17 08:24:38
相反,您可以使用 $.die('submit')
2021-04-21 08:24:38
您只能取消绑定使用 jQuerybind()方法添加的事件侦听器
2021-04-29 08:24:38

试试这个,这对我有用:

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

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

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

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

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

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

这只会删除使用 jQuery 添加的事件处理程序。任何使用 vanilla JS 或任何其他方法添加的事件处理程序都不会被删除。
2021-04-30 08:24:38