With buttons, I can call the click() method on them to have a click generated. DIVs however don't have this method on all browsers. Yet I can attach click event listeners to them (by either setting .onclick="..." or adding an event listener).

Is there any way for me to "synthesize" a click on such an element programmatically, but without using jQuery? Ideally this will not be dependent on a specific way of the listeners being registered (so simply calling eval(div.onclick) will not work for me), and work in all modern browsers.

(For the curious, I need this for automated testing, not tricking users.)

With buttons, I can call the click() method on them to have a click generated. DIVs however don't have this method on all browsers. Yet I can attach click event listeners to them (by either setting .onclick="..." or adding an event listener).

Is there any way for me to "synthesize" a click on such an element programmatically, but without using jQuery? Ideally this will not be dependent on a specific way of the listeners being registered (so simply calling eval(div.onclick) will not work for me), and work in all modern browsers.

(For the curious, I need this for automated testing, not tricking users.)

• javascript
• dom
• browser
• dom-events

• If click doesn't work, then using onmousedown/onmouseup can be used as a workaround. Without either of those, the standard drag 'n drop libraries wouldn't work. – Marc B Commented Mar 1, 2011 at 20:17
• So - let me get this straight - you want cross browser javascript - and do not want to use jQuery? You are either setting yourself up for failure or a lot of hard work. – wiifm Commented Mar 1, 2011 at 20:19
• why is eval(div.onclick) not working for you? – Kris Ivanov Commented Mar 1, 2011 at 20:31
• @wiifm No he is not, it is not difficult either. People rely way too heavily on jQuery. If you did a bit of research you would find a cross browser implementation that takes no more than nine short lines. – Olical Commented Mar 1, 2011 at 20:37
• 1 @wiifm There could be a million of legitimate reasons NOT to use it. My question, after all, was not "Should I use jQuery if I want to...". – levik Commented Mar 1, 2011 at 21:17

2 Answers 2

I recently wrote a function to do just this into my library, it can be found in the GitHub repository here.

It is pletely cross browser and triggers the specified event on the elements returned by the selector engine. I am sure you will be able to extract the code you need from it.

If not, here is what you need. Replace element with, well, the element. And type with the type of event, in this case, click.

// Check for createEventObject
if(document.createEventObject){
    // Trigger for Internet Explorer
    trigger = document.createEventObject();
    element.fireEvent('on' + type, trigger);
}
else {
    // Trigger for the good browsers
    trigger = document.createEvent('HTMLEvents');
    trigger.initEvent(type, true, true);
    element.dispatchEvent(trigger);
}

Here is an example implementation.

function simulateEvent(element, type) {
    // Check for createEventObject
    if(document.createEventObject){
        // Trigger for Internet Explorer
        trigger = document.createEventObject();
        element.fireEvent('on' + type, trigger);
    }
    else {
        // Trigger for the good browsers
        trigger = document.createEvent('HTMLEvents');
        trigger.initEvent(type, true, true);
        element.dispatchEvent(trigger);
    }
}

If your browser is DOM patible you can use the dispatchEvent(evt) method of the DIV element.

For more see the dom w3c spec.