How do you catch a click event with plain Javascri

Question

I know that when using jQuery you can do $('element').click(); to catch the click event of an HTML element, but how do you do that with plain Javascript?

Answer 1

I would recommend going with addEventListener instead of assigning the handler function directly.

var div = document.getElementById('test');
div.addEventListener('click', function(){ 
    console.log('CLICKED');
});

There are several reasons for that by I am going to name those I find the most important:

1. You can't mistakenly add event listener to a non-DOM object with addEventListener - your code would fail instead of quietly assigning onclick function to some object
2. You can attach only one (without additional code manipulation for every handler that you want to add) event listener with onclick - something that might prove limiting

Answer 2

document.getElementById('element').onclick = function(e){
  alert('click');
}

DEMO: http://jsfiddle.net/e9jZW/1/

Answer 3

By adding an event listener or setting the onclick handler of an element:

var el = document.getElementById("myelement");

el.addEventListener('click', function() {
  alert("Clicked");
});

// ... or ...

el.onclick = function() {
  alert("Clicked");
}

Note that the even listener style allows multiple listeners to be added whereas the callback handler style is exclusive (there can be only one).

If you need to add these handlers to multiple elements then you must acquire them as appropriate and add them to each one separately.

Answer 4

I usaly create a kind of global event handler, very powerful, you can capture className, of the event "types" nodeTypes, you name it, i hope people will find this useul

document.onclick = eventRef

function eventRef(evt) {
    var han;
    evt || (evt = window.event);

    if (evt) {
        var elem = evt.target ? han = evt.target : evt.srcElement && (han = evt.srcElement);

         // evt.type could be, mouseup, mousedown...
        // elem.id is the id or the element
        // elem.className is the class name of the element
        // you could nest expression, use substrings to extract part of a className
        if (evt.type=="click" && elem.id == "gotit" || elem.className == "someClassName") {  
            alert(elem.id);
        }
    }
}

Answer 5

Here is an interesting article about that, i used the same approach some times, basically, you add the event handler to window. http://mislav.uniqpath.com/js/handling-events-on-elements/