得到我想要檢索連接到一個元素的事件列表連接到一個元素的jQuery

Question

事件列表...

<div id="div_test">click HERE!</div> 

這工作

$("#div_test").click(function(e) 
{ 
    var events_list = $._data($(this)[0], 'events'); 
    console.log(events_list.click[0]); 
}); 

但是，爲什麼這並不？

$(document).on("click", "#div_test", function(e) 
{ 
    var events_list = $._data($(this)[0], 'events'); 
    console.log(events_list.click[0]); 
}); 

FIDDLE

Answer 1

其原因是，click事件不會觸發#div_test元素，但document元素。
您可以檢查e.delegateTarget兩個版本，看看哪些因素觸發click事件：

$(document).on("click", "#div_test1", function(e) { 
 
    console.log(e.delegateTarget.nodeName); 
 
}); 
 

 
$("#div_test2").click(function(e) { 
 
    console.log(e.delegateTarget.nodeName); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="div_test1">click HERE!</div> 
 
<br /><br /> 
 
<div id="div_test2">click HERE!</div>

當您使用$("#div_test").click你附加click事件到特定的元素，這可以讓你獲取所有附加到該元素的事件。

但是當您使用$(document).on("click", "#div_test"你不附加click事件，你document內部存在的#div_text元素。
實際上，您將click事件附加到document元素，當瀏覽器捕獲該事件時，jquery將檢查您點擊的實際元素是否爲#div_test元素。
這允許您將「附加事件」添加到尚未創建的元素中。

概括起來：

$(document).on("click", "#div_test", function(... 

IS NOT

$(document).find('#div_test').on("click", function(...