Table of Contents
Introduction
हेलो दोस्तों आज हम इस post में JavaScript में सभी elements में event listener कैसे add कर सकते है ?: यह इस post में हम आपको बताएँगे की कैसे आप JavaScript का इस्तेमाल करके साथ ही सभी elements में event listener add कर सकते है, हमें हरेक element को select करने के लिए कई method available है, जैसे की DOM(document object modal) के elements के ID, class name, tag name या किसी attribute के द्वारा element को select कर सकते है!. सभी elements के लिए event listener add करने के लिए ये तरीके apako बेहतर नियत्रण provide करते है और addEventListener() method के जरिये इसका इस्तेमाल किया जाता है!.
JavaScript में elements पर event listener add करने से पहले हमें HTML के elements को कैसे select कर सकते है, वह जानना जरुरी होता, elements को select और get करने के लिए कई method available है लेकिन खास तोर पर estemal किये जाने वाले method का इस्तेमाल करके हमें event listener को समझेंगे!.
ऐसे तो कई तरीके से DOM के elements को select कर सकते है javascript का इस्तेमाल करके, लेकिन सामान्य तोर पैर इस्तेमाल होने वाले method के बारे में जानेगे!.
getElementById() और Event Listener
इस method से हम elements को इनके unique ID attribute से select कर सकते है, और उसपे event चला सकते है!.
Example:
HTML code
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Event Listener</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<div id="elementById" class="">Element by ID</div>
</body>
</html>
CSS code
<style>
.highlighted {
background-color: yellow;
}
</style>
JavaScript code
<script>
function handleClick(event){
event.target.classList.toggle("highlighted");
}
var elementById = document.getElementById('elementById');
elementById.addEventListener('click', handleClick);
</script>
Full source code
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Event Listener</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
.highlighted {
background-color: yellow;
}
</style>
</head>
<body>
<div id="elementById" class="">Element by ID</div>
<script>
function handleClick(event){
event.target.classList.toggle("highlighted");
}
var elementById = document.getElementById('elementById');
elementById.addEventListener('click', handleClick);
</script>
</body>
</html>
ऊपर के example में देख सकते है, पहले तो हमने javascript में element को document.getElementById() method का इस्तेमाल करके elements की unique ID attribute का इस्तेमाल करके element को select किया है और उस पर हमने simle element पर click event चलाया है और class “highlighted “ को toggle कराया है!.
getElementsByClassName() और Event Listener
इस method से हम elements को इनके class name से select कर सकते है, और उसपे event चला सकते है!.
Example:
HTML code
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Event Listener</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<div class="elementByClassName ">Element by Class Name 1</div>
<div class="elementByClassName ">Element by Class Name 2</div>
<div class="elementByClassName ">Element by Class Name 3</div>
<div class="elementByClassName ">Element by Class Name 4</div>
<div class="elementByClassName ">Element by Class Name 5</div>
<div class="elementByClassName ">Element by Class Name 6</div>
</body>
</html>
CSS code
<style>
.highlighted {
background-color: yellow;
}
</style>
Javascript code
<script>
function handleClick(event){
event.target.classList.toggle("highlighted");
}
// one way
var elementsByClassName = document.getElementsByClassName('elementByClassName');
for (var i = 0; i < elementsByClassName.length; i++) {
elementsByClassName[i].addEventListener('click', handleClick);
}
// second way
Array.from(elementsByClassName).forEach(function(element) {
console.log(element)
element.addEventListener('click', handleClick);
});
</script>
Full source code
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Event Listener</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
.highlighted {
background-color: yellow;
}
</style>
</head>
<body>
<div class="elementByClassName ">Element by Class Name 1</div>
<div class="elementByClassName ">Element by Class Name 2</div>
<div class="elementByClassName ">Element by Class Name 3</div>
<div class="elementByClassName ">Element by Class Name 4</div>
<div class="elementByClassName ">Element by Class Name 5</div>
<div class="elementByClassName ">Element by Class Name 6</div>
<script>
function handleClick(event){
event.target.classList.toggle("highlighted");
}
// one way
var elementsByClassName = document.getElementsByClassName('elementByClassName');
for (var i = 0; i < elementsByClassName.length; i++) {
elementsByClassName[i].addEventListener('click', handleClick);
}
// second way
Array.from(elementsByClassName).forEach(function(element) {
console.log(element)
element.addEventListener('click', handleClick);
});
</script>
</body>
</html>
document.getElementsByClassName(‘elementByClassName’) method document में same class name वाले सभी element को select कर लेता है, और सभी element पर event चलने के लिए selected element को for loop के जरिये हरेक element पे event setup कर सकते है!. आप ऊपर के example में देख सकते है!. सेबी selected elements पर click event चलने के लिए forloop का इस्तेमाल किया है| और साथ में हम forEach() method का बी इस्तेमाल करके सभी element पर event चलाया है!. इसके लिए हमने selected elements को एक array में convert किया है और forEach() method setup किया है!.
ऊपर का इस्तेमाल का इस्तेमाल करके हम यह same document.getElementsByTagName() method के लिए बी setup कर सकते है!.
querySelectorAll() और Event Listener
Es method इस्तेमाल करके हम elements को इनके class name से select कर सकते है, और उन selected element पर event चला सकते है!.
Example:
HTML code
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Event Listener</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<h2>Event listener on list type</h2>
<ul>
<li class="list_box"> List Box </li>
<li class="list_box"> List Box 1</li>
<li class="list_box"> List Box 2</li>
<li class="list_box"> List Box 3</li>
</ul>
</body>
</html>
CSS code
<style>
.highlighted {
background-color: yellow;
}
</style>
Javascript code
<script>
function handleClick(event) {
event.target.classList.toggle('highlighted');
}
const list_box = document.querySelectorAll('.list_box');
list_box.forEach(box => {
box.addEventListener('click', handleClick);
});
</script>
Full source code
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Event Listener</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
.highlighted {
background-color: yellow;
}
</style>
</head>
<body>
<h2>Event listener on list type</h2>
<ul>
<li class="list_box"> List Box </li>
<li class="list_box"> List Box 1</li>
<li class="list_box"> List Box 2</li>
<li class="list_box"> List Box 3</li>
</ul>
<script>
function handleClick(event) {
event.target.classList.toggle('highlighted');
}
const list_box = document.querySelectorAll('.list_box');
list_box.forEach(box => {
box.addEventListener('click', handleClick);
});
</script>
</body>
</html>
ऊपर के example में देख सकते है, सभी same class वाले elements को select करने के लिए document.querySelectorAll() method का इस्तेमाल किया है। document.querySelectorAll() method हमें NodeList array return करती है, इसलिए हम result को पुनरावर्तित करने के लिए NodeLis.forEach() method का इस्तेमाल कर सकते है!.
