Table of Contents
Introduction
हेलो दोस्तों आज हम इस post में javascript events के बारे में जानेगे!. javascrpt events यानि कुछ ऐसा action जिसमे javascript response करता है जिसे हम event कह सकते है!.
For एक्साम्प्ले, अगर user webpage के button पे click करता है!. तो उस action के response में एक information box display कर सकते है!. या button के click पर दूसरी कई action perform करा सकते है!. जैसे की webpage को button के click पर webpage को scroll-down और scroll-up करा सकते है!.
इस post में हम javascript events के खास concepts के बारेमे जानेगे, की event web browsers के साथ कैसे work करती है!.Javascript के event को समजने से पहले HTML,css की basic understading होनी चाहिए!.
Javascript event simple exaple
Javascript event
HTML Webpage में button के click पर javascript से action कैसे perform करा सकते है!. वह हम example के जरिये समझेंगे!. एक single <button> element HTML में set करेंगे और button के click पर HTML body element का randomally background color change करेंगे javascrip के estemal छे!.
Example
<html>
<head>
<title>On button click change body element background color</title>
</head>
<body>
<button>Click Here! </button>
<script>
const btn = document.querySelector('button');
function random(num){
return Math.floor(Math.random()*(num+1));
}
btn.addEventListener('click',()=>{
const rndclr = `rgb(${random(240)}, ${random(240)}, ${random(240)})`;
});
</script>
</body>
</html>
ऊपर ke code में हमने क्या किया है की <button> element का reference हम्मे Document.querySelector() method के मदद से btn variable में store किया है!. उसके बाद button पे click event को fire करने के लिए addEventListener() method का इस्तेमाल किया है!. addEventListener() method two argument accepts करता है!. 1. event का name और दूसरा event को handle करने के लिए function. ऊपर के example में हमारा event का name ‘click’ है!. और उसके बाद में arrow function का इस्तेमाल किया है event को handle करने के लिए!.
Javascript HTML event
Javascript HTML event को HTML element में direct कैसे call करा सकते है!. HTML event में कुछ event browser के द्वारा किये जाते है और कुछ user के द्वारा किये जाते है!.
HTML event जैसे की HTML webpage का loading finish होने के बाद, HTML input field को chanage किये जाने पर या HTML button element पे click होने के बड़े में javascript event को call किया जाता है!.
Example
single quotes
<element event='some javascirpt'>
Double quotes
<element event='some javascirpt'>
<html>
<head></head>
<body>
<h1 id="text_change">This is title</h1>
<button onclick="textChange()">Click Here!</button>
<script>
functin textChange(){
document.getElementById('text_change').innerHTML = "This is new Heading";
}
</script>
</body>
</html>
Javascript events
- Mouse events
- Keyboard events
- Form events
- Window / Document events
Mouse events
onclick event: onclick event element के click पर trigger होगी।
Example:
<html>
<head></head>
<body>
<h1 id="text_change">This is title</h1>
<button onclick="textChange()">Click Here!</button>
<script>
functin textChange(){
document.getElementById('text_change').innerHTML = "This is new Heading";
}
</script>
</body>
</html>
onmouseover: जब mouse का cursor element के ऊपर आएगा तब (hover) वह event trigger होगी।.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<script>
function mouseoverevent(){
alert("Mouse over event!");
}
</script>
<h1> Javascript Events </h1>
<div onmouseover="mouseoverevent()" style="width: 200px;height: 25px;background: red;text-align: center;padding: 10px;">Mouse over event</div>
</body>
</html>
onmouseout : जब mouse का cursor element से हट जायेगा तब वह event trigger होगी।.
onmousedown: जब HTML element पर mouse का button press किया जाता है तब event को trigger किया जाता है।.
onmouseup: जब भी HTML element पर mouse का button को release किया जाता है तब event को trigger किया जाता है।.
onmousemove: जब भी HTML element पर mouse cursor को move किया जाता है तब event को trigger करा सकते है।.
Keyboard events
keydown & keyup: जब user key को press and release करेगा तब event trigger होगी।.
keydown Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<script>
function keyDown(){
alert("On key Down Here!");
}
</script>
<h1> Javascript Events </h1>
<input type="text" name="name" onkeydown="keyDown()" >
</body>
</html>
keyup Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<script>
function keyUp(){
alert("On key UpHere!");
}
</script>
<h1> Javascript Events </h1>
<input type="text" name="name" onkeyup="keyUp()" >
</body>
</html>
Form events
onfocus: जब user element पर focuses करेगा तब वह event perfomed होगी।.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<script>
function Onfocus(){
document.getElementById("name").style.background=" red";
}
</script>
<h1> Javascript Events </h1>
<input type="text" name="name" id="name" onfocus="Onfocus()" >
</body>
</html>
onsubmit: जब user form को submit करेगा तब onsubmit पर वह event को perfom करा सकते है!.
onchange: Form element के value को user के द्वारा modifies करने पर वह event को perform करा सकते है!.
onblue: जब user From element से focus हटा लेता है तब इस event से script को execute करा जा सकता है।.
Window / Document events
onload: जब browser webpage की loading पूरी कर लेगा tab onload पर event को trigger कर सकते है!.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body onload="window.alert('Page successfully loaded!')">
<h1> Javascript Events </h1>
<script>
document.write("The page is loaded successfully");
</script>
</body>
</html>
onresize: जब user browser की window को resize करेगा तब window के resize पर event को trigger करा सकते है!.
onunload: जैसे ही browser में कोइ नई window open की जाती है tab ये event को call करा सकते है।.
