During application development using JavaScript, suppose you want to addEventListener to the results from querySelectorAll using JavaScript. How will you do? This article will show some methods to do that. Let’s follow it.
addEventListener() and querySelectorAll() methods
The addEventListener() method attaches an event handler to an element.
Syntax:
element.addEventListener(event, function, useCapture)
Parameters:
- event: The name of the event.
- function: The function to run when the event occurs.
- useCapture (default = false).
Example: Attach the mouseover event and the mouseout event to the h1 element.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1 id="title">LearnShareIT</h1>
<script>
document.getElementById("title").addEventListener("mouseover", mouseOver);
document.getElementById("title").addEventListener("mouseout", mouseOut);
function mouseOver() {
document.getElementById("title").style.color = "blue";
}
function mouseOut() {
document.getElementById("title").style.color = "black";
}
</script>
</body>
</html>Output:
The querySelectorAll() method returns a NodeList containing all elements that match one or more CSS selectors.
Syntax:
document.querySelectorAll(CSS selectors)
Parameters:
- CSS selectors: One or more CSS selectors (separated by “,”).
You can read about the usage and specific examples of the querySelectorAll() method here.
AddEventListener to the results from querySelectorAll using JavaScript
We have the following HTML document:
<!DOCTYPE html>
<html>
<head>
<style>
*, html, body {
padding: 0;
margin: 0;
}
.box {
width: 10rem;
height: 5rem;
background-color: green;
float: left;
position: relative;
margin: 2rem;
transition: .5s all;
}
h2 {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div id="box1" class="box box1">
<h2>LearnShareIT</h2>
</div>
<div id="box2" class="box box2">
<h2>LearnShareIT</h2>
</div>
<script src="script.js"></script>
</body>
</html>We want to add mouseover and mouseout events to elements with the class name ‘box’.
To addEventListener to the result from querySelectorAll, this article will introduce two methods: using for loop and forEach() methods.
Using for loop
Code:
const listbox = document.querySelectorAll('.box');
// add the mouseover event to elements with the class name 'box'
for (let i = 0; i < listbox.length; i++) {
listbox[i].addEventListener('mouseover', function mouseOver() {
listbox[i].setAttribute('style', 'background-color: red;');
});
}
// add the mouseout event to elements with the class name 'box'
for (let i = 0; i < listbox.length; i++) {
listbox[i].addEventListener('mouseout', function mouseOut() {
listbox[i].setAttribute('style', 'background-color: green;');
});
}First, we use the querySelectorAll() function to get all the elements with the class name ‘box’. Then we use a for loop to iterate through all the elements of the ‘listbox’ NodeList. Finally, we add mouseover and mouseout events to all elements using the addEventListener() method.
Each time we mouse over an element of class ‘box’, the element’s color changes to red. When we mouse away from that element, the element’s color changes to green.
Output:
You can also use the forEach() method to achieve the same thing with less code.
Using forEach() method
Everything is the same as when we use a for loop, but instead, we iterate through all the NodeList ‘listbox’ elements using the forEach() method.
Code:
const listbox = document.querySelectorAll('.box');
// add the mouseover event to elements with the class name 'box'
listbox.forEach(box => {
box.addEventListener('mouseover', function mouseOver() {
box.setAttribute('style', 'background-color: red;');
});
});
// add the mouseout event to elements with the class name 'box'
listbox.forEach(box => {
box.addEventListener('mouseout', function mouseOut() {
box.setAttribute('style', 'background-color: green;');
});
});Output:
Summary
This article has shown how to addEventListener to the results from querySelectorAll using JavaScript. I hope the information in this article will be helpful to you. If you have any problems, please comment below. Thank you for reading!
Maybe you are interested:
- How To Get The Text Of A Div Element Using JavaScript
- Add an ID attribute to an Element using JavaScript
- Append text to a Paragraph element using JavaScript
Hello, my name’s Bruce Warren. You can call me Bruce. I’m interested in programming languages, so I am here to share my knowledge of programming languages with you, especially knowledge of C, C++, Java, JS, PHP.
Name of the university: KMA
Major: ATTT
Programming Languages: C, C++, Java, JS, PHP
