使用 addEventListener 获取附加到节点的事件监听器
使用 addEventListener 获取附加到节点的事件监听器
我已经查看了以下问题:
- 如何在调试时或通过JavaScript代码找到DOM节点上的事件监听器?
- 我可以以编程方式检查和修改HTML元素上的JavaScript事件处理程序吗?
- 如何使用Firebug(或类似工具)调试JavaScript/jQuery事件绑定
然而,这些问题都没有回答如何在使用addEventListener
的情况下获取附加到节点上的事件监听器列表,而不修改事件监听器创建之前的addEventListener
原型。
VisualEvent无法显示所有事件监听器(iPhone特定的事件监听器),而我想以(某种程度上)以编程方式实现这一点。
问题的出现原因和解决方法:
问题的出现原因:
由于没有原生的方法来获取附加到节点上的事件监听器,因此需要找到一种不会添加任何“旧”原型方法的较不侵入性的解决方案。
解决方法:
通过创建一个ListenerTracker对象来实现获取附加到节点上的事件监听器。该对象包括以下方法:
- init:初始化方法,用于监听Element和window对象。
- listen:用于注册需要监听的对象,并拦截其事件监听器。
- register_element:注册单个元素并返回其对应的监听器。
- intercep_events_listeners:拦截事件监听器并进行处理,包括备份被覆盖的方法、添加新的监听器、移除监听器等。
- getEventListeners:获取指定类型的监听器。
需要注意的是,如果想要拦截window.addEventListener,需要将代码中的Element.prototype和HTMLElement.prototype替换为window。
使用该解决方法,可以通过调用ListenerTracker对象的init方法进行初始化,并在任意脚本中调用element.getEventListeners()来获取事件监听器。
修改后的解决方法还包括对其他可拦截对象的监听,例如XMLHttpRequest。
通过创建ListenerTracker对象,并实现监听和拦截方法,可以解决获取附加到节点上的事件监听器的问题。这种方法相对不侵入性,不会添加任何“旧”原型方法。
问题原因:getEventListeners方法不支持Firefox 35版本。
解决方法:使用其他工具或方法来获取节点上添加的事件监听器。
文章内容如下:
Chrome DevTools、Safari Inspector和Firebug支持getEventListeners(node)方法。这个方法可以用来获取节点上添加的事件监听器。但需要注意的是,getEventListeners方法在Firefox 35版本中不支持。虽然在Firefox上可能无法正常工作,但是开发人员通常会在多个浏览器上进行开发。如果需要修改现有网站,这个方法肯定会非常有帮助。
然而,在Firefox 69版本中,这个问题已经得到了解决。所以,如果你使用的是Firefox 69或更高版本,就可以放心使用getEventListeners方法了。
如果你需要在不支持getEventListeners方法的Firefox 35版本上获取节点上的事件监听器,你可以尝试使用其他工具或方法来实现。一个可能的解决方法是使用Firefox的开发者工具来查看节点上的事件监听器。另外,你也可以查阅Firefox的官方文档,寻找其他可用的方法或工具。
总之,getEventListeners方法在不同浏览器和版本中的支持情况是不同的。在使用该方法之前,建议先了解目标浏览器的兼容性,并根据情况选择合适的方法或工具来获取节点上的事件监听器。