DOM - Click Event (OnClick)

About

1001 ways to handle a the click event.

The click event occurs when the pointing device button is clicked over an element.

The onclick on attribute may be used with most elements.

Example

Event Listener

The DOM - Event Listener function and preventing the click to navigate away

  • The Javascript
var element = document.querySelector('a');
element.addEventListener("click", 
    function (event) { 
        event.preventDefault(); // don't navigate away
        console.log('Ouch! Stop poking me!'); 
    }
);
  • The HTML
<a href="#">Poke me!</a>

OnClick Event handler Property

DOM - Event handler

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