Working with the DOM and events allows JavaScript to make web pages interactive by responding to user actions. Events are actions like clicks, typing, or hovering that trigger specific functions.
- Events like click, submit, and keydown trigger JavaScript functions.
- Event listeners (addEventListener) are used to handle user interactions.
- Enables dynamic updates to the DOM based on user actions.
The way DOM represents a document is with a logic tree ( DOM Tree ).
To provide a dynamic interface to a webpage, we use events in JavaScript . These events are attached to elements in the DOM ( Document Object Model ). By default, events use bubbling propagation i.e from children to parent. Events can be bound either as inline or in the external script (JavaScript file).
Using DOM and Events
Suppose we want to make changes in the document or stylesheet on a certain event. The event can be the loading of a web page, selection of any specific element or a form is submitted, etc.
Some common event attributes are as follows.
1. Window Event Attributes: These events are triggered for the window object.
- onload: It fires after the page is finished loading.
- onresize: It fires when the browser window is resized.
2. Mouse Events: These are the most common events with basic interaction of user through the mouse.
- onclick: It fires when a mouse click is triggered on an element.
- onmouseover: It fires when a mouse pointer moves over an element.
- ondblclick: It fires on a mouse double click on the element.
3. KeyBoard Events:
- onkeydown: It fires when the user is pressing a specific key.
- onkeyup: It fires when a user releases a specific key.
Example 1: We are attaching an event listener to our container. When the click event happens, the text color inside the container changes from white to black.
<!DOCTYPE html>
<html>
<head>
<title>DOM and Events</title>
<style>
.container {
height: 150px;
width: 300px;
background-color: green;
text-align: center;
color: white;
font-size: 30px;
margin: auto;
font-weight: bolder;
font-family: -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
'Open Sans', 'Helvetica Neue', sans-serif;
}
</style>
</head>
<body>
<div class="container">GeeksforGeeks</div>
<script>
let container = document.querySelector('.container');
container.addEventListener('click', function(e) {
container.style.color = "black";
});
</script>
</body>
</html>
Example 2: Here, a keyboard event is taking place, we are attaching an event Listener on our input element. When the user is pressing an 'Enter' key, a message prompt is shown to the user saying "You Pressed an Enter".
<!DOCTYPE html>
<html>
<head>
<title>DOM and Events</title>
<style>
* {
font-family: -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
'Open Sans', 'Helvetica Neue', sans-serif;
}
</style>
</head>
<body>
<h3>
Message will be displayed when
you press a Enter key
</h3>
<input type="text" class="inputArea">
<p></p>
<script>
let input = document.querySelector(".inputArea");
let p = document.querySelector("p");
input.addEventListener('keydown', function(e) {
if (e.keyCode == 13) {
p.textContent = "You pressed an Enter";
}
})
</script>
</body>
</html>
