如何检查动态附加的事件监听器是否存在?

这是我的问题:是否可以以某种方式检查是否存在一个动态附加的事件侦听器?或者我怎么能在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');
}

2014-05-16 16:10:03

其他回答

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

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

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

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

2012-07-12 15:58:14

我要做的是在你的函数外面创建一个布尔值，开始时为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);
 }
}

2013-01-16 18:10:37

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

2021-07-21 16:37:24

可能的重复:检查元素上是否有事件监听器。没有jQuery 请在那里找到我的答案。

下面是Chrome浏览器的基本技巧:

getEventListeners(document.querySelector('your-element-selector'));

2018-07-04 06:52:26

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

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;
}

2021-03-29 19:24:30

如何检查动态附加的事件监听器是否存在?

推荐文章

最新文章

标签