5

The Inspector of Firefox can list all event listeners attached to specific DOM node from Firefox 33.

Example page:

<!doctype html>
<body>
    <button id="Btn">Test</button>
    <script>
        function TestEventListener(e){
            console.log("handle event");
        }
        var btn = document.querySelector("#Btn");
        if(btn){
            btn.addEventListener("click",TestEventListener,false);
        }
    </script>
</body>
</html>

Then press F12 and select Inspector, click on the small ev tag aside the <button>. enter image description here

  • How did Firefox do that?
  • Did Firefox modified addEventListener from the beginning?

  • Can this be done with native Javascript?

    Like this:

    function GetDOMEventList(node){
    var listenerFunctionsList = [];
    [Magic Moves]
    return listenerFunctionsList; // [func1, func2, func3...]
}
Byzod
  • 466
  • 4
  • 18
  • Firefox would need to store those event listeners somewhere, so that they can be invoked when the event is fired. They might have done it with native code. I think it can be done with js by modifying the addEventListener function, if you want to list the attached listeners. – Bernard Apr 22 '17 at 02:36
  • According to [this SO post](http://stackoverflow.com/questions/9046741/get-event-listeners-attached-to-node-using-addeventlistener), Chrome, Safari, and Firebug have a method called `getEventListeners` to do just such. jQuery also can access any events attached to a node (via jQuery only) but using its `._data` method. – larz Apr 22 '17 at 02:42
  • Review jQuery source code for `jQuery._data(element, "events")`, see [One listener for ALL events in jQuery event namespace?](http://stackoverflow.com/questions/26225987/one-listener-for-all-events-in-jquery-event-namespace/26227362#26227362) – guest271314 Apr 22 '17 at 02:45
  • lots of things can be done in browser core and extensions that can't be done from the window – charlietfl Apr 22 '17 at 02:47

0 Answers0