How Do You Catch A Click Event With Plain Javascript?

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?

Solution 1:

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

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

Solution 2:

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.

Solution 3:

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

functioneventRef(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 classNameif (evt.type=="click" && elem.id == "gotit" || elem.className == "someClassName") {  
            alert(elem.id);
        }
    }
}

Solution 4:

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

Solution 5:

Thanks to vanilla js

document.addEventListener('click', function (event) {

// If the clicked element doesn't have the right selector, bailif (!event.target.matches('input')) return;

// Don't follow the linkevent.preventDefault();

// Log the clicked element in the console
console.log(event.target);

}, false);

This also show which element is c