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

javascript dom-events addeventlistener testing

2022-08-30 01:27:58

这是我的问题：是否有可能以某种方式检查动态附加的事件侦听器是否存在？或者，如何检查 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就在这里。如果单击“为 2 添加 onclick”，然后单击“[链接 2]”，则事件会很好地触发，但“测试链接 2”始终报告错误。有人可以帮忙吗？

答案 1

我做了这样的事情：

const element = document.getElementById('div');

if (element.getAttribute('listener') !== 'true') {
     element.addEventListener('click', function (e) {
         const elementClicked = e.target;
         elementClicked.setAttribute('listener', 'true');
         console.log('event has been attached');
    });
}

在附加侦听器时为元素创建一个特殊属性，然后检查它是否存在。

答案 2

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

查看事件侦听器是否已附加的唯一方法是附加事件侦听器，如下所示：

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

然后，您可以通过返回（或类似的东西）来测试事件侦听器是否已附加到该事件侦听器。onclick!!elem.onclick