How to override an event in JavaScript whatever the library previously used to bind it?

Question

I'm trying the greasemonkey extension for Firefox in order to override some JavaScript events on the websites I visit.

For instance, I want to display a message when the blur event has been bound to the window element, whatever the page I visit.

I thought it was pretty easy. But it is much harder to make this working on every case, because depending on the library the website uses, the JavaScript events seems to be stored in different places.

Here is a test I have made in a greasemonkey user script :

window.onload = function(event) {    
    // Handle pure JS
    if (window.onblur) {
       console.log('There is a blur event on the window element of this page');
    }
    
    // Handle jQuery
    if (window.jQuery) {
        var jExpando = window[window.jQuery.expando];
    
        if (jExpando.events.blur) {
            console.log('There is a blur jQuery event on the window element of this page');
        }
    }
}

This works on every page that uses pure JavaScript or jQuery, but I'm not able to catch blur events listeners of other libraries such as Mootools, Prototype...

Thus, this is pretty bad code, considering I have to handle all the existing JavaScript libraries myself and I have no idea how to do that.

Is there a way to get all event listeners bind on a specific JavaScript object (whatever the library used to attached them) so I can override some of them?

possible duplicate of [Inspect attached event handlers for any DOM element](http://stackoverflow.com/questions/2623118/inspect-attached-event-handlers-for-any-dom-element) — m90, Sep 04 '13 at 12:59
Do you actually need the event listeners or is the idea just to do something before/instead of the page's event listener code? Also note that `eval` is not good in general and could lead to security elevation when using greasemonkey. `var jExpando = window[window.jQuery.expando];` — pedro_sland, Sep 04 '13 at 13:00

score 2 · Accepted Answer · edited Apr 03 '23 at 18:04

2

Most libraries use addEventListener, so you'll want to override that with a function of your own. Be sure to keep a reference to the original addEventListener method so the events can still be added.

I have an example Greasemonkey script here: https://userscripts-mirror.org/scripts/show/174829

It will listen to all events and tell you which ones were added. Obviously, you can modify this to make 'blur' events not register.

edited Apr 03 '23 at 18:04

scryptonight

36
8

answered Sep 04 '13 at 13:00

Joe Simmons

1,828
2
12
9

1

I like it. Do you need `element.cloneNode(false)` though? – pedro_sland Sep 04 '13 at 13:12
Nah, that's just debug stuff, to tell you what element it was added to. The `cloneNode(false)` is just a way to tell you which element it was without showing you each child's html as well. – Joe Simmons Sep 04 '13 at 13:14
ps: This is for addEventListener, but you could override the `window.onblur` as well, the same way. – Joe Simmons Sep 04 '13 at 13:15
1

Ah. Of course. I realised it was for debugging but didn't pick up on the child html bit :). `onblur` is a property so it'd need to be done with setters or checking `onblur` of every dom node unless I've missed something. – pedro_sland Sep 04 '13 at 13:24
Great! It seems to work fine. except it doesn't catch _window_ event listeners. Any ideas about how I can make it work on the _window_ element? – Gui-Don Sep 04 '13 at 14:14
@pedro_sland: Yeah, probably a setter is the way to go. @ Archaygo: Ah, a flaw in my coding. Yeah, I guess it wasn't catching window events. Check the script page now; it should :) – Joe Simmons Sep 04 '13 at 16:50

How to override an event in JavaScript whatever the library previously used to bind it?

1 Answers1