有没有办法在javascript中获取所有事件监听器绑定?

hel*_*lle 7 javascript debugging javascript-events

我正在寻找一种方法,我可以在网站上列出所有使用JS(或其他脚本)制作的事件监听器绑定.主要是我想找出双重绑定(出于调试原因),但我想还有其他问题.

辉煌将成为浏览器的插件,你可以在网站上看到哪些元素具有哪种类型的eventlisteners绑定.你知道,事件监听器的一些可视化......

感谢链接,脚本和评论;-)

Cai*_*aio 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)}
Run Code Online (Sandbox Code Playgroud)

你也可以看看这个答案。无论如何,我为你做了一个功能:

<!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>
Run Code Online (Sandbox Code Playgroud)