JavaScript : Event Handling and Event Delegation (English/Hindi)

English

JavaScript Event Handling:

JavaScript event handling is a way to make your web pages interactive by responding to user actions or events, such as clicks, mouse movements, keyboard inputs, and more. You can attach event listeners to HTML elements, and these listeners will execute JavaScript code when the specified event occurs on the element.

Here's an example in JavaScript:

// Get a reference to an HTML element with an ID of "myButton"
var button = document.getElementById("myButton");

// Attach a click event listener to the button
button.addEventListener("click", function() {
  alert("Button clicked!");
});

In this example, we're adding a click event listener to a button element. When the button is clicked, the code inside the function will execute, showing an alert.

JavaScript Event Delegation:

Event delegation is a design pattern in JavaScript where instead of attaching event listeners to individual elements, you attach a single event listener to a parent element that contains all the child elements you're interested in. This can make your code more efficient and easier to manage, especially when dealing with dynamically added elements.

Here's an example of event delegation:

// Get a reference to a parent element that contains multiple buttons
var parentElement = document.getElementById("buttonContainer");

// Attach a click event listener to the parent element
parentElement.addEventListener("click", function(event) {
  if (event.target.tagName === "BUTTON") {
    alert("Button clicked: " + event.target.innerText);
  }
});

In this example, we're attaching a click event listener to a parent container element that holds several buttons. When any button inside the container is clicked, the event bubbles up to the parent, and we check if the clicked element is a button. If it is, we display an alert with the text of the clicked button.

Hindi

JavaScript Event Handling:

JavaScript event handling ek tareeka hai jisse aap apni web pages ko interactive bana sakte hain, user ke actions ya events jaise ki clicks, mouse movements, keyboard inputs, aur bhi kai tarah ke events ke jawab mein. Aap HTML elements par event listeners attach kar sakte hain, aur jab specified event element par hota hai, to ye listeners JavaScript code ko execute karte hain.

Yahan ek JavaScript mein udaharan hai:

// "myButton" ID ke ek HTML element ka reference prapt karein
var button = document.getElementById("myButton");

// Button par click event listener attach karein
button.addEventListener("click", function() {
  alert("Button click hua!");
});

Is udaharan mein, hum ek click event listener ko ek button element par add kar rahe hain. Jab button par click hota hai, to function ke andar ka code execute hota hai, jo ek alert dikhata hai.

JavaScript Event Delegation:

Event delegation ek design pattern hai JavaScript mein jahan par individual elements par event listeners attach karne ki jagah, aap ek single event listener ko ek parent element par attach karte hain jo saare child elements ko contain karta hai jo aapko interest rakhte hain. Ye aapke code ko efficient aur manage karne mein madadgar ho sakta hai, khaaskar jab aap dynamically added elements se deal kar rahe hain.

Yahan event delegation ka ek udaharan hai:

// Ek parent element ka reference prapt karein, jisme kai buttons hain
var parentElement = document.getElementById("buttonContainer");

// Parent element par click event listener attach karein
parentElement.addEventListener("click", function(event) {
  if (event.target.tagName === "BUTTON") {
    alert("Button click hua: " + event.target.innerText);
  }
});

Is udaharan mein, hum ek parent container element par click event listener attach kar rahe hain jo kai buttons ko contain karta hai. Jab bhi container ke andar koi button click hota hai, to event parent tak bubble up hota hai, aur hum check karte hain ki clicked element ek button hai ya nahi. Agar woh button hai, to hum us button ke text ke sath ek alert dikhate hain.