JavaScript is a part of dynamic web design. This article brings out the event handling mechanism. It allows web pages to react against the end-user performing specific actions such as clicking a button or entering text, or moving the mouse. Event handling makes the user experience enriched in the case of web applications.
What exactly is an Event?
In web contexts, an “event” can be as ordinary as clicks and scrolling by the user, or it maybe as technical as page loading or errors. JavaScript lets us listen to for these events and react programmatically.
Methods of Handling Events
Several methods are available in JavaScript to handle events, but add event listeners, is the most typical one.
Use the addEventListener Method
addEventListener This is the traditional way of attaching an event listener to a specific element. It takes two arguments: the string that defines the event type and the function that will execute when the event fires.
Example: Alert on Button Click
We have a button. We want to alert every time this button is clicked:
<button id="myButton">Click me!</button>
<script>
document.getElementById('myButton').addEventListener('click', function() {
alert('Button clicked!');
});
</script>
The following example creates such a function. Every time the button is clicked, the browser fires the function and brings up an alert box.
Turning Off Event Listeners
In case you need to stop event listener operation, there’s a possibility of using the removeEventListener method. This method is quite similar to addEventListener and involves the event name and the handler function added earlier.
Event Propagation: Capturing and Bubbling
Event handling includes not only the reactions themselves but also event propagation through the DOM. There are two phases of event propagation: event capturing and event bubbling.
Capturing phase It’s a process in which the event travels down from the document object to the event target.
Bubbling phase The event travels up from the event target to the document object.
Mostly, we’re interested in the bubbling phase only, but the whole process of event propagation is absolutely necessary to know, for managing complex interactions.
Exercise Interactive Image Gallery
Build a simple image gallery. On any image click by the user, the following image gallery should show that image in larger size.
<div id="gallery">
<img src="image1-thumbnail.jpg" alt="Image 1" data-large="image1-large.jpg">
<img src="image2-thumbnail.jpg" alt="Image 2" data-large="image2-large.jpg">
<img src="image3-thumbnail.jpg" alt="Image 3" data-large="image3-large.jpg">
</div>
<script>
document.getElementById('gallery').addEventListener('click', function(event) {
var largeImageUrl = event.target.getAttribute('data-large');
if (largeImageUrl) {
console.log("Displaying large image: " + largeImageUrl);
// Here you can add code to update an image tag's src attribute to show the large image
}
});
</script>
In this exercise, we utilized event delegation by attaching the event listener to the container holding all the images, as opposed to individually attaching it to each one. This is far more efficient and easier to code.
Summary
Well, that should get you started squarely on event handling with JavaScript through this tutorial today. With this skill set, some really cool interactivity can be added to applications on the web. So try giving these a go in your projects as practice. Well, that is it for today. We will catch you in the next lesson as we work on some of the other exciting features of JavaScript.
