लोड हो रहा है...

इवेंट ऑब्जेक्ट

संग्रहालय की दीवार पर एक पट्टिका है। बाहरी डिब्बा #wall है। उसके अंदर #plaque एक लिंक रखता है, #seal। लिंक पर open लिखा है और href /wing है। दीवार के नीचे #slip अभी blank कहता है।
ब्राउज़र फ़ंक्शन को एक ऑब्जेक्ट देता है। पैरामीटर का नाम event है। event.type घटना की तरह है। क्लिक इस स्ट्रिंग को click कर देता है। event.target वह एलिमेंट है जिस पर क्लिक गिरा। event.currentTarget वह एलिमेंट है जिस पर यह श्रोता बैठा है। दोनों तभी एक होते हैं जब क्लिक और श्रोता एक ही एलिमेंट पर हों।
मुहर एक लिंक है। preventDefault /wing की ओर जाना रोकता है। उस कॉल के बाद event.defaultPrevented true होता है। कॉल छोड़ दो तो झंडा false रहता है। फिर क्लिक बाहर की ओर जाता है: मुहर, पट्टिका, दीवार। पट्टिका पर stopPropagation यह रास्ता काट देता है, दीवार का श्रोता नहीं चलता।
पेज की स्क्रिप्ट मुहर पर एक बार क्लिक करती है। पट्टिका के नीचे की पंक्ति है click / seal / plaque / true / quiet। यहाँ onclick नहीं लिखते, removeEventListener नहीं बुलाते, और नया एलिमेंट नहीं बनाते।

वह ऑब्जेक्ट जो ब्राउज़र देता है

पिछला पेज कोट की खूंटी था। wool और silk का कोई पैरामीटर नहीं था, वे यह ऑब्जेक्ट नहीं पढ़ सकते थे। उनकी पंक्ति wool silk / 2 / peg थी। घंटी वाले पेज पर onclick भरा जाता था और this पढ़ा जाता था। इस पेज पर नहीं। getElementById सिर्फ दीवार, पट्टिका, मुहर और पर्ची देता है।
addEventListener अब भी फ़ंक्शन को सिर्फ रखता है। ऑब्जेक्ट तब आता है जब क्लिक फ़ंक्शन चलाता है, जोड़ते समय नहीं। currentTarget को फ़ंक्शन के अंदर पढ़ो। फ़ंक्शन लौटने के बाद यह प्रॉपर्टी null होती है।

एक क्लिक क्या बताता है

पर्ची blank से शुरू होती है। लिंक का पाठ open रहता है। पंक्तियाँ क्रम से पढ़ो। हर टुकड़ा नई दीवार से शुरू होता है, सिवाय पेज वाली पंक्ति के, जो नीचे का डेमो है। वह डेमो removeEventListener नहीं बुलाता।

📊 एक क्लिक क्या बताता है

क्षण क्या पढ़ते हो पर्ची का पाठ आसान भ्रम
श्रोता मुहर पर, seal.click(), प्रकार पढ़ना event.type click id को प्रकार समझना
श्रोता पट्टिका पर, मुहर पर क्लिक, target event.target.id seal currentTarget पढ़ना
वही क्लिक, currentTarget event.currentTarget.id plaque target पढ़ना
मुहर पर preventDefault, फिर झंडा event.defaultPrevented true सोचना कि लिंक अब भी जाता है
बिना preventDefault event.defaultPrevented false सोचना कि हर श्रोता लिंक रोकता है
पट्टिका पर stopPropagation, दीवार भी सुनती है marks जुड़ना plaque plaque wall की उम्मीद
पेज स्क्रिप्ट, एक click पंक्ति click / seal / plaque / true / quiet पंक्ति का wall पर खत्म होना

मुहर पर क्लिक एक ही ऑब्जेक्ट है। रास्ते के हर श्रोता वही देखता है। type नहीं बदलता। target नहीं बदलता। currentTarget बदलता है: यह वह एलिमेंट है जिसका श्रोता अभी चल रहा है।
preventDefault ब्राउज़र की डिफ़ॉल्ट क्रिया से बात करता है। इस लिंक के लिए वह क्रिया /wing पर जाना है। कॉल सूची से श्रोता नहीं हटाती। stopPropagation रास्ते से बात करता है। लिंक नहीं रोकता। एक को बुलाना दूसरे को बुलाना नहीं है।
join(" ") सिर्फ उन शब्दों के बीच जगह रखता है जो पहले से marks में हैं। यहाँ खाली सूची नहीं जोड़ी जाती। पर्ची शब्द blank से शुरू होती है और सिर्फ श्रोता के अंदर, या क्लिक के बाद पेज स्क्रिप्ट में, बदलती है।

प्रकार

श्रोता मुहर पर है। फ़ंक्शन पैरामीटर को event कहता है और event.type पर्ची में लिखता है। फिर seal.click() चलता है।

प्रकार पढ़ना

javascript 
let seal = document.getElementById("seal");
let slip = document.getElementById("slip");
function readType(event) {
slip.textContent = event.type;
}
seal.addEventListener("click", readType);
seal.click();
console.log(slip.textContent);

आउटपुट click है। प्रकार घटना की तरह है, id नहीं और open शब्द नहीं।

जिस एलिमेंट पर क्लिक गिरा

नई दीवार। श्रोता पट्टिका पर है, मुहर पर नहीं। क्लिक फिर भी मुहर पर गिरता है। event.target वही एलिमेंट है, इसलिए event.target.id seal है।

target पढ़ना

javascript 
let plaque = document.getElementById("plaque");
let seal = document.getElementById("seal");
let slip = document.getElementById("slip");
function readTarget(event) {
slip.textContent = event.target.id;
}
plaque.addEventListener("click", readTarget);
seal.click();
console.log(slip.textContent);

आउटपुट seal है। श्रोता का एलिमेंट पट्टिका है। target पट्टिका नहीं बताता। वह क्लिक के नीचे वाला एलिमेंट बताता है।

श्रोता कहाँ बैठा है

वही नई दीवार, श्रोता अब भी पट्टिका पर, क्लिक अब भी मुहर पर। पर्ची दोनों id लिखती है: पहले target, फिर currentTarget।

दोनों id पढ़ना

javascript 
let plaque = document.getElementById("plaque");
let seal = document.getElementById("seal");
let slip = document.getElementById("slip");
function readWhere(event) {
slip.textContent = event.target.id + " " + event.currentTarget.id;
}
plaque.addEventListener("click", readWhere);
seal.click();
console.log(slip.textContent);

आउटपुट seal plaque है। पहला शब्द क्लिक का है। दूसरा उस एलिमेंट का है जिस पर यह श्रोता है। श्रोता को मुहर पर रखो और मुहर पर क्लिक करो: दोनों id seal होंगे, क्योंकि क्लिक और श्रोता एक एलिमेंट साझा करते हैं। यह पढ़ना पट्टिका से है, इसलिए id अलग हैं। currentTarget को फ़ंक्शन के अंदर पढ़ो। लौटने के बाद वह null है।

लिंक रोकना

मुहर का href /wing है। इस क्लिक की डिफ़ॉल्ट क्रिया लिंक पर जाना है। preventDefault वह क्रिया रोकता है। श्रोता नहीं हटाता। कॉल के ठीक बाद event.defaultPrevented true होता है।

लिंक रोकना

javascript 
let seal = document.getElementById("seal");
let slip = document.getElementById("slip");
function hold(event) {
event.preventDefault();
slip.textContent = String(event.defaultPrevented);
}
seal.addEventListener("click", hold);
seal.click();
console.log(slip.textContent);

आउटपुट true है। preventDefault छोड़ दो तो वही पढ़ना false है। पर्ची false कहेगी और लिंक की डिफ़ॉल्ट क्रिया बनी रहेगी। stopPropagation यह झंडा नहीं लगाता।

क्लिक बाहर की ओर जाता है

मुहर पट्टिका के अंदर है और पट्टिका दीवार के अंदर। मुहर पर क्लिक पट्टिका के श्रोता तक पहुँचता है, फिर दीवार के श्रोता तक, जब तक रास्ता न कटे। पट्टिका पर stopPropagation उसे काट देता है। दीवार का फ़ंक्शन नहीं चलता। preventDefault रास्ता नहीं काटता।

रास्ता काटना

javascript 
let wall = document.getElementById("wall");
let plaque = document.getElementById("plaque");
let seal = document.getElementById("seal");
let slip = document.getElementById("slip");
let marks = [];
function onPlaque(event) {
marks.push("plaque");
event.stopPropagation();
}
function onWall() {
marks.push("wall");
}
plaque.addEventListener("click", onPlaque);
wall.addEventListener("click", onWall);
seal.click();
slip.textContent = marks.join(" ");
console.log(slip.textContent);

आउटपुट plaque है। wall शब्द marks में नहीं जुड़ता। stopPropagation के बिना वही क्लिक plaque wall लिखता। नीचे का डेमो रास्ता काटता है और लिंक भी रोकता है।

पट्टिका के नीचे एक पंक्ति

स्क्रिप्ट body के अंत में है, जब दीवार और पैराग्राफ मौजूद हैं। मुहर का श्रोता preventDefault बुलाता है। पट्टिका का श्रोता stopPropagation बुलाता है, फिर प्रकार, target की id, currentTarget की id और झंडा रखता है। दीवार का श्रोता heard को wall करता, पर रास्ता पहले कट चुका है, इसलिए heard quiet रहता है। पंक्ति seal.click() के बाद लिखी जाती है, जब दीवार को मौका मिल चुका होता है।

पेज डेमो — संग्रहालय की पट्टिका

html 
<!DOCTYPE html>
<html>
<head>
<title>event-object — page</title>
</head>
<body>
<div id="wall">
<div id="plaque">
<a id="seal" href="/wing">open</a>
</div>
</div>
<p id="slip">blank</p>
<p id="line">…</p>
<script>
let wall = document.getElementById("wall");
let plaque = document.getElementById("plaque");
let seal = document.getElementById("seal");
let slip = document.getElementById("slip");
let kind = "";
let from = "";
let on = "";
let held = "";
let heard = "quiet";
seal.addEventListener("click", function (event) {
event.preventDefault();
});
plaque.addEventListener("click", function (event) {
event.stopPropagation();
kind = event.type;
from = event.target.id;
on = event.currentTarget.id;
held = String(event.defaultPrevented);
});
wall.addEventListener("click", function () {
heard = "wall";
});
seal.click();
slip.textContent = kind + " " + from + " " + on;
document.getElementById("line").textContent =
kind + " / " + from + " / " + on + " / " + held + " / " + heard;
</script>
</body>
</html>

पंक्ति बनती है click / seal / plaque / true / quiet। प्रकार click है। target की id seal है। currentTarget की id plaque है, क्योंकि वह श्रोता पट्टिका पर है। झंडा true है, क्योंकि मुहर के श्रोता ने preventDefault पट्टिका के पढ़ने से पहले बुलाया। आखिरी शब्द quiet है, wall नहीं, क्योंकि stopPropagation पट्टिका पर चला। open पाठ पंक्ति में नहीं है। पर्ची click seal plaque हो जाती है। अगला पेज इवेंट डेलिगेशन है। मुहर मार्कअप में पहले से है। यहाँ श्रोता के बाद नया बच्चा नहीं जोड़ा जाता।

पट्टिका पर पाँच जाँच

  1. श्रोता मुहर पर रखो और क्लिक करो। पर्ची click है।
  2. श्रोता पट्टिका पर रखो, मुहर पर क्लिक करो, event.target.id पढ़ो। पर्ची seal है।
  3. वही श्रोता दोनों id लिखे। पर्ची seal plaque है। मुहर पर बैठा श्रोता seal seal लिखता।
  4. preventDefault बुलाओ, फिर event.defaultPrevented पढ़ो। पर्ची true है। कॉल छोड़ो तो false।
  5. पट्टिका पर stopPropagation बुलाओ और दीवार भी सुने। marks जुड़कर plaque बनता है। पंक्ति पढ़ो: click / seal / plaque / true / quiet।

यह पट्टिका कहाँ भ्रम में डालती है

लिंक अब भी open कहता है। पर्ची लिंक का पाठ नहीं है।

  • यह उम्मीद कि फ़ंक्शन का आर्गुमेंट मुहर एलिमेंट हो, इवेंट ऑब्जेक्ट नहीं
  • event.target पढ़ना जब श्रोता वाला एलिमेंट चाहिए था
  • event.currentTarget पढ़ना जब क्लिक के नीचे वाला एलिमेंट चाहिए था
  • यह उम्मीद कि preventDefault श्रोता हटा दे, जैसे खूंटी पर removeEventListener करता था
  • यह उम्मीद कि stopPropagation /wing की ओर जाना रोक दे
  • यह उम्मीद कि पट्टिका पर stopPropagation के बाद भी दीवार का श्रोता चले
  • फ़ंक्शन लौटने के बाद event.currentTarget पढ़ना और plaque की उम्मीद करना
  • onclick लिखना, या this और typeof null पढ़ना; वह घंटी वाला पेज था
  • लिंक createElement से बनाना; वह पुराना पेज था
  • पंक्ति को wall पर खत्म पढ़ना, या wool silk / 2 / peg की तरह

जो साथ रहता है

  • क्लिक के बाद event.type click होता है
  • श्रोता पट्टिका पर और क्लिक मुहर पर: event.target.id seal है
  • उसी क्लिक पर event.currentTarget.id plaque है
  • श्रोता मुहर पर हो तो target और currentTarget दोनों seal हैं
  • preventDefault event.defaultPrevented को true करता है, कॉल के बिना false रहता है
  • पट्टिका पर stopPropagation दीवार के श्रोता को चलने नहीं देता
  • पेज की पंक्ति है click / seal / plaque / true / quiet

🧠 अपने ज्ञान की परीक्षा करें

शुरू करने के लिए तैयार

अपने ज्ञान की परीक्षा करें

इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं

❓
8
प्रश्न
🎯
70%
पास करने के लिए
♾️
∞
समय
🔄
∞
प्रयास

📝 निर्देश

  • हर प्रश्न को ध्यान से पढ़ें
  • हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
  • आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
  • आपकी प्रगति शीर्ष पर दिखाई जाएगी
विषय 51 का 52
Javascript ट्यूटोरियल