Tutorial by Examples | RIP Tutorial

Introduction

Definition: In computing, an event is an action or occurrence recognized by software that may be handled by the software. Computer events can be generated or triggered by the system, by the user or in other ways. Definition Source HTML events are "things" that happen to HTML ele...

DOM • Events

Removing event listeners

The removeEventListener() method removes event handlers that have been attached with the addEventListener() method: element.removeEventListener("mousemove", myFunction); Everything (eventname, function, and options) in the removeEventListener must match the one set when adding the even...

DOM • Events

Waiting for the document to load

One of the most commonly used events is waiting for the document to have loaded, including both script files and images. The load event on document is used for this. document.addEventListener('load', function() { console.log("Everything has now loaded!"); }); Sometimes you try to ...

DOM • Events

Event Object

To access the event object, include an event parameter in the event listener callback function: var foo = document.getElementById("foo"); foo.addEventListener("click", onClick); function onClick(event) { // the `event` parameter is the event object // e.g. `event.type`...

DOM • Events

Event Bubbling and Capturing

Events fired on DOM elements don't just affect the element they're targeting. Any of the target's ancestors in the DOM may also have a chance to react to the event. Consider the following document: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </hea...

DOM • Events

Event Delegation

Event delegation is a process which allow us to avoid adding event listeners to specific nodes; instead, the event listener is added to parent node. This mechanism utilizes the event propagation/bubbling to handle an event at a higher level element/node in the DOM instead of using the element on whi...

DOM • Events

Triggering custom events

The CustomEvent API allows developers to create custom events and trigger them on DOM nodes, passing data along the way. event = new CustomEvent(typeArg, customEventInit); typeArg - DOMString representing the name of the event. customEventInit - is optional parameters (that will be passed as e ...

DOM • Events