如何找到添加自定义事件侦听器的位置？

Question

There is a 3rd party piece of code running in a "friendly" iframe on a page. The code may or may not have added a listener for one of it's own custom events to any element on the outer page, or in one of the iframes somewhere on the page (either on their window, document or dom elements).

I know the name of the custom event, but how can I tell where the listener has been added?

Answer 1

Here's one option - override the standard implementation:

 var addEventListenerImplementation = Node.prototype.addEventListener; Node.prototype.addEventListener = function (event, callback) { alert("Hey, someone attached an event handler to me"); addEventListenerImplementation.call(this, event, callback); }; document.getElementById("div").addEventListener("click", function () { alert("clicked"); });

 div { background: red; width: 300px; height: 300px; }

 <div id="div"/>

This should work in most cases but unfortunately addEventListener isn't the only way to attach events so you might need to also override Event.prototype.observe . Lastly, if the event handler is attached using element.onclick or any other onevent function you can't really override them. One possible though super-messy solution would be the following:

1. Define a new property on Node.prototype . Object.defineProperty(Node.prototype, "ONMYCLICK", function () { get: function () { return null; }, set: function (handler) { console.log("Hey, a handler was attached!"); this.onclick = handler; } });
2. Open the library's script in your favourite text editor and replace all occurences of .onclick with .ONMYCLICK
3. ???
4. Profit