The Document Object Model (DOM) is a programming interface for web documents. It represents the webpage so that programs can change the document structure, style, and content. The DOM is a structured hierarchical representation of the elements present on a webpage, where each element is represented as an object in the DOM tree.
One important aspect of the DOM is its ability to handle events. Let's discuss DOM events and how to work with them in JavaScript.
What are DOM Events?
DOM events are events or actions that occur on a web page. These events can be triggered by user interactions like clicks, and keyboard inputs, or by changes in the browser like page load, resize, or scroll. They play a valuable part in creating dynamic and interactive web applications.
Types of DOM Events
Many types of DOM events can be used to trigger different actions or behaviors on a web page. Let's check out some of the most common DOM events:
Mouse events:
These events are triggered by user interactions with a mouse or trackpad, such as clicks, double clicks, and scrolling.
Touch events:
These events are triggered by user interactions with a touchscreen, such as taps, swipes, or pinch gestures.
Keyboard events:
These events are triggered by user inputs from a keyboard, such as key presses or releases.
Form events:
These events are triggered by changes to form elements, such as text inputs, checkboxes, or submit buttons.
Window events:
These events are triggered by changes in the browser window, such as resizing, loading, or scrolling.
Working with DOM Events
To work with DOM events in JavaScript, you need to first select the element that you want to add the event to. This can be done using the getElementById or querySelector method. Once you have selected the element, you can use the addEventListener method to add the event to the element. The addEventListener method takes two parameters: the name of the event and the function that should be executed when the event is triggered.
Here's an example of how to add a click event to a button element:
In this example, we will select the two button elements with the ID of "Button1" and "Button2" respectively. We will then add a click event listener to "Button1" and a mouseover and mouseout event listener to "Button2" and specify a function for each that should be executed when the respective events are triggered.
HTML
<button id="Button1">Click me!</button>
<button id="Button2">Move your mouse over me..!!</button>
JAVASCRIPT
document.getElementById("Button1").addEventListener("click", function() {
alert("Thank you for clicking me..!!");
});
document.getElementById("Button2").addEventListener("mouseover", function() {
this.style.backgroundColor = "red";
});
document.getElementById("Button2").addEventListener("mouseout", function() {
this.style.backgroundColor = "";
});
Here, In the case of the first button, when you click the button, the 'click' function will be executed, which triggers an alert box with the message "Thank you for clicking me..!!".
In the case of the second button, when your mouse pointer moves over the button, the 'mouseover' event listener will get executed, which sets the button's background color to red.
Also, when the mouse pointer moves away from the button, the 'mouseout' event listener gets executed, which sets the background color of the button to its default value(i.e. an empty string).
Conclusion
DOM events play a critical role in web development, enabling you to engage with your users by dynamically altering the page content. By utilizing JavaScript event handlers and mastering various types of DOM events, you can make your web pages more engaging, interactive, and appealing to users.
References
Khan Academy
Thank you for taking the time to read this blog. I hope you found it informative and enjoyable!
Catch you guys on the next one. Cheers .. ✌️