删除特定types的所有事件监听器
我想删除使用addEventListener()添加的特定types的所有事件侦听器。 我看到的所有资源都是说你需要这样做：
elem.addEventListener('mousedown',specific_function); elem.removeEventListener('mousedown',specific_function);
但是我希望能够在不知道目前是什么的情况下清除它，如下所示：
elem.addEventListener('mousedown',specific_function); elem.removeEventListener('mousedown');
这是不可能的，如果不拦截addEventListener调用并跟踪监听器，或者使用允许这些特性的库，那就不幸了。 如果可以访问监听器集合，但是该function没有实现，那就是了 。
您可以做的最接近的事情是通过克隆元素来删除所有侦听器，而不会克隆侦听器集合。
注意：这也将删除元素的子元素的侦听器。
var el = document.getElementById('el-id'), elClone = el.cloneNode(true); el.parentNode.replaceChild(elClone, el);
如果您通过删除侦听器的唯一目标是阻止它们运行，您可以添加一个事件侦听器到窗口捕获和取消给定types的所有事件：
window.addEventListener(type, function (event) { event.stopPropagation(); }, true);
对第三个parameter passingtrue会导致事件在下降的过程中被捕获。 停止传播意味着事件永远不会到达正在监听的听众。
您也可以覆盖'yourElement.addEventListener（）'方法，并使用'.apply（）'方法像正常一样执行监听器，但拦截过程中的函数。 喜欢：
<script type="text/javascript"> var args = []; var orginalAddEvent = yourElement.addEventListener; yourElement.addEventListener = function() { //console.log(arguments); args[args.length] = arguments[0]; args[args.length] = arguments[1]; orginalAddEvent.apply(this, arguments); }; function removeListeners() { for(var n=0;n<args.length;n+=2) { yourElement.removeEventListener(args[n], args[n+1]); } } removeListeners(); </script>
该脚本必须在页面加载时运行，否则可能无法拦截所有事件侦听器。
确保在使用之前删除“removeListeners（）”调用。
我知道这是旧的，但我有一个类似的问题，没有真正的答案，我想从文档中删除所有“keydown”事件侦听器。 我不重视addEventListener，而是在添加它们之前忽略它们，类似于上面的Toms答案，在加载其他脚本之前添加它。
<script type="text/javascript"> var current = document.addEventListener; document.addEventListener = function (type, listener) { if(type =="keydown") { //do nothing } else { var args = []; args[0] = type; args[1] = listener; current.apply(this, args); } }; </script>
您必须重写EventTarget.prototype.addEventListener来构buildlogging所有“添加侦听器”调用的陷阱函数。 像这样的东西：
var _listeners = []; EventTarget.prototype.addEventListenerBase = EventTarget.prototype.addEventListener; EventTarget.prototype.addEventListener = function(type, listener) { _listeners.push({target: this, type: type, listener: listener}); this.addEventListenerBase(type, listener); };
然后你可以构build一个EventTarget.prototype.removeEventListener s ：
EventTarget.prototype.removeEventListeners = function(targetType) { for(var index = 0; index != _listeners.length; index++) { var item = _listeners[index]; var target = item.target; var type = item.type; var listener = item.listener; if(target == this && type == targetType) { this.removeEventListener(type, listener); } } }
在ES6中，您可以使用Symbol来隐藏原始函数以及所有添加的侦听器的列表，直接在实例化的对象self中。
(function() { let target = EventTarget.prototype; let functionName = 'addEventListener'; let func = target[functionName]; let symbolHidden = Symbol('hidden'); function hidden(instance) { if(instance[symbolHidden] === undefined) { let area = {}; instance[symbolHidden] = area; return area; } return instance[symbolHidden]; } function listenersFrom(instance) { let area = hidden(instance); if(!area.listeners) { area.listeners = []; } return area.listeners; } target[functionName] = function(type, listener) { let listeners = listenersFrom(this); listeners.push({ type, listener }); func.apply(this, [type, listener]); }; target['removeEventListeners'] = function(targetType) { let self = this; let listeners = listenersFrom(this); let removed = []; listeners.forEach(item => { let type = item.type; let listener = item.listener; if(type == targetType) { self.removeEventListener(type, listener); } }); }; })();
你可以用这个小小的snipper来testing这个代码：
document.addEventListener("DOMContentLoaded", event => { console.log('event 1'); }); document.addEventListener("DOMContentLoaded", event => { console.log('event 2'); }); document.addEventListener("click", event => { console.log('click event'); }); document.dispatchEvent(new Event('DOMContentLoaded')); document.removeEventListeners('DOMContentLoaded'); document.dispatchEvent(new Event('DOMContentLoaded')); // click event still works, just do a click in the browser
删除元素中的所有侦听器一个js行 ：
element.parentNode.innerHTML += '';
