如何在调试时或从JavaScript代码中在DOM节点上查找事件侦听器？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在调试时或从JavaScript代码中在DOM节点上查找事件侦听器？相关的知识，希望对你有一定的参考价值。
我有一个页面，其中一些事件监听器附加到输入框和选择框。有没有办法找出哪些事件监听器正在观察特定的DOM节点以及哪些事件？
事件附件使用：
- Prototype's
Event.observe; - DOM的
addEventListener; - 作为元素属性
element.onclick。
如果您只需要检查页面上发生的情况，可以尝试使用Visual Event书签。
更新：Visual Event 2可用;
Firefox开发人员工具现在就这样做了。通过单击每个元素显示右侧的“ev”按钮显示事件，包括<head>和<script>
(function(w){
var originalAdd = w.addEventListener;
w.addEventListener = function(){
// add your own stuff here to debug
return originalAdd.apply(this, arguments);
};
var originalRemove = w.removeEventListener;
w.removeEventListener = function(){
// add your own stuff here to debug
return originalRemove.apply(this, arguments);
};
})(window);
</script>
事件。
如果你有jQuery，你可以使用DOM在任何javascript标量，数组或对象的控制台日志中打印一个漂亮的树。
尝试：
Firebug
要么
console.dir(object or array)Opera 12（不是最新的Chrome Webkit引擎）console.dir(clickEvents);
已经有一段时间了，显然在DOM结构中显示。在我看来，它是一个优秀的调试器，是我仍然使用基于Opera 12的版本的唯一原因（没有v13，v14版本和基于v15 Webkit仍然缺乏Dragonfly）
基于console.dir(window);
的完全工作解决方案 - 表现得像来自控制台的Dragonfly：
（有一个重复的小错误。无论如何它都没有破坏。）
answer by Jan Turon
用法：
getEventListeners() - 返回事件侦听器列表，如果设置了name，则返回该事件的侦听器数组
(function() {
Element.prototype._addEventListener = Element.prototype.addEventListener;
Element.prototype.addEventListener = function(a,b,c) {
if(c==undefined)
c=false;
this._addEventListener(a,b,c);
if(!this.eventListenerList)
this.eventListenerList = {};
if(!this.eventListenerList[a])
this.eventListenerList[a] = [];
//this.removeEventListener(a,b,c); // TODO - handle duplicates..
this.eventListenerList[a].push({listener:b,useCapture:c});
};
Element.prototype.getEventListeners = function(a){
if(!this.eventListenerList)
this.eventListenerList = {};
if(a==undefined)
return this.eventListenerList;
return this.eventListenerList[a];
};
Element.prototype.clearEventListeners = function(a){
if(!this.eventListenerList)
this.eventListenerList = {};
if(a==undefined){
for(var x in (this.getEventListeners())) this.clearEventListeners(x);
return;
}
var el = this.getEventListeners(a);
if(el==undefined)
return;
for(var i = el.length - 1; i >= 0; --i) {
var ev = el[i];
this.removeEventListener(a, ev.listener, ev.useCapture);
}
};
Element.prototype._removeEventListener = Element.prototype.removeEventListener;
Element.prototype.removeEventListener = function(a,b,c) {
if(c==undefined)
c=false;
this._removeEventListener(a,b,c);
if(!this.eventListenerList)
this.eventListenerList = {};
if(!this.eventListenerList[a])
this.eventListenerList[a] = [];
// Find the event in the list
for(var i=0;i<this.eventListenerList[a].length;i++){
if(this.eventListenerList[a][i].listener==b, this.eventListenerList[a][i].useCapture==c){ // Hmm..
this.eventListenerList[a].splice(i, 1);
break;
}
}
if(this.eventListenerList[a].length==0)
delete this.eventListenerList[a];
};
})();
- 删除所有事件侦听器，如果设置了name，则只删除该事件的侦听器
原型1.7.1方式
someElement.getEventListeners([name])有很好的someElement.clearEventListeners([name])：
function get_element_registry(element) {
var cache = Event.cache;
if(element === window) return 0;
if(typeof element._prototypeUID === 'undefined') {
element._prototypeUID = Element.Storage.UID++;
}
var uid = element._prototypeUID;
if(!cache[uid]) cache[uid] = {element: element};
return cache[uid];
}
（主题jQuery Events extension）
我试图在jQuery 2.1中这样做，并使用“
我意识到只有$ ._ data（）函数适用于我的情况：
source
$().click() -> $(element).data("events").click;更改这些函数将允许您记录添加的侦听器：
$(document).ready(function(){
var node = $('body');
// Bind 3 events to body click
node.click(function(e) { alert('hello'); })
.click(function(e) { alert('bye'); })
.click(fun_1);
// Inspect the events of body
var events = $._data(node[0], "events").click;
var ev1 = events[0].handler // -> function(e) { alert('hello')
var ev2 = events[1].handler // -> function(e) { alert('bye')
var ev3 = events[2].handler // -> function fun_1()
$('body')
.append('<p> Event1 = ' + eval(ev1).toString() + '</p>')
.append('<p> Event2 = ' + eval(ev2).toString() + '</p>')
.append('<p> Event3 = ' + eval(ev3).toString() + '</p>');
});
function fun_1() {
var txt = 'text del missatge';
alert(txt);
}阅读其余的听众
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
</body>我最近正在处理事件，并希望查看/控制页面中的所有事件。看了可能的解决方案之后，我决定采用自己的方式创建一个自定义系统来监控事件。所以，我做了三件事。
首先，我需要一个容器用于页面中的所有事件监听器：这是theEventTarget.prototype.addEventListener
EventTarget.prototype.attachEvent
EventTarget.prototype.removeEventListener
EventTarget.prototype.detachEvent
对象。它有三种有用的方法：console.log(someElement.onclick);
console.log(someElement.getAttribute("onclick"));
，EventListeners和add()。
接下来，我创建了一个remove()对象来保存事件的必要信息，即：get()，EventListener，target，type，callback，options，并添加了一个方法useCapture来移除侦听器。
最后，我扩展了原生的wantsUntrusted和remove()方法，使它们与我创建的对象（addEventListener()和removeEventListener()）一起工作。
用法：
EventListenerEventListeners创建了一个var bodyClickEvent = document.body.addEventListener("click", function () {
console.log("body click");
});
// bodyClickEvent.remove();
对象，将其添加到addEventListener()并返回EventListener对象，因此可以在以后删除它。
EventListeners可用于查看页面中的侦听器。它接受EventListener或字符串（事件类型）
以上是关于如何在调试时或从JavaScript代码中在DOM节点上查找事件侦听器？的主要内容，如果未能解决你的问题，请参考以下文章
在我的 UpdatePanel 完成加载其 DOM 元素后，如何从我的代码隐藏中执行 JavaScript？
如何使用javascript从dom中获取点击位置的图片网址？