Event क्या होता है?
webpage में जब भी कोई क्रिया यानि activity होती है उसे event कहा जाता है | event key-strokes या फिर mouse movement के जरिए हो सकता है |
कुछ events page-load, window से भी जुड़े होतें हैं |
उदाहरण: mouseClick, keyup, keydown, load, change, focus, submit
यहाँ पढ़ें javascript events क्या है और कितने प्रकार के होतें हैं?
Event Handling in javascript
webpage में जब कोई event होता है, उस वक़्त जब हम कोई extra activity करना चाहतें हैं, तो उसे event handling कहतें हैं | एक event पे कोई job या function trigger होता है वो event handling कहलाता है |
जैसे button click पे कोई function होना, किसी input field पर mouse ले जाते ही उसका pointer बदल जाना ये सब एक event handling है |
किसी event के साथ हम कोई job को दो तरीके से handle कर सकतें हैं : 1) static event handling, 2) dynamic event handling
static event handling
html page में किसी element के साथ जब कोई event handler attach करते हैं तब उसे static event handling कहा जाता है |
इसके लिए element की event attribute का उपयोग होता है |
उदाहरण
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Static Event Example</title>
</head>
<body>
<h1>Static Event Creation</h1>
<input type="button" value="Click" onclick="show()">
<br><br>
<span id="sp1"></span>
<script>
function show(){
var msg = "Welcome to New World!";
var getElement = document.querySelector("#sp1");
getElement.innerHTML = msg;
getElement.setAttribute("style","color:blue");
}
</script>
</body>
</html>
उदाहरण में देखिए html page के button element से onclick नाम की event attribute लगाया गया है और उसमें show() method को call किया गया है |
button click जब होगा तब उसमें show() method trigger होगा और जिससे फिर span element में message blue color से append करेगा |
output
dynamic event handling
javascript code में जब किसी element को fetch करके उसमे event handler attach करते हैं तब उसे dynamic event handling कहा जाता है |
इस तरीके में हम किसी भी element को fetch कर सकतें हैं और उसके साथ event handler लगा सकतें हैं | इसके लिए html page में कोई बदलाव करने की जरुरत भी नहीं पड़ती | html page सिर्फ अपना html content रखता है | और उसमें जो भी dynamic changes करने हैं वो javascript code में कर सकतें हैं |
1) इसमें DOM element को fetch करके उस event पे method assign कर सकतें हैं |
उदाहरण: document.querySelector(“#btn”).onclick = show;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Event Example</title>
</head>
<body>
<h1>Dynamic Event Creation</h1>
<input type="button" value="Click" id="btn">
<br><br>
<span id="sp1"></span>
<script>
function show(){
var msg = "Welcome to New World!";
var getElement = document.querySelector("#sp1");
getElement.innerHTML = msg;
getElement.setAttribute("style","color:blue");
}
var btnId = document.querySelector("#btn");
btnId.onclick = show;
</script>
</body>
</html>
output
2) दूसरा तरीका है addEventListener method के जरिए event के साथ event handler लगा सकतें हैं |
addEventListener
javascript में addEventListener method के जरिए किसी element में event handler लगा सकतें हैं |
- इस method के जरिए एक ही event में एक से अधिक event handler लगा सकतें हैं | जैसे की button click पे validate function और show data function दोनों call कर सकतें हैं |
- एक html element पे एक से अधिक events लगा सकतें हैं | जैसे की एक input element के साथ एक ही बार में mouseEnter और mouseLeave events लगानी हो तो addEventListener का उपयोग कर सकतें हैं |
Syntax: htmlElement.addEventListener(event, function, capture)
- htmlElement उस element को indicate कर रहा जिसमें event लगानी है |
- event एक javascipt event को indicate कर रहा है |
- function एक call back function है जो event handle के समय call होगा |
- capture एक optional parameter है और ये result true या false में देता है |
उदाहरण: btnId.addEventListener(“click”, show);
***addEventListener में event name लिखते समय on लिखने की जरुरत नहीं होती है | जैसे की onclick की वजाए click लिख सकतें हैं |
addEventListener के जरिए एक element पे एक से अधिक events का उदाहरण:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Event Example</title>
<style>
#header{
padding: 5px;
border:1px solid maroon;
}
</style>
</head>
<body>
<h1 id="header">Dynamic Event Creation</h1>
<script>
var heading = document.querySelector("#header");
var addBackground = () =>{
heading.style.background= "peachpuff";
}
var changeBackground = () =>{
var msg = "Welcome to New World!";
heading.style.background="yellow";
}
heading.addEventListener("mouseenter", addBackground);
heading.addEventListener("mouseleave", changeBackground);
</script>
</body>
</html>
addEventListener के जरिए एक element के एक event पे एक से अधिक functions लगाने का उदाहरण:
var h1 = document.querySelector("#header");
var showMessage = () =>{
var msg = "Welcome to New World!";
h1.innerHTML = msg;
}
h1.addEventListener("mouseenter", () =>{
h1.style.background= "peachpuff";
});
h1.addEventListener("mouseenter", showMessage);
removeEventListener
removeEventListener() के जरिये html element से किसी event को हटाने के लिए उपयोग होता है |
Syntax: element.removeEventListener(event, function);
उदाहरण: h1.removeEventListener(“click”, showMessage);