这是我的问题:是否可以以某种方式检查是否存在一个动态附加的事件侦听器?或者我怎么能在DOM中检查“onclick”(?)属性的状态?我已经在互联网上搜索了一个解决方案,就像Stack Overflow,但没有运气。这是我的html:

<a id="link1" onclick="linkclick(event)"> link 1 </a>
<a id="link2"> link 2 </a> <!-- without inline onclick handler -->

然后在Javascript中,我附加了一个动态创建的事件监听器到第二个链接:

document.getElementById('link2').addEventListener('click', linkclick, false);

代码运行良好,但我所有的尝试检测附加的侦听器失败:

// test for #link2 - dynamically created eventlistener
alert(elem.onclick); // null
alert(elem.hasAttribute('onclick')); // false
alert(elem.click); // function click(){[native code]} // btw, what's this?

jsFiddle在这里。 如果你点击“Add onclick for 2”,然后点击“[link 2]”,事件会正常启动, 但是“测试链接2”总是报告错误。 有人能帮帮我吗?


当前回答

似乎没有跨浏览器的函数来搜索在给定元素下注册的事件。

但是,可以使用某些浏览器的开发工具查看元素的回调函数。当试图确定网页的功能或调试代码时,这可能很有用。

火狐

首先,在开发人员工具中的Inspector选项卡中查看元素。这可以做到:

在页面上右键单击要检查的网页项,并从菜单中选择“检查元素”。 在控制台中使用函数来选择元素,例如document。querySelector,然后单击元素旁边的图标在Inspector选项卡中查看它。

如果向元素注册了任何事件,您将在元素旁边看到一个包含单词Event的按钮。单击它将允许您查看已在元素中注册的事件。单击事件旁边的箭头,可以查看该事件的回调函数。

首先,在开发人员工具中的Elements选项卡中查看元素。这可以做到:

在页面上右键单击要检查的网页上的项目,并从菜单中选择“检查” 在控制台中使用函数来选择元素,例如document。querySelector,右键单击元素,选择“在元素面板中显示”,在Inspector选项卡中查看它。

在窗口中显示包含网页元素的树的部分附近,应该有另一个带有标题为“事件监听器”的选项卡的部分。选择它以查看注册到元素的事件。要查看给定事件的代码,请单击事件右侧的链接。

在Chrome中,一个元素的事件也可以使用getEventListeners函数找到。但是,根据我的测试,当多个元素传递给getEventListeners函数时,它没有列出事件。如果你想在页面上找到所有有监听器的元素,并查看这些监听器的回调函数,你可以在控制台中使用以下代码来做到这一点:

var elems = document.querySelectorAll('*');

for (var i=0; i <= elems.length; i++) {
    var listeners = getEventListeners(elems[i]);

    if (Object.keys(listeners).length < 1) {
        continue;
    }

    console.log(elems[i]);

    for (var j in listeners) {
        console.log('Event: '+j);

        for (var k=0; k < listeners[j].length; k++) {
            console.log(listeners[j][k].listener);
        }
    }
}

如果您知道在给定浏览器或其他浏览器中执行此操作的方法,请编辑此答案。

其他回答

我刚刚通过尝试查看我的事件是否附加....发现了这一点

如果你有:

item.onclick

它将返回"null"

但如果你这样做了:

item.hasOwnProperty('onclick')

那么它就是“真”

所以我认为当你使用“addEventListener”来添加事件处理程序时,访问它的唯一方法是通过“hasOwnProperty”。我希望我知道为什么或怎么做,但在研究之后,我还没有找到一个解释。

没有办法检查动态附加的事件侦听器是否存在。

查看事件监听器是否被附加的唯一方法是像这样附加事件监听器:

elem.onclick = function () { console.log (1) }

然后,您可以通过返回!!elem测试事件侦听器是否附加到onclick。点击(或类似的东西)。

var listenerPaste = pasteAreaElm.hasOwnProperty('listenerPaste');
if (!listenerPaste) {
    pasteAreaElm.addEventListener("paste", onPasteEvent, false);
    pasteAreaElm.listenerPaste = true;
}

这种方法不存在,这似乎很奇怪。是时候加入了吗?

如果你想,你可以这样做:

var _addEventListener = EventTarget.prototype.addEventListener;
var _removeEventListener = EventTarget.prototype.removeEventListener;
EventTarget.prototype.events = {};
EventTarget.prototype.addEventListener = function(name, listener, etc) {
  var events = EventTarget.prototype.events;
  if (events[name] == null) {
    events[name] = [];
  }

  if (events[name].indexOf(listener) == -1) {
    events[name].push(listener);
  }

  _addEventListener(name, listener);
};
EventTarget.prototype.removeEventListener = function(name, listener) {
  var events = EventTarget.prototype.events;

  if (events[name] != null && events[name].indexOf(listener) != -1) {
    events[name].splice(events[name].indexOf(listener), 1);
  }

  _removeEventListener(name, listener);
};
EventTarget.prototype.hasEventListener = function(name) {
  var events = EventTarget.prototype.events;
  if (events[name] == null) {
    return false;
  }

  return events[name].length;
};

我要做的是在你的函数外面创建一个布尔值,开始时为FALSE,当你附加事件时被设置为TRUE。在再次附加事件之前,这将作为某种标志。这里有一个关于这个想法的例子。

// initial load
var attached = false;

// this will only execute code once
doSomething = function()
{
 if (!attached)
 {
  attached = true;
  //code
 }
} 

//attach your function with change event
window.onload = function()
{
 var txtbox = document.getElementById('textboxID');

 if (window.addEventListener)
 {
  txtbox.addEventListener('change', doSomething, false);
 }
 else if(window.attachEvent)
 {
  txtbox.attachEvent('onchange', doSomething);
 }
}