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?

Answer 1

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...

Answer 2

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.

Answer 3

<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>