Есть ли способ получить все привязки прослушивателя событий в JavaScript? - PullRequest
Новая
       25

Есть ли способ получить все привязки прослушивателя событий в JavaScript?

7 голосов
/ 14 марта 2011

Я ищу способ, которым я могу перечислить все привязки прослушивателей событий , которые сделаны с помощью JS (или других скриптов) на веб-сайте.В основном я хочу выяснить двойные привязки (по причине отладки), но я думаю, что есть и другие проблемы для этого.

brilliant будет плагином для браузера, где вы можетеПосмотрите на веб-сайте, какие элементы имеют какие виды списков событий связаны.Вы знаете, некоторая визуализация слушателей событий ...

спасибо за ссылки, скрипты и комментарии; -)

Ответы [ 3 ]

4 голосов
/ 22 октября 2012

Визуальное событие (http://www.sprymedia.co.uk/article/Visual+Event+2) очень полезно. Перейдите на эту страницу и просто перетащите ссылку «Визуальное событие» на панель закладок. Если вы хотите проверить страницу, просто нажмите на нее, подождите секунду, и события для каждого элемента будут накладываться на страницу.

2 голосов
/ 16 марта 2011

Есть только один тип объявления события, которое вы получите, я не знаю, поможет ли это вам: 

// 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>
1 голос
/ 10 июня 2015

Я только что написал сценарий, который позволяет вам достичь этого. Он дает вам две глобальные функции: 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)}();
...