如何僅使用JavaScript，不使用框架來訪問綁定到dom元素的事件

Question

如何使用JavaScript而不是使用庫/框架或Firefox附加組件訪問綁定到dom元素的事件？ 只是純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將事件偵聽器存儲在對象中，並向元素添加自定義屬性，以便在出現偶數時，它使用custom屬性查找該元素和事件的偵聽器並調用它們。

嘗試：

<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事件注冊方法（單擊，綁定，鼠標懸停等）而直接添加到元素的偵聽器，因為它們使用這些方法來注冊（並調用）聽眾。

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

完整列表在這里