从 DOM 中删除事件监听器答案

【问题标题】：Deleting event listener from the DOM从 DOM 中删除事件监听器
【发布时间】：2018-06-22 09:22:29
【问题描述】：

有一个网页正在加载我想要永久删除的点击事件监听器。我没有自己设置该功能，因为它是由网站加载的。我只需要删除事件监听器。

我知道事件和函数。

为什么这个事件监听器不会被移除？

【问题讨论】：

可能重复：stackoverflow.com/questions/209029/…
Remove event listener in JavaScript的可能重复
“我知道事件和函数。” “知道功能”是什么意思？你可以访问它吗？
@YuryTarabanko 我知道事件是点击，功能是 Zt。但是，我无法对网站进行更改。
如果可以移除某个容器元素的所有事件监听器，则创建一个相同类型的新元素并将其附加到容器之后。将第一个容器的所有子节点附加到第二个容器上，然后删除旧容器。这将使容器内的所有功能保持不变，但会删除容器本身的事件侦听器。这是proof of concept 说明这可能是如何工作的。

标签： javascript

【解决方案1】：

如果元素有onclick 属性，只需删除onclick 属性即可。请看下面的代码：

function myFunction() {
    document.getElementById( 'element' ).removeAttribute( 'onclick' )
}

<a id="element" href="https://stackoverflow.com" onclick="alert( 'Stack Overflow' ); return false">Click here for alert.</a>
<p>Click the button below to remove event listener from above link.</p>
<button onclick="myFunction()">Remove Event Listener</button>

但是，如果元素没有onclick属性，则必须有权访问点击功能并使用removeEventListener()方法。见下面的代码sn-p：

document.getElementById( 'element' ).addEventListener( 'click', Zt )

function Zt( e ) {
  e.preventDefault();
  alert( 'Stack Overflow' )
}

document.getElementById( 'button' ).addEventListener( 'click', function() {
  document.getElementById( 'element' ).removeEventListener( 'click', Zt )
} )

<a id="element" href="https://stackoverflow.com">Click here for alert.</a>
<p>Click the button below to remove event listener from above link.</p>
<button id="button">Remove Event Listener</button>

【讨论】：