DOM - Click Event (OnClick)

Devtool Chrome Event Listener

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>

Click Position / Location

A click event is a click Pointer event definition and have the following properties:

  • MouseEvent.screenX : value based on the pointer position on the screen
  • MouseEvent.screenY : value based on the pointer position on the screen
  • MouseEvent.clientX : value based on the pointer position within the viewport
  • MouseEvent.clientY : value based on the pointer position within the viewport
  • The Javascript
document.addEventListener("click", 
    function (event) { 
        event.preventDefault(); // don't navigate away
        console.log(`(screenX, screenY):(${event.screenX}, ${event.screenY})`); 
        console.log(`(clientX, clientY):(${event.clientX}, ${event.clientY})`); 
    }
);
  • The HTML
<p style="max-width:300px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum purus, bibendum sit amet vulputate eget, porta semper ligula. Donec bibendum vulputate erat, ac fringilla mi finibus nec. Donec ac dolor sed dolor porttitor blandit vel vel purus. Fusce vel malesuada ligula. Nam quis vehicula ante, eu finibus est. Proin ullamcorper fermentum orci, quis finibus massa. </p>
  • Click Anywhere on the document to see the locations of the click

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>





Discover More
Card Puncher Data Processing
Ad - Click

Click event Click tag allow the ad server to track ad clicks, and they define the click-through URLs within the HTML5 creative.
Card Puncher Data Processing
Ad - Log (Web Log)

An ad server produces two types of log files: impression logs (Every time the server displays an advertisement to a customer, it adds an entry to the impression log) and click logs (Every time a customer...
Bootstrap - Tab

tab in Bootstrap are composed of: two HTML elements: the triggers element: the navigational tab that are clicked the target element: the pane that contains the content a javascript object instance...
Card Puncher Data Processing
Click Through Rate is the number of click that have happen after a user has seen a page

CTR is an important metrics of engagement and is used in several marketing domain to analyse the efficiency of a process
Class Html Beauty Blue Added
DOM - Class attribute

manipulation in the DOM. API The DOM Web API has a special function to select on class: the getElementsByClassName() function one You can select the class with a selector With Native Javascript...
Devtool Chrome Event Listener
DOM - Event

This section is the management of action in the Document object model (ie in the browser) An event allows for signaling that something has occurred, e.g., that an image has completed downloading. Event...
Devtool Chrome Event Listener
DOM - Event Callback Function (Attach function to Event)

An event callback is a callback function that is executed when a event is fired. The Event callback function can be added / defined through: the setting of an event handler on.... such as onclick ...
DOM - Event Delegation

Event delegation in the DOM
DOM - Event Propagation (known as Event Bubbling)

event propagation is a mechanism in which an event is propagated to all its ascendant (ancestore). Event bubbles or propagates up the DOM tree: it starts with where the event happened, and then goes up...
Devtool Chrome Event Listener
DOM - Event Type (name)

An event is categorize by its type which is a property of the event object The type of an event is also known as the name of the event (Ref)...



Share this page:
Follow us:
Task Runner