首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何检查动态附加事件监听器是否存在?

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

Stack Overflow用户
提问于 2012-07-12 23:42:02
回答 20查看 241K关注 0票数 158

这就是我的问题:有没有可能检查是否存在动态附加的事件侦听器?或者我如何检查"onclick“的状态(?)DOM中的属性?我已经像Stack Overflow一样在互联网上搜索了一个解决方案,但没有运气。下面是我的html:

代码语言:javascript
运行
复制
<a id="link1" onclick="linkclick(event)"> link 1 </a>
<a id="link2"> link 2 </a> <!-- without inline onclick handler -->

然后在Javascript中,我将动态创建的事件侦听器附加到第二个链接:

代码语言:javascript
运行
复制
document.getElementById('link2').addEventListener('click', linkclick, false);

代码运行良好,但我尝试检测附加的侦听器都失败了:

代码语言:javascript
运行
复制
// 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 is here。如果您单击"Add onclick for 2",然后单击"link 2“,事件会触发良好,但"Test link 2”总是报告false。有人能帮帮忙吗?

EN

Stack Overflow用户

发布于 2018-09-30 01:40:46

似乎没有跨浏览器的功能来搜索在给定元素下注册的事件。

但是,可以使用开发工具在某些浏览器中查看元素的回调函数。在尝试确定网页的功能或调试代码时,这可能很有用。

Firefox

首先,在开发人员工具中的Inspector选项卡中查看元素。可以这样做:

通过右键单击网页上要检查的项目并从菜单中选择“

  • ”,在页面上查看元素。通过使用函数选择元素(如document.querySelector ),然后单击元素旁边的图标以在检查器选项卡中查看该元素,从而在控制台中进行

如果向元素注册了任何事件,您将在元素旁边看到一个包含单词Event的按钮。单击它将允许您查看已向该元素注册的事件。单击事件旁边的箭头可以查看该事件的回调函数。

Chrome

首先,在开发人员工具的Elements选项卡中查看元素。可以这样做:

在页面上显示,方法是:右键单击网页上要检查的项目,然后使用选择元素的功能(如document.querySelector )从控制台的

  • 菜单中选择" inspect“,右键单击该元素,然后选择”Inspect in Elements

  • “以在检查器选项卡中查看该元素。

在显示包含网页元素的树的窗口部分附近,应该有另一个带有标题为"Event Listeners“的选项卡的部分。选择它可以查看注册到该元素的事件。要查看给定事件的代码,请单击该事件右侧的链接。

在Chrome中,元素的事件也可以使用getEventListeners函数找到。但是,根据我的测试,当向getEventListeners函数传递多个元素时,它不会列出事件。如果要查找页面上具有侦听器的所有元素并查看这些侦听器的回调函数,可以在控制台中使用以下代码来实现:

代码语言:javascript
运行
复制
var elems = document.querySelectorAll('*');

for (var i=0; i <= elems.length; i++) {
    var listeners = getEventListeners(elems[i]);

    if (Object.keys(listeners).length < 1) {
        continue;
    }

    console.log(elems[i]);

    for (var j in listeners) {
        console.log('Event: '+j);

        for (var k=0; k < listeners[j].length; k++) {
            console.log(listeners[j][k].listener);
        }
    }
}

如果您知道在给定浏览器或其他浏览器中执行此操作的方法,请编辑此答案。

票数 3
EN
查看全部 20 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/11455515

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档