这是我的问题:是否可以以某种方式检查是否存在一个动态附加的事件侦听器?或者我怎么能在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”总是报告错误。 有人能帮帮我吗?


当前回答

下面是我用来检查是否存在动态附加事件侦听器的脚本。我使用jQuery附加一个事件处理程序到一个元素,然后触发该事件(在本例中是'click'事件)。通过这种方式,我可以检索和捕获仅在附加事件处理程序时才存在的事件属性。

var eventHandlerType;

$('#contentDiv').on('click', clickEventHandler).triggerHandler('click');

function clickEventHandler(e) {
    eventHandlerType = e.type;
}

if (eventHandlerType === 'click') {
    console.log('EventHandler "click" has been applied');
}

其他回答

可以在JavaScript中列出所有事件监听器。您只需破解HTML元素的原型方法(在添加侦听器之前)。

此解决方案仅适用于谷歌Chrome或基于Chrome的浏览器

右键单击元素,选择“inspect”打开Chrome开发工具。 一旦开发工具打开,切换到“事件监听器”选项卡,您将看到所有事件监听器绑定到元素。

例如,你可以使用Chrome检查器手动检查EventListener是否存在。 在元素选项卡中,你有传统的“样式”子选项卡和另一个相邻的“事件监听器”。 它将为您提供所有eventlistener及其链接元素的列表。

如果我理解得很好,你只能检查是否检查了一个听众,而不能检查哪个听众是具体的演示者。

因此,一些特别的代码将填补空白,以处理您的编码流。一种实用的方法是使用变量创建状态。例如,像下面这样附加一个监听器的检查器:

var listenerPresent=false

然后如果你设置了一个监听器,只需要改变这个值:

listenerPresent=true

然后在你的eventListener的回调中,你可以在里面分配特定的函数,以同样的方式,根据某些状态作为变量来分配对函数的访问:

accessFirstFunctionality=false
accessSecondFunctionality=true
accessThirdFunctionality=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;
};

像这样的东西应该有助于文档:

var listeners = window.getEventListeners(document);
Object.keys(listeners).forEach(event => {
    console.log(event, listeners[event]);
});

或者使用选择器:

getAllEventListeners = function(el) {
 var allListeners = {}, listeners;

 while(el) {
  listeners = getEventListeners(el);

  for(event in listeners) {
   allListeners[event] = allListeners[event] || [];
   allListeners[event].push({listener: listeners[event], element: el});  
  }

  el = el.parentNode;
 }

 return allListeners;
}