DOM - Event Object (Callback function parameter)

Devtool Chrome Event Listener


A event callback function may have a parameter specified with a name such as event, evt, or simply e. This is the event object, and it is automatically passed to the callback function to provide extra features and information.

The target property of the event object is always a reference to the element that the event has just occurred upon.


The target attribute of an object event represents the element where the event was fired.


var btn = document.querySelector('button');

function bgChange(e) {
  var rndCol = 'rgb(' + Math.round(Math.random()*255) + ',' + Math.round(Math.random()*255) + ',' +Math.round(Math.random()*255) + ')'; = rndCol;

btn.addEventListener('click', bgChange);
<button class="btn btn-info">Poke me</button>


HTML - Data attributes

document.body.addEventListener('click', (event) => {
    if ( {
        console.log('The target element has a data-echo attribute. Hello '' !')
    } else {
       console.log('The target element has NOT a data-echo attribute')
<div data-echo="nico">Click Me to Hello Nico</div>
<div >Click Me to see that there is no data attribute</div>

Discover More
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 ...
Devtool Chrome Event Listener
Event - Fire

Firing an event means to: create the event object and dispatch it to start the propagation through the registered callback function The firing is done by the user agent (ie the browser) via the...

Share this page:
Follow us:
Task Runner