☜ ☞

Event handling

Event handling in JavaScript enables interactive web pages and is essential in client-side web development. JavaScript can be used to detect when an event occurs, such as when a user clicks a button, moves the mouse, or submits a form, and then run a specified function or block of code in response to that event. Below is a general overview of event handling in JavaScript:

Basic Steps in Event Handling:

Select an Element: Choose the HTML element to which the event will be attached.
Define a Function: Create a function that will run when the event occurs.
Attach an Event: Use JavaScript to attach the event to the selected HTML element.

Basic Syntax:

element.eventType = functionName;

Example 1: Inline Event Handling

HTML:

<button onclick="alert('Button Clicked!')">Click Me!</button>

In the above example, an inline onclick event is used to show an alert when the button is clicked.

Example 2: Traditional DOM Event Handling

JavaScript:

let button = document.getElementById('myButton');
button.onclick = function() {
   alert('Button Clicked!');
};

HTML:

<button id="myButton">Click Me!</button>

In this example, the onclick event is attached to a button element using JavaScript.

Event Listeners:

A more modern approach to handle events in JavaScript is using event listeners.

Syntax:

element.addEventListener('eventType', function/eventHandler);

Example: Using Event Listeners

JavaScript:

let button = document.getElementById('myButton');
button.addEventListener('click', function() {
   alert('Button Clicked!');
});

HTML:

<button id="myButton">Click Me!</button>

Event Object:

The event object is a special object created when an event occurs. It contains properties and methods related to the event.

Example using the Event Object:

button.addEventListener('click', function(event) {
   alert('Button Clicked! Event type is: ' + event.type);
});

Event Propagation:

Event Bubbling: The event starts from the target element that triggered the event and bubbles up to the root of the DOM tree.
Event Capturing (or Event Capturing): The event starts from the root and trickles down to the target element.

You can choose whether to handle an event in the capturing or bubbling phase by using the third parameter of addEventListener:

element.addEventListener('click', functionHandler, useCapture);

useCapture is optional and is false by default (bubbling phase). Set it to true to handle the event in the capturing phase.

Prevent Default Behavior:

To prevent the default behavior of an event, use the preventDefault() method of the event object.

Example:

let form = document.getElementById('myForm');
form.addEventListener('submit', function(event) {
   event.preventDefault();
   alert('Form Submitted!');
});

Event Delegation:

Event delegation refers to the practice of using a single event listener to manage all of a particular type of event for child elements.

Example:

let ul = document.getElementById('myList');
ul.addEventListener('click', function(event) {
   alert('Item Clicked: ' + event.target.textContent);
});

HTML:

<ul id="myList">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
</ul>

Note:

Ensure to add your script tag just before the closing body tag </body> or use DOMContentLoaded event to make sure your JavaScript runs only after the DOM has fully loaded, especially when your script tags are in the <head>.

document.addEventListener('DOMContentLoaded', function() {
   // Your code here
});

This is a broad overview of event handling in JavaScript. Specific use cases may require additional handling and more advanced techniques.

☜ ☞