logo标签列表

有没有一种方法可以在Javascript中获取所有事件监听器绑定？

javascriptdebuggingdom-events
8
我正在寻找一种方法，可以列出在网站上使用JS（或其他脚本）创建的所有事件监听器绑定。主要是为了查找双重绑定（出于调试原因），但我想还有其他问题。
最好有一个浏览器插件，可以显示网站上哪些元素具有哪些类型的事件监听器绑定。你知道，一些事件监听器的可视化...
2
有类似于jQuery的东西。它是Firebug的扩展，称为Firequery：http://firequery.binaryage.com/，但我不知道它是否也适用于本机JavaScript事件。 - meo
嗯...这是第一步...可能需要时间来适应它。 - helle
3个回答
4

Visual Event（http://www.sprymedia.co.uk/article/Visual+Event+2）非常实用。进入该页面，将“Visual Event”链接拖到书签栏中。当您想要检查一个页面时，只需点击它，等待一秒钟，每个元素的事件都将在页面上叠加显示。

2

你只能使用一种类型的事件声明，我不知道这是否对你有帮助：

// Can't get
myDiv.attachEvent ("onclick", function () {alert (1)});

// Can't get
myDiv.addEventListener ("click", function () {alert (1)}, false);

// Can't get
<div onclick = "alert (1)"></div>

// Can get
myDiv.onclick = function () {alert (1)}

你可以看一下这篇答案。 无论如何，我为您编写了一个函数：
<!DOCTYPE html>

<html>
    <head>
        <script>
            function getAllEvents () {
                var all = document.getElementsByTagName ("*");
                var _return = "";

                for (var i = 0; i < all.length; i ++) {
                    for (var ii in all[i]) {
                        if (typeof all[i][ii] === "function" && /^on.+/.test (ii)) { // Unreliable
                            _return += all[i].nodeName + " -> " + ii + "\n";
                        }
                    }
                }

                return _return;
            }

            document.addEventListener ("DOMContentLoaded", function () {
                var div = this.getElementsByTagName ("div")[0];

                div.onclick = function () {
                    alert (1);
                }

                div.onmouseout = function () {
                    alert (2);
                }

                alert (getAllEvents ());
            }, false);
        </script>

        <style>
            div {
                border: 1px solid black;
                padding: 10px;
            }
        </style>
    </head>

    <body>
        <div></div>
    </body>
</html>
2
我刚刚写了一个脚本，可以让您实现这一点。它提供了两个全局函数：hasEvent(Node elm, String event)和getEvents(Node elm)，您可以利用它们。请注意，它修改了EventTarget原型方法add/RemoveEventListener，不适用于通过HTML标记或javascript语法添加的事件elm.on_event = ...，仅适用于add/RemoveEventListener。

更多信息请参见GitHub

演示

脚本：

var hasEvent,getEvents;!function(){function b(a,b,c){c?a.dataset.events+=","+b:a.dataset.events=a.dataset.events.replace(new RegExp(b),"")}function c(a,c){var d=EventTarget.prototype[a+"EventListener"];return function(a,e,f,g,h){this.dataset.events||(this.dataset.events="");var i=hasEvent(this,a);return c&&i||!c&&!i?(h&&h(),!1):(d.call(this,a,e,f),b(this,a,c),g&&g(),!0)}}hasEvent=function(a,b){var c=a.dataset.events;return c?new RegExp(b).test(c):!1},getEvents=function(a){return a.dataset.events.replace(/(^,+)|(,+$)/g,"").split(",").filter(function(a){return""!==a})},EventTarget.prototype.addEventListener=c("add",!0),EventTarget.prototype.removeEventListener=c("remove",!1)}();
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接