How can i check if a JavaScript-Eventhandler has been set?

Question

I've got a JavaScript-function that sets the "onclick"-event of some HTML-Nodes - even if that "onclick"-event has been set before.

How can i check if that event has already been set, so I can extend my function to set the event only on HTML-Nodes where it has not already been set?

score 18 · Accepted Answer · answered Jun 10 '09 at 15:30

18

Check, like this:

if(typeof someNode.onclick == "function") {
   // someNode has an event handler already set for the onclick event...
}

By the way, if you are using a library, you should say so - if you are, it might be easier/cleaner and would differ based on which library you are using...

answered Jun 10 '09 at 15:30

Jason Bunting

58,249
14
102
93

And, if developer uses something like: button.addEventListener('click', buttonPressed, true); in Mozilla? – Jun 10 '09 at 15:33
10

this will not work for event handlers set using attachEvent or addEventListener. – Jonathan Fingland Jun 10 '09 at 15:34
I am aware of that, but since the OP didn't specify how he is wiring things up, I assumed the DOM 0 method of doing so. – Jason Bunting Jun 10 '09 at 15:38
3

By the way, this *is* a wiki - feel free to edit my response and add more robust code... :P – Jason Bunting Jun 10 '09 at 15:38
.onclick does not appear to work the same as .mouseenter :( – john k Oct 26 '14 at 02:43
1

@johnktejik You are mossing an `on`. Make it `.onmouseenter`. – aaaaaaaaaaaa Nov 16 '14 at 13:13

joeytwiddle · Answer 2 · 2016-09-19T06:19:00.143

It should be possible to detect event handlers attached using <element>.addEventListener() by intercepting calls to the function:

var myListOfAddedEvents = [];

var realAddEventListener = HTMLElement.prototype.addEventListener;

HTMLElement.prototype.addEventListener = function(evtType,fn,cap) {
    myListOfAddedEvents.push(
        {on: this, type: evtType, handler: fn, capture: cap}
    );

    return realAddEventListener.apply(this, arguments);
};

Note: That is untested code and may need some work. I'm hoping this same function will be used by all element types, but I could be wrong. Also it will only work if you can run this bit of code before they start adding events. A copy for attachEvent could be constructed similarly.

You may want to combine this with Jason Bunting's technique. Because there are two ways to register event handlers, we need to use two different techniques to find them! — joeytwiddle, Aug 29 '15 at 09:02

score 1 · Answer 3 · answered Jun 10 '09 at 15:32

1

<input type="button" id="foo" name="foo" value="bar" />

<script type="text/javascript">
    alert(document.getElementById('foo').onclick); //undefined
</script>

So what you want to do is something like this:

<script type="text/javascript">
    if (undefined == document.getElementById('foo').onclick)
    {
        // Add event handler
    }
</script>

answered Jun 10 '09 at 15:32

Philippe Gerber

17,457
6
45
40

10

this will not work for event handlers set using attachEvent or addEventListener. – Jonathan Fingland Jun 10 '09 at 15:34

How can i check if a JavaScript-Eventhandler has been set?

3 Answers3

Linked