DOM - Click Event (OnClick)

About

1001 ways to handle a onclick event.

The onclick event occurs when the pointing device button is clicked over an element. This attribute may be used with most elements.

Example

Event Listener

The DOM - Event Listener function.

var element = document.querySelector('html');
element.addEventListener("click", function () { console.log('Ouch! Stop poking me!'); }, false);
<p style="border-radius:50%;background:deepskyblue;padding:1rem;display:inline-block">Poke me!</p>

OnClick Event handler Property

DOM - Event Handler (On Attribute or Property Code registration)

document.querySelector('html').onclick = function() {
    console.log('Ouch! Stop poking me!');
}
// Equivalent to
var myHTML = document.querySelector('html');
myHTML.onclick = function() {
   console.log('Equivalent Alert. Stop poking me!');
}
<p style="border-radius:50%;background:deepskyblue;padding:1rem;display:inline-block">Poke me!</p>

Jquery

  • Click method
$( document ).ready(function() {
    $( "a" ).click(function( event ) {
        alert( "Thanks for visiting!" ); 
    });
  • or on
$( document ).ready(function() {
    $( "html" ).on( "click", function( event ) {
        console.log('Ouch! Stop poking me!'); 
    });
});
<p style="border-radius:50%;background:deepskyblue;padding:1rem;display:inline-block">Poke me!</p>

Powered by ComboStrap