如何查看附加到html元素的事件？

Question

你好，我是一個新的程序員，仍然在學習。 這是我試圖找出代碼：

<div id="buy" class="buy button">Buy</div> 

當我點擊股利（按鈕），執行一些JavaScript代碼，但我不知道是它。如何知道點擊發生時觸發了哪些功能？一個偵聽器的一些如何連接到這個元素

Answer 1

如果您使用Firefox和Firebug，您可以嘗試安裝FireQuery。它會讓你可以看到由jQuery綁定的處理程序。 http://firequery.binaryage.com/

Answer 2

使用jQuery("#buy").data('events');

http://api.jquery.com/jQuery.data/可能是有趣。

Answer 3

你使用jQuery嗎？如果是這樣，你要尋找這些三行代碼之一：內置了

$("#buy").click //the div is refered by its id 

或

$(".buy").click //the div is refered to by the style "buy" 

或

$(".button").click //refered to by the style "button" 

大多數較新的瀏覽器有「開發工具」按F12（至少在IE和Chrome中）。這可能有助於您進一步調試和跟蹤。

Answer 4

使用傳統的element.onclick=處理函數或HTML <element onclick="handler">附加的事件處理函數可以從腳本或調試器中的element.onclick屬性中檢索得到。

使用DOM Level 2 Events附加的事件處理程序addEventListener方法和IE的attachEvent目前無法從腳本中檢索。 DOM Level 3曾經提出element.eventListenerList來獲取所有偵聽器，但是目前還不清楚這是否會使其達到最終規範。今天在任何瀏覽器中都沒有實現。

Answer 5

你不能通過使用ECMAscript本身的「正義」來以非常好的方式做到這一點。舉例來說，如果有通過DOM 1級在

document.getElementById('buy').onclick = function() {}; 

形式添加click事件處理程序，你當然也可以很容易地攔截節點本身上該屬性。事情變得越來越複雜，如果DOM級別2分別與.addEventListener().attachEvent()發揮作用。現在你並沒有真正的「地方」來尋找所有綁定的不同監聽器函數的位置。

它通過使用jQuery變得更好。 jQuery將把它的所有事件處理函數放在一個特殊的對象中，該對象鏈接到調用的DOM節點。您可以通過獲取.data() -expando屬性像

$('#buy').data('events'); 

但是一個節點檢查的是，現在我已經描述的事件監聽器綁定到一個節點（實際上它的兩個，因爲像jQuery庫還採用了三種不同的方式當然DOM級別1或2的方法）。

如果某個事件是由委派觸發的，那真的很難看。這意味着，我們將點擊事件綁定到某個父節點上，等待該事件冒泡給我們，以便我們檢查target。所以現在我們甚至沒有node和event listener之間的直接關係。

這裏的結論是，瞭解一個瀏覽器插件或可能是像VisualEvent這樣的東西。

Answer 6

如果你使用的是FireFox，你應該安裝FireBug。一旦你有了，你可以安裝FireQuery，它會告訴你哪些jQuery事件綁定了哪些對象。

http://getfirebug.com/

http://firequery.binaryage.com/

Answer 7

1. 右鍵單擊頁面，並選擇查看頁面的源
2. 查找<script>標籤
3. 查找$("#buy")和東西提onClick或.on("click",function(){...});
4. 如果你找不到它，沿着t尋找東西HESE線：document.getElementById("buy")
5. 你已經找到了function，或代碼，在事件處理程序代碼是

$("#buy")是說發現有buy的id屬性的元素的JQuery的方式，如果它有一個.跟着它的一些函數，該函數正在處理由JQuery找到的元素。

Answer 8

以下是我以前使用過的東西，我想可能是您要找的東西。它所做的是在頁面元素上觀察屬性（在下面的示例中，它是文檔的「Title」屬性），然後在JS屬性發生更改時使用JS調用堆棧顯示警報。在你試圖找到任何代碼的情況下，你需要先把它加入到DOM中，但是希望你能夠找出導致問題的原因。

我會推薦使用Firefox和Firebug進行JavaScript調試。

// Call stack code 
function showCallStack() { 
    var f=showCallStack,result="Call stack:\n"; 

    while((f=f.caller)!==null) { 
     var sFunctionName = f.toString().match(/^function (\w+)\(/) 
     sFunctionName = (sFunctionName) ? sFunctionName[1] : 'anonymous function'; 
     result += sFunctionName; 
     result += getArguments(f.toString(), f.arguments); 
     result += "\n"; 
    } 
    alert(result); 
} 


function getArguments(sFunction, a) { 
    var i = sFunction.indexOf(' '); 
    var ii = sFunction.indexOf('('); 
    var iii = sFunction.indexOf(')'); 
    var aArgs = sFunction.substr(ii+1, iii-ii-1).split(',') 
    var sArgs = ''; 
    for(var i=0; i<a.length; i++) { 
     var q = ('string' == typeof a[i]) ? '"' : ''; 
     sArgs+=((i>0) ? ', ' : '')+(typeof a[i])+' '+aArgs[i]+':'+q+a[i]+q+''; 
    } 
    return '('+sArgs+')'; 
} 

var watchTitle = function(id, oldval, newval) { showCallStack(); } 

// !! This is all you should need to update, setting it to whatever you want to watch. 
document.watch("title", watchTitle); 

Answer 9

這是我發現的是如何做到這一點的最簡單的方法： http://www.sprymedia.co.uk/article/Visual+Event

當與JavaScript事件的工作，往往容易失去跟蹤 什麼事件被認購哪裏。如果您使用大量事件，這在使用逐步增強的現代 接口中很常見，這一點尤其如此。 Javascript庫也 從技術點 爲聽衆增加了另一種程度的複雜性，而從開發人員的角度來看，他們當然可以讓 生活變得更容易！但是當事情出錯時，可能很難追查爲什麼會這樣。

也正是由於這一點，我已經把一個Javascript書籤稱爲 視覺事件，這在視覺上表明 事件將運行已經訂閱了他們 事件，什麼這些事件都是在頁面上的元素和功能當被觸發時。這主要是爲了幫助調試 ，但它也可以是非常有趣且信息豐富的 以查看其他頁面上的訂閱事件。

有一個書籤按鈕，您可以拖動到您的工具欄（FF或Chrome），然後只需點擊任何頁面上您想查看附加事件的按鈕。很棒！ （至少對於jQuery或其他庫附加的事件）。

Answer 10

在谷歌Chrome瀏覽器的開發者工具（點擊扳手圖標>工具>開發人員工具），選擇元素標籤的元素，在右側打開「事件監聽器」面板中，你會看到所有的事件

Answer 11

您可以使用「Visual Event 2」腳本作爲書籤或與Chrome extension相同的腳本。

這個腳本顯示了連接到DOM元素所有的JS事件。