Javascript DOM Events

The Basics of Javascript DOM Events

What is a Javascript DOM Event?

Types of Javascript DOM Events

Utilising Javascript DOM Event Listener

Adding Event Listeners to DOM Elements in Javascript

document.getElementById("myBtn").addEventListener("click", function(){
  alert("Button clicked!");
});

Removing Event Listeners from DOM Elements in Javascript

let myFunc = function() {
  alert("Button clicked!");
};

//Adding the event listener
document.getElementById("myBtn").addEventListener("click", myFunc);

//Removing the event listener
document.getElementById("myBtn").removeEventListener("click", myFunc);

Interacting with DOM Event Handling in Javascript

Core Principles of DOM Event Handling in Javascript

• \textbf{Capturing Phase}: It is the first phase where the event goes down to the element.
• \textbf{Target Phase}: Here, the event reaches the target element.
• \textbf{Bubbling Phase}: In this phase, the event bubbles up from the element.

Creating and Executing DOM Event Handlers in Javascript

let myEventHandler = function() {
  // Code to be executed when button is clicked
  alert("Button Clicked!");
};

// Assign the handler to the button
document.getElementById("myBtn").onclick = myEventHandler;

Event Detection Techniques in Javascript DOM

Click Me!

Engaging With Javascript DOM Click Event

The Functionality of Javascript DOM Click Event

Coding a Click Event in Javascript DOM

let buttonElement = document.getElementById('clickMe');
buttonElement.addEventListener('click', function() {
  alert("You clicked me!");
});

let buttonElement = document.getElementById('clickMe');

let handleClick = function() {
  alert("You clicked me!");
};

buttonElement.addEventListener('click', handleClick);

Testing and Debugging Javascript DOM Click Events

let handleClick = function() {
  console.log("Click event triggered!");
  alert("You clicked me!");
};

Comprehensive Javascript DOM Events List

Exploring the Javascript HTML DOM Events

Most Common Javascript DOM Events

• \textbf{click}: Triggers when the mouse button is clicked over an element.
• \textbf{double-click}: Triggers when the mouse button is double-clicked over an element.
• \textbf{mousemove}: Triggers as the mouse is moved over an element.

• \textbf{keydown}: Triggers when a key has been pressed down.
• \textbf{keyup}: Triggers when a key has been released.

• \textbf{submit}: Triggers when a form is submitted.
• \textbf{change}: Triggers when an input element has been changed.
• \textbf{focus}: Triggers when an input element gets focus.

How to Use The Javascript DOM Events List

let button = document.getElementById('myButton');

button.onclick = function() {
  alert('Button clicked!');
};

DOM Events Example in Javascript

Javascript Examples: Implementing DOM Events

Hover over me.

Advanced Concepts: Trapping and Propagation in Javascript DOM Events

The Art of Trapping DOM Events in Javascript

Techniques for Trapping DOM Events in Javascript

element.addEventListener(eventType, function, useCapture)

//Get all the DOM Elements
let outerDiv = document.getElementById("outer");
let innerDiv = document.getElementById("inner");

//Add event listeners
outerDiv.addEventListener("click", FunctionA, false);
innerDiv.addEventListener("click", FunctionB, true);

function FunctionA(e) {
  alert("Event Capturing: Outer Div");
}
  
function FunctionB(e) {
 e.stopPropagation(); //Stop the event from propagating further
 alert("Event Bubbling: Inner Div");
}

Understanding Propagation in Javascript DOM Events

Event Propagation Explained: Capturing and Bubbling Phases in Javascript DOM Events

element.addEventListener(type, listener, useCapture);

let parent = document.getElementById('parent');
let child = document.getElementById('child');

// This will be executed during the capturing phase
parent.addEventListener('click', EventFunction, true);

// This will be executed during the bubbling phase
child.addEventListener('click', EventFunction, false);

function EventFunction(e){
  alert(e.currentTarget.id);
}