पाठ 12, कुल 30 में

JavaScript इवेंट्स

4 मिनट पढ़ें · मुफ़्त · बिना लॉगिन

English हिंदी

इवेंट (event) वह चीज़ है जो पेज पर होती है: एक क्लिक, बटन के ऊपर से माउस का गुज़रना, कोई key दबाना, फ़ॉर्म submit करना, पेज का लोड होना। JavaScript का पूरा काम इवेंट्स को सुनना और उनका जवाब देना है। इवेंट्स के बिना पेज एक पोस्टर है — आप सिर्फ उसे देख सकते हैं। इवेंट्स के साथ वह एक बातचीत बन जाता है: यूज़र कुछ करता है, JavaScript जवाब देता है।

Diagram — देखें, यह सब कैसे जुड़ता है

हर इवेंट का एक नाम होता है और एक जगह होती है जहाँ वह होता है। बटन पर क्लिक करना उस बटन पर click इवेंट है। तस्वीर के ऊपर माउस ले जाना उस तस्वीर पर mouseover इवेंट है। आपका कोड कहता है: "जब इस element पर यह इवेंट हो, तो यह फ़ंक्शन चलाओ।"

HTML attributes से इवेंट संभालना

सबसे आसान तरीका है handler को सीधे HTML में लिख देना, onclick जैसे attribute से। उसकी value वह JavaScript है जो इवेंट होने पर चलता है।

<button onclick="sayHello()">Say Hello</button>

यह काम करता है और पढ़ने में आसान है, इसीलिए आप इसे कई उदाहरणों में देखेंगे — इस कोर्स में भी। लेकिन इससे JavaScript HTML में मिल जाता है, और इस तरीके से हर element पर हर इवेंट का सिर्फ एक handler हो सकता है।

addEventListener — बेहतर तरीका

Professional तरीका addEventListener है। आप अपना HTML साफ़ रखते हैं और handler को अपनी script से जोड़ते हैं। आप एक ही इवेंट पर कई handler लगा सकते हैं, और बाद में किसी एक को removeEventListener से हटा भी सकते हैं।

let btn = document.getElementById("orderBtn");
btn.addEventListener("click", function() {
  alert("Your chai is on its way!");
});

ध्यान दें, यहाँ इवेंट के नाम में "on" नहीं है — यह "click" है, "onclick" नहीं। जो फ़ंक्शन आप पास करते हैं, उसे event handler या listener कहते हैं, और वह हर बार चलता है जब इवेंट होता है।

Note: Handler फ़ंक्शन को पहला argument एक event object मिलता है, जिसे आमतौर पर event या e लिखा जाता है। यह उपयोगी बातें बताता है: event.target वह element है जिस पर क्लिक हुआ, event.key वह key है जो दबी। हर handler के लिए इसकी ज़रूरत नहीं पड़ती, लेकिन जब भी ज़रूरत हो, यह वहाँ मौजूद होता है।

जानने लायक आम इवेंट्स

click — यूज़र किसी element पर क्लिक करता है। सबसे ज़्यादा इस्तेमाल होने वाला इवेंट।
mouseover / mouseout — माउस किसी element के अंदर आता है या बाहर जाता है। Hover effect के लिए अच्छा है।
keydown / keyup — कोई key दबाई या छोड़ी जाती है। Live search और games के लिए अच्छा है।
submit — फ़ॉर्म submit होता है। भेजने से पहले फ़ॉर्म जाँचने के लिए अच्छा है।
load — पेज पूरी तरह लोड हो गया है। उस कोड के लिए अच्छा है जिसे पूरे पेज का इंतज़ार करना हो।

Tip: अपनी <script> को <body> के अंत में रखें, या load इवेंट का इंतज़ार करें, उसके बाद ही getElementById को कॉल करें। अगर script बटन के पेज पर आने से पहले चल जाए, तो getElementById को null मिलता है और addEventListener fail हो जाता है। यह JavaScript की सबसे आम शुरुआती गलतियों में से एक है।

आम गलतियाँ

Element के बनने से पहले listener लगाना — script HTML पढ़े जाने से पहले चल जाती है, इसलिए getElementById को कुछ नहीं मिलता।
addEventListener("onclick", ...) लिखना — इवेंट का नाम "click" है, "on" के बिना।
Handler को लगाते समय ही कॉल कर देना — addEventListener("click", sayHello()) उसे तुरंत चला देता है; फ़ंक्शन को पास करने के लिए sayHello बिना brackets के लिखें।
यह भूल जाना कि एक element पर कई listener हो सकते हैं — addEventListener से वे सभी चलते हैं, उसी क्रम में जिस क्रम में वे जोड़े गए थे।

याद रखें

इवेंट वह चीज़ है जो होती है: क्लिक, होवर, keypress, submit, load।
HTML में onclick="..." आसान तरीका है; addEventListener("click", ...) professional तरीका है।
Handler को event object मिलता है — event.target वह element है जिस पर क्लिक हुआ।
यूज़र कुछ करता है, JavaScript जवाब देता है — हर क्लिक एक बातचीत है।

उदाहरण समझिए

onclick="orderChai()" — आसान तरीका: बटन के HTML में ही उसका handler है, जो क्लिक पर orderChai() चलाता है।
document.getElementById("surpriseBtn").addEventListener("click", ...) — professional तरीका: script बटन को ढूँढती है और उस पर handler लगाती है, जिससे HTML साफ़ रहता है।
onmouseover="this.style.backgroundColor='orange'" — hover इवेंट जो माउस के ऊपर रहते हुए box का रंग बदल देता है।
onmouseout="this.style.backgroundColor='white'" — उसका जोड़ा, जो माउस के हटते ही रंग वापस बदल देता है।
document.getElementById("msg").innerHTML = ... — हर handler अपना संदेश उसी paragraph में लिखता है, ताकि देखने वाले को पता चले कि अभी क्या हुआ।

उदाहरण

Example

<!DOCTYPE html>
<html>
<head>
<title>Events — Click and Hover</title>
<style>
body { font-family: Verdana, sans-serif; background-color: #fff8e1; }
h1 { color: #b45309; }
button { background-color: #e13611; color: white; padding: 10px 18px; border: none; margin: 4px; }
#hoverBox { background-color: white; border: 2px solid #b45309; padding: 20px; width: 300px; text-align: center; }
</style>
</head>
<body>

<h1>Events — Click and Hover</h1>
<button onclick="orderChai()">Order Chai (onclick)</button>
<button id="surpriseBtn">Surprise Me (listener)</button>
<div id="hoverBox" onmouseover="this.style.backgroundColor='orange'" onmouseout="this.style.backgroundColor='white'">Hover over this box</div>
<p id="msg">Click a button or hover over the box.</p>

<script>
function orderChai() {
  document.getElementById("msg").innerHTML = "Your chai is on its way!";
}
document.getElementById("surpriseBtn").addEventListener("click", function() {
  document.getElementById("msg").innerHTML = "Surprise! Free kulhad chai today.";
});
</script>

</body>
</html>

परिणाम

परिणाम — ब्राउज़र में यह कैसा दिखता है

खुद करके देखें — लाइव एडिटर

नीचे दिया गया कोड बदलें और चलाएँ दबाएँ — परिणाम तुरंत दिखेगा। कोई फाइल सहेजनी नहीं है, कोई लॉगिन नहीं चाहिए।

<!DOCTYPE html>
<html>
<head>
<title>Events — Click and Hover</title>
<style>
body { font-family: Verdana, sans-serif; background-color: #fff8e1; }
h1 { color: #b45309; }
button { background-color: #e13611; color: white; padding: 10px 18px; border: none; margin: 4px; }
#hoverBox { background-color: white; border: 2px solid #b45309; padding: 20px; width: 300px; text-align: center; }
</style>
</head>
<body>

<h1>Events — Click and Hover</h1>
<button onclick="orderChai()">Order Chai (onclick)</button>
<button id="surpriseBtn">Surprise Me (listener)</button>
<div id="hoverBox" onmouseover="this.style.backgroundColor='orange'" onmouseout="this.style.backgroundColor='white'">Hover over this box</div>
<p id="msg">Click a button or hover over the box.</p>

</body>
</html>

पूरे एडिटर में खोलें

परिणाम

खुद क्यों सीखें — AI से पूछने के बजाय?

AI आपके लिए कोड लिख सकता है, लेकिन वह आपके लिए सोच नहीं सकता। जब आप HTML खुद सीखते हैं, तो आपका दिमाग असली कौशल बनाता है: आप समझते हैं कि पेज ऐसा क्यों दिखता है, टूटने पर उसे ठीक कर सकते हैं, और परीक्षा या इंटरव्यू में बिना मदद के जवाब दे सकते हैं। यही कौशल नौकरी दिलाता है — कॉपी किया हुआ जवाब नहीं।