首頁(yè) 猿問如何在調(diào)試時(shí)或從JavaScrip...

如何在調(diào)試時(shí)或從JavaScript代碼中找到DOM節(jié)點(diǎn)上的事件偵聽器？

JavaScript

暮色呼如 2019-05-31 11:27:25

如何在調(diào)試時(shí)或從JavaScript代碼中找到DOM節(jié)點(diǎn)上的事件偵聽器？我有一個(gè)頁(yè)面，其中一些事件偵聽器被附加到輸入框和選擇框。有什么方法可以找出哪個(gè)事件偵聽器正在觀察特定的DOM節(jié)點(diǎn)，以及哪個(gè)事件呢？使用以下方法附加事件：原型 Event.observe;多姆氏addEventListener;作為元素屬性element.onclick.

查看完整描述

3 回答

GCT1015

TA貢獻(xiàn)1827條經(jīng)驗(yàn) 獲得超4個(gè)贊

如果您只需要檢查頁(yè)面上正在發(fā)生的事情，可以嘗試視覺事件書簽。

更新: 視覺事件2可用；

反對(duì) 回復(fù) 2019-05-31

catspeake

TA貢獻(xiàn)1111條經(jīng)驗(yàn) 獲得超0個(gè)贊

這取決于事件是如何連接的。為了舉例說明，假設(shè)我們有以下單擊處理程序：

var handler = function() { alert('clicked!') };

我們將使用不同的方法將它附加到元素上，有些方法允許檢查，有些方法不允許檢查。

方法A)單個(gè)事件處理程序

element.onclick = handler;// inspectalert(element.onclick); // alerts "function() { alert('clicked!') }"

方法B)多事件處理程序

if(element.addEventListener) { // DOM standard
    element.addEventListener('click', handler, false)} else if(element.attachEvent) { // IE
    element.attachEvent('onclick', handler)}// cannot inspect element to find handlers

方法C)：jQuery

$(element).click(handler);

1.3.x

// inspectvar clickEvents = $(element).data("events").click;jQuery.each(clickEvents, function(key, value) {
    alert(value) // alerts "function() { alert('clicked!') }"})

1.4.x(將處理程序存儲(chǔ)在對(duì)象中)

// inspectvar clickEvents = $(element).data("events").click;jQuery.each(clickEvents, function(key, handlerObj) {
    alert(handlerObj.handler) // alerts "function() { alert('clicked!') }"
    // also available: handlerObj.type, handlerObj.namespace})

^{(見jQuery.fn.data和jQuery.data)}

方法D)：原型(凌亂)

$(element).observe('click', handler);

1.5.x

// inspectEvent.observers.each(function(item) {
    if(item[0] == element) {
        alert(item[2]) // alerts "function() { alert('clicked!') }"
    }})

1.6至1.6.0.3，包括在內(nèi)(在此非常困難)

// inspect. "_eventId" is for < 1.6.0.3 while // "_prototypeEventID" was introduced in 1.6.0.3var clickEvents =
 Event.cache[element._eventId || (element._prototypeEventID || [])[0]].click;clickEvents.each(function(wrapper){
    alert(wrapper.handler) // alerts "function() { alert('clicked!') }"})

1.6.1(略好一點(diǎn))

// inspectvar clickEvents = element.getStorage().get('prototype_event_registry').get('click');clickEvents.each(function(wrapper){
    alert(wrapper.handler) // alerts "function() { alert('clicked!') }"})

反對(duì) 回復(fù) 2019-05-31