getEventListeners
getEventListeners copied to clipboard
React events support
I noticed React events are not supported by getEventListeners.js. For example on some websites, by checking events in Firefox inspector, we can see Firefox recognizes it as a React event by adding the label "React". I searched for codepens with React events to try to reproduce the issue and found this one containing the following code.
HTML code:
<div id='root'></div>
JavaScript code:
class Event extends React.Component{
clickMe() {
alert("You clicked me");
}
dontClickMe() {
alert("dont click me");
}
render() {
return (
<div>
<h1>Click buttons to see effect:</h1>
<button onClick={this.clickMe} >Click Me</button>
<button onClick={this.dontClickMe}>Don't Click Me</button>
</div>
);
}
}
ReactDOM.render(<Event />,document.getElementById("root"));
I tried removing the click event with the clickMe function by doing this:
- Install Tampermonkey or Violentmonkey addon (since Greasemonkey does not support iframes, note that Tampermonkey is not open source: https://stackoverflow.com/questions/37616818/apply-a-greasemonkey-tampermonkey-userscript-to-an-iframe/37624206#37624206)
- Inject getEventListeners.js with a user script like mentioned in another comment I wrote: https://github.com/colxi/getEventListeners/issues/1#issuecomment-1320197573
- Try to remove the event, for example on the codepen shared above, you must first switch to the frame in Firefox console on the right of where you type the code by clicking on "Top" and changing it to the other window name. Then you can execute these commands:
var el = document.getElementsByTagName("button")[0];
el.removeEventListener("click", el.getEventListeners().click[0].listener);
The last command will fail because React events are not supported (we can see no events are listed when executing only el.getEventListeners()).
However if I a DOM event is added:
el.addEventListener("click", function(){alert("hack");});
The removeEventListener command above will work to remove the DOM event.
Is there a way to support React events in getEventListeners.js or do you recommend another solution? I did not test with other frameworks like Angular but there may be an issue also.