在javascript中删除文档的所有事件侦听器不使用事件名称
问题描述:
我必须删除添加到文档的所有事件侦听器。
所以根据THIS POST,我建立了这样的功能,但它显示TypeError: document.parentNode is null
!在javascript中删除文档的所有事件侦听器不使用事件名称
var msg = document.getElementById('state-msg');
var button = document.getElementById('removeListener');
document.addEventListener('keydown', function(e) {
msg.textContent = 'keydown:' + e.keyCode;
});
document.addEventListener('keyup', function(e) {
msg.textContent = 'keyup:' + e.keyCode;
});
document.addEventListener('keypress', function(e) {
msg.textContent += 'keypress:' + e.keyCode;
});
button.addEventListener('click', function(e) {
var elClone = document.cloneNode(true);
document.parentNode.replaceChild(elClone, document);
});
Press any key and get the message here: <span id="state-msg"></span>
<button id = "removeListener">RemoveListener</button>
这是非常基本的问题,但还是没有成功,任何一种意见将不胜感激。
UPDATE:
我也试过document = elNode
,但不工作。
答
就我个人而言,我会命名事件监听器,以便您可以正确删除它们。 我得到你想要做的事情。但是,由于这是document
节点,所以不太可能找到它的父节点。毕竟它是你的DOM树的根。 如果这是您绑定事件侦听器的特定元素,那么您的方法就可以工作。
- 你可以扩展的addEventListener和removeEventListener登记的数据结构,你可以稍后在函数中使用有条不紊地删除所有事件侦听器的功能。 See this answer for details。
- 另一种选择是,如果您不介意转移到JQuery,则使用JQuery附加侦听器,然后使用
$(document).off()
将删除附加的侦听器。它可能不与本地addEventListener方法一起使用。
+0
嗨@Serendipity,感谢您的链接,我发现了一些重要的注意事项。如果你为'_eventHandlers'使用创建片段,它会很棒,它会帮助用户减少很多次 –
'document'是*最顶层*父节点它没有父亲 –
也许使用类似'getEventListeners(document)'的东西''可能有些用处?复制/粘贴到您的浏览器控制台。 'var listener = getEventListeners(document); for(evt in listener){console.log('Event Type:'+ evt); console.log(listener [evt]);}'不知道它对你有什么用处。这不是删除事件监听器,而是列出正在使用的事件,所以也许你可以从那里删除它们? – NewToJS
@artgb啊,对。那么它使用谷歌浏览器为我列出了它们,但没有真正使用它,因此只提供了一个建议,在黑暗中拍摄。 – NewToJS