Trigger a button click from a non-button element

Question

How would you trigger a click event from an element that supposedly does not have native clickable behaviours?

For example, I know that you could simply just use the following:

document.getElementById('x').click();

But what happens if 'x' is a 'DIV'? I have an implementation, and it doesn't seem to trigger... I get the error (chrome 12):

Uncaught TypeError: Object #<HTMLDivElement> has no method 'click'

Ideas?

Quick Edit - I'm looking for vanilla JS here... I like reinventing the wheel in my image... :-)

Answer 1

For classic clickable elements like buttons or links, click() should work in all browsers. However for other elements like divs, you need onclick() in some browsers and click() in others.

I would strongly recommend that instead of trying to figure this out for yourself, you use a javascript library such as MooTools, jQuery, Prototype, YUI, or many others. The reason is that getting this stuff right cross-browser is hard. Why waste your time when others have worked and worked to get it right and make it super simple to use? I guarantee that if you spend your time learning how to use a framework you will get farther in your javascript development skill faster. Later you can come back and see how it's all done in the nitty gritty if you want to.

That said, here's script that will work cross-browser, and will do nothing if neither of these properties have a function assigned:

el = document.getElementById('id');
if (el.onclick) {
   el.onclick();
} else if (el.click) {
   el.click();
}

You could also do this, but perhaps this is a little less clear:

(el.onclick || el.click || function() {})();

Some empirical tests firing the click event on a div:

• Firefox 3 and 4 use onclick.
• IE7, 8 use both.
• Chrome uses onclick (as checked in v. 12.0.742.100).
• Safari on iPhone 4 with iOs 4.2.1 uses onclick.

Test script:

var d = document.createElement('div'); d.style.position = 'absolute'; d.style.top = '0'; d.style.left = '0'; d.style.width = '200px'; d.style.height = '200px'; d.style.backgroundColor = '#fff'; d.style.border = '1px solid black'; d.onclick = function() {alert('hello');}; document.body.appendChild(d);

Run this in developer tools in your browser, or javascript: in front and void(0); at the end then paste into the address bar and hit Enter. Then try d.click() and d.onclick(). You can click the div itself to prove it works with real clicks too.

Answer 2

Use this if you actually want to trigger an event programmatically:

function eventFire(el, etype){
  if (el.fireEvent) {
   (el.fireEvent('on' + etype));
  } else {
    var evObj = document.createEvent('Events');
    evObj.initEvent(etype, true, false);
    el.dispatchEvent(evObj);
  }
}
//usage
eventFire(document.getElementById('x'),'click');