检查元素是否具有事件侦听器.没有jquery

Question

检查元素是否具有事件侦听器.没有jquery

如何检查一个元素是否有事件监听器,如果我在其上使用内联函数,如下面的代码.因为我有一个函数可以调用函数并添加事件监听器,但它会导致重复事件监听器导致它触发一个函数两次.所以如何检查它,以便我可以阻止它添加一个事件监听器,如果它已经存在.谢谢!:d

for (var a = 0;a<formFieldInput.length;a++) {
            if(formFieldInput[a].hasAttribute("name") && formFieldInput[a].attributes.title.value !== "Valid Until") {
                formFieldInput[a].addEventListener("click",function(event) {
                    toggleFieldList(event,"show");
                });
            }

Run Code Online (Sandbox Code Playgroud)

Answer 1

Rya*_*ner 55

没有JavaScript功能来实现这一目标.但是,您可以true在添加侦听器时以及false删除它时设置布尔值.然后在可能添加重复事件侦听器之前检查此布尔值.

可能重复:如何检查动态连接的事件监听器是否存在？

它是如此奇怪的JavaScript不告诉你!我觉得这很奇怪. (16认同)
@vsync这不是一个JavaScript问题,它是一个浏览器功能以及它们如何管理DOM.如果浏览器要处理这样的检查,那可能与Ryan Warner所说的类似. (2认同)

Answer 2

aru*_*ian 55

在Chrome Dev Tools控制台上的这一天,您可以快速执行下面的此功能,以显示已附加到元素的所有事件侦听器.

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

Run Code Online (Sandbox Code Playgroud)

@Anthony 正如我上面提到的，它只适用于 Chrome 开发工具 (4认同)
请修正此答案中的语法。我已批准编辑。然后，发帖人修改了我的一项更改，并拒绝了另一项语法修正。“今天”在语法上不正确。发布者修改了答案后，我尝试再次修正此更改，但第二次编辑被拒绝，即使它的内容与原始编辑中所批准的内容相同。 (3认同)
这个解决方案是跨浏览器还是只是chrome？ (2认同)

Answer 3

Ron*_*ton 30

你不需要.只需按照自己的意愿,可以随心所欲地拍打它.MDN解释了相同的事件监听器:

如果在具有相同参数的同一EventTarget上注册了多个相同的EventListener,则会丢弃重复的实例.它们不会导致EventListener被调用两次,并且不需要使用该removeEventListener 方法手动删除它们.

对于等效函数_references_,这可能是正确的,但不是相同的函数.`addEventListener(function(){alert('x');}); addEventListener(function(){alert('x');});`将两次警告`x`. (39认同)
这才是真正的答案！ (3认同)
@RonnieRoyston 请重写您的答案，以便它发出警告而不是鼓励，并注意 Charles 和 David 的评论，因为人们可能不知道这些，并且可能不会阅读细则，从而导致低质量的代码 (3认同)
值得注意的是，正如 @CharlesStover 提到的，上面的文章还指出：注意，但是，当使用匿名函数作为处理程序时，此类侦听器将不相同，因为即使使用相同的不变源定义，匿名函数也不相同 -即使在循环中，代码也只是重复调用。这解释了我所看到的行为。 (2认同)
注意：如果您在 addEventListener 中的 *named* 函数上使用 .bind()，这将不起作用 (2认同)

归档时间：	10 年，11 月前
查看次数：	99129 次
最近记录：	6 年，5 月前