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

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

当前回答

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

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

var listenerPresent=false

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

listenerPresent=true

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

accessFirstFunctionality=false
accessSecondFunctionality=true
accessThirdFunctionality=true

2019-05-29 21:00:14

其他回答

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

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

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

2022-03-20 15:39:55

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

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

var listenerPresent=false

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

listenerPresent=true

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

accessFirstFunctionality=false
accessSecondFunctionality=true
accessThirdFunctionality=true

2019-05-29 21:00:14

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

如果你有:

item.onclick

它将返回"null"

但如果你这样做了:

item.hasOwnProperty('onclick')

那么它就是“真”

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

2015-04-29 16:13:31

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

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

2016-05-12 15:12:25

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

推荐文章

最新文章

标签