Question

如何使用JavaScript访问已绑定到dom元素的事件，而不使用库/框架或firefox附加组件？只是纯粹的JavaScript。我错误地认为会有一个事件对象存储为具有绑定的元素的属性。

例如，如果我有绑定说，单击，dblclick和鼠标悬停到元素我将如何执行以下不使用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中删除节点之前删除绑定事件，这让我想到，我该如何测试？什么事件绑定到元素？

非常感谢提前;）

Answer 1

如果您不完全控制环境，则无法可靠地知道元素上的侦听器。一些库手动控制事件监听器，例如， 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事件注册方法（click，bind，mouseover等）跟踪直接添加到元素的侦听器，因为他们使用这些方法进行注册（和打电话给听众。

Answer 2

// 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元素的引用

Complete lists are here

如何仅使用JavaScript，没有框架来访问已绑定到dom元素的事件

2 个答案: