如何仅使用JavaScript访问绑定到dom元素的事件，而不使用框架

How do I access what events have been bound to a dom element using only JavaScript, no frameworks

本文关键字：事件 框架 dom JavaScript 何仅使 访问 绑定 元素      更新时间：2023-09-26

如何使用JavaScript访问已绑定到DOM元素的事件，而不是使用库/框架或Firefox插件?只是纯JavaScript。我错误地认为会有一个事件对象作为具有绑定的元素的属性存储。

例如，如果我说，click, dblclick和mouseover绑定到一个元素，我将如何做以下不使用jQuery。只是JavaScript。

function check(el){
 var events = $(el).data('events');
 for (i in $(el).data('events')) {
  console.log(i) //logs click dblclick and mouseover
  }
}

我知道jQuery存储一个事件对象作为一个数据属性，即$(el).data('events')和eventbug插件显示事件绑定，所以必须有办法。

我还将补充说，这个问题的出现是因为我读到旧的IE浏览器中的内存泄漏，以及如何最好在从DOM中删除节点之前删除绑定事件，这使我想到，我如何测试绑定到元素的事件?

如果不能完全控制环境，则无法可靠地知道元素上有哪些侦听器。一些库手动控制事件监听器，例如，jQuery将它们存储在一个对象中，并为元素添加一个自定义属性，这样当偶数发生时，它就会使用自定义属性来查找该元素和事件的监听器并调用它们。

试题:

<div id="d0">div 0</div>
<script type="text/javascript">
var el = document.getElementById('d0')
el.addEventListener('click',function(){alert('hey');},false);
// Make sure listener has had time to be set then look at property
window.setTimeout(function(){alert(el.onclick)}, 100); // null
</script>

因此，要知道添加了哪些侦听器，您需要完全控制。

编辑:

要明确一点，没有可靠的方法来用javascript检查元素并发现添加了哪些侦听器，甚至发现是否添加了侦听器。您可以创建一个事件注册方案来跟踪使用事件注册方法添加的侦听器。但是如果监听器以其他方式添加(例如直接通过addEventListener)，那么你的注册方案将不知道它们。

正如在其他地方指出的，jQuery(和其他)不能跟踪侦听器直接添加到元素而不使用jQuery事件注册方法(点击，绑定，鼠标悬停等)，因为它们使用这些方法来注册(和调用)侦听器。

// list of onevent attributes; you'll have to complete this list
var arr = ['onclick', 'onmouseover', 'onmouseup'];
for ( var i = 0; i < arr.length; i++ ) {
    if ( el[arr[i]] != null ) {
        // element has an arr[i] handler
    }  
}

其中el是对DOM元素的引用

完整列表在这里

相关文章：