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

इवेंट डेलिगेशन

टिकट खिड़की पर एक पट्टी है। पैरेंट #strip है। उस पर दो बटन पहले से हैं: #red, पाठ red, और #blue, पाठ blue। पट्टी के नीचे #note अभी blank कहता है।
हर बटन पर अलग श्रोता मत लगाओ। addEventListener एक बार पट्टी पर ही लगाओ। अंदर के बटन का क्लिक ऊपर पट्टी तक पहुँचता है। event.target वह बटन है। event.currentTarget पट्टी है, यानी वह एलिमेंट जहाँ यह श्रोता बैठा है।
बटन #gold अभी पेज पर नहीं है। श्रोता सहेजने के बाद बनता है, पट्टी से जुड़ता है, और उस पर क्लिक होता है। वही फ़ंक्शन चलता है। पर्ची gold हो जाती है। स्क्रिप्ट पहले red दबाती है, फिर blue, फिर gold। addEventListener एक ही बार चला, इसलिए hands 1 है। पट्टी के नीचे की पंक्ति है red / blue / gold / 1। ये बटन type="button" हैं। यहाँ preventDefault और stopPropagation नहीं हैं। वे पट्टिका वाले पेज के थे, और वहाँ श्रोता के बाद नया बच्चा नहीं जुड़ा था।

हर टिकट के लिए एक श्रोता

पट्टिका वाले पेज ने पैरामीटर event रखा और दीवार के अंदर एक लिंक पर type, target और currentTarget पढ़ा। उसकी पंक्ति click / seal / plaque / true / quiet थी। कोट की खूँटी ने wool और silk को बिना पैरामीटर रखा। उसकी पंक्ति wool silk / 2 / peg थी। यहाँ पैरामीटर event रहता है, पर target का काम दूसरा है: कौन सा बच्चा क्लिक हुआ, चाहे वह तब मौजूद न रहा हो।
getElementById तुम्हें सिर्फ पट्टी, लाल बटन, नीला बटन और पर्ची देता है। gold createElement से जन्म लेता है। red पर एक श्रोता और blue पर दूसरा gold को नहीं सुनेंगे, जब तक appendChild के बाद फिर से न लगाओ। पट्टी पर एक श्रोता को वह दूसरा लगाना नहीं चाहिए। currentTarget फ़ंक्शन के अंदर पढ़ो। फ़ंक्शन लौटने के बाद वह प्रॉपर्टी null होती है।

पट्टी क्या लिखती है

पर्ची blank से शुरू होती है। बटन के शब्द red और blue रहते हैं, gold बाद में आता है। पंक्तियाँ क्रम से पढ़ो। हर टुकड़ा दो बटन वाली पट्टी से शुरू होता है, सिवाय पेज वाली पंक्ति के, जो नीचे का डेमो है। वह डेमो addEventListener एक बार बुलाता है।

📊 पट्टी क्या लिखती है

पल क्या पढ़ते हो पर्ची का पाठ आसान उलझन
श्रोता पट्टी पर, red पर क्लिक event.target.id red currentTarget पढ़ना, जो strip है
वही क्लिक, currentTarget पढ़ना event.currentTarget.id strip टिकट का id पढ़ना
वही श्रोता, blue पर क्लिक event.target.id blue blue को अपना श्रोता देना
श्रोता के बाद gold बनाना, फिर क्लिक event.target.id gold नया बटन चुप रहेगा, यह सोचना
पट्टी पर क्लिक, गार्ड के साथ पर्ची skip id strip लिखना
पेज की स्क्रिप्ट पंक्ति red / blue / gold / 1 पट्टिका की पंक्ति, या आखिर में 3

बटन पर क्लिक एक घटना है। रास्ते के हर श्रोते के लिए target वही बटन रहता है। यहाँ एक श्रोता है, पट्टी पर, इसलिए फ़ंक्शन चलते हुए currentTarget पट्टी है। क्लिक पट्टी तक पहुँचता है क्योंकि कोई stopPropagation नहीं बुलाता। पट्टिका वाले पेज ने वह रास्ता काट दिया था। यह पेज नहीं काटता।
preventDefault ब्राउज़र की डिफ़ॉल्ट क्रिया के लिए है, जैसे लिंक का पेज छोड़ना। ये बटन हैं, लिंक नहीं। preventDefault न बुलाना पूरा पेज है, कोई छूटी हुई पंक्ति नहीं।
अगर event.target और event.currentTarget एक ही नोड हों, तो क्लिक पट्टी पर गिरा, बटन पर नहीं। फ़ंक्शन skip लिखता है और कागज़ को टिकट नहीं मानता। seen.join(" / ") सिर्फ वे id जोड़ता है जो पहले से seen में हैं। hands उसके बाद आता है। आखिरी टोकन यह है कि addEventListener कितनी बार चला, यह नहीं कि कितने टिकट दबे।

क्लिक के नीचे का टिकट

श्रोता पट्टी पर है। फ़ंक्शन पैरामीटर event रखता है और event.target.id पर्ची में लिखता है। फिर पेज red पर क्लिक करता है। red पर addEventListener नहीं बुलाता।

टिकट पढ़ना

javascript 
let strip = document.getElementById("strip");
let note = document.getElementById("note");
function take(event) {
note.textContent = event.target.id;
}
strip.addEventListener("click", take);
document.getElementById("red").click();
console.log(note.textContent);

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

श्रोता किसका है

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

दोनों id पढ़ना

javascript 
let strip = document.getElementById("strip");
let note = document.getElementById("note");
function take(event) {
note.textContent = event.target.id + " " + event.currentTarget.id;
}
strip.addEventListener("click", take);
document.getElementById("red").click();
console.log(note.textContent);

आउटपुट red strip है। पहला शब्द टिकट है। दूसरा वह एलिमेंट है जिसके पास यह श्रोता है। अगर श्रोता खुद red पर हो और red पर क्लिक हो, तो आउटपुट red red होगा। यह पढ़ना पट्टी का है, इसलिए दोनों id अलग हैं।

जो टिकट पहले से बगल में था

फिर नई पट्टी। एक श्रोता, अभी भी सिर्फ पट्टी पर। इस बार क्लिक blue पर है। blue शुरू से मार्कअप में था। उसका अपना श्रोता नहीं है।

बगल का टिकट सुनना

javascript 
let strip = document.getElementById("strip");
let note = document.getElementById("note");
function take(event) {
note.textContent = event.target.id;
}
strip.addEventListener("click", take);
document.getElementById("blue").click();
console.log(note.textContent);

आउटपुट blue है। एक addEventListener ने दोनों बटन ढक लिए जो पट्टी के अंदर पहले से थे। blue ने red की जगह नहीं ली। red को दूसरी कॉल नहीं चाहिए थी।

जो टिकट बाद में छपा

पहले श्रोता सहेजा जाता है। फिर पेज एक बटन बनाता है, उसकी id gold रखता है, type को button करता है, पाठ gold लिखता है, और उसे पट्टी से जोड़ता है। उसके बाद ही gold पर क्लिक होता है।

बाद में जोड़ा टिकट सुनना

javascript 
let strip = document.getElementById("strip");
let note = document.getElementById("note");
function take(event) {
note.textContent = event.target.id;
}
strip.addEventListener("click", take);
let gold = document.createElement("button");
gold.id = "gold";
gold.type = "button";
gold.textContent = "gold";
strip.appendChild(gold);
gold.click();
console.log(note.textContent);

आउटपुट gold है। जब addEventListener चला, gold मौजूद नहीं था। क्लिक gold से ऊपर पट्टी तक जाता है, और target gold है। gold पर श्रोता नहीं लगाते।

कागज़ पर क्लिक

पट्टी खुद भी एक क्लिक होने वाला नोड है। अगर क्लिक का target पट्टी हो, तो रखने के लिए टिकट की id नहीं है। फ़ंक्शन target को currentTarget से मिलाता है। दोनों एक हों तो पर्ची skip हो जाती है।

पट्टी के क्लिक को छोड़ना

javascript 
let strip = document.getElementById("strip");
let note = document.getElementById("note");
function take(event) {
if (event.target === event.currentTarget) {
note.textContent = "skip";
return;
}
note.textContent = event.target.id;
}
strip.addEventListener("click", take);
strip.click();
console.log(note.textContent);

आउटपुट skip है। target और currentTarget दोनों पट्टी हैं, इसलिए गार्ड कागज़ को रोक देता है। red पर क्लिक अभी भी red लिखता है, क्योंकि वे दो संदर्भ अलग हैं। गार्ड हटा दो तो strip.click() पर्ची में id strip लिख देगा।

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

स्क्रिप्ट body के अंत में है, जब पट्टी और पैराग्राफ बन चुके हों। एक श्रोता सहेजा जाता है और hands 1 हो जाता है। पहले red क्लिक होता है, फिर blue। हर टिकट की id seen में जाती है। gold बनता है, जुड़ता है, और क्लिक होता है, इसलिए gold भी seen में जाता है। पंक्ति उस तीसरे क्लिक के बाद लिखी जाती है। पेज पट्टी पर क्लिक नहीं करता, इसलिए skip पंक्ति में नहीं है।

पेज डेमो — टिकट पट्टी

html 
<!DOCTYPE html>
<html>
<head>
<title>event-delegation — page</title>
</head>
<body>
<div id="strip">
<button id="red" type="button">red</button>
<button id="blue" type="button">blue</button>
</div>
<p id="note">blank</p>
<p id="line">…</p>
<script>
let strip = document.getElementById("strip");
let note = document.getElementById("note");
let seen = [];
let hands = 0;
function take(event) {
if (event.target === event.currentTarget) {
note.textContent = "skip";
return;
}
note.textContent = event.target.id;
seen.push(event.target.id);
}
strip.addEventListener("click", take);
hands = hands + 1;
document.getElementById("red").click();
document.getElementById("blue").click();
let gold = document.createElement("button");
gold.id = "gold";
gold.type = "button";
gold.textContent = "gold";
strip.appendChild(gold);
gold.click();
document.getElementById("line").textContent =
seen.join(" / ") + " / " + hands;
</script>
</body>
</html>

पंक्ति है red / blue / gold / 1। तीन id वे टिकट हैं जो क्रम से क्लिक हुए। आखिरी टोकन hands है। addEventListener एक बार चला, इसलिए टोकन 1 है, 3 नहीं। पर्ची gold पर खत्म होती है, क्योंकि आखिरी क्लिक gold था। शब्द blank चला गया। शब्द skip आता ही नहीं। पट्टिका की पंक्ति और खूँटी की पंक्ति दूसरे पेज हैं।
जो बटन सिर्फ पाठ रखता है, event.target बटन पर रहता है, इसलिए id red, blue या gold होता है। बटन के अंदर span रखो तो क्लिक span पर गिर सकता है। span की id नहीं होती। यह पेज ऐसा नहीं करता।

खिड़की पर

  1. पट्टी पर एक श्रोता रखो और red पर क्लिक करो। पर्ची red है। red का अपना श्रोता नहीं है।
  2. उसी श्रोते से blue पर क्लिक करो। पर्ची blue है।
  3. gold बनाओ, जोड़ो, और क्लिक करो। पर्ची gold है। श्रोता पहले से पट्टी पर था।
  4. पट्टी पर क्लिक करो। गार्ड के साथ पर्ची skip है। फिर पंक्ति पढ़ो: red / blue / gold / 1.

खिड़की पर चूक

लेबल अभी भी red, blue और gold कहते हैं। पर्ची शब्द टिकट नहीं है।

  • red पर एक श्रोता और blue पर दूसरा, फिर हैरानी कि gold चुप रहा
  • टिकट चाहिए था और event.currentTarget पढ़ लिया
  • पट्टी चाहिए थी और event.target पढ़ लिया
  • गार्ड भूलना, जिससे strip.click() strip लिख दे
  • बटन के अंदर span, जिससे target span हो और id खाली रहे
  • gold पर फिर addEventListener बुलाना, फिर hands को 2 गिनना
  • preventDefault या stopPropagation बुलाना; वह पट्टिका वाला पेज था
  • यह उम्मीद करना कि फ़ंक्शन का तर्क बटन एलिमेंट हो
  • पंक्ति को click / seal / plaque / true / quiet पढ़ना, या wool silk / 2 / peg
  • आखिरी टोकन को 3 पढ़ना, क्योंकि तीन टिकट क्लिक हुए

यह साथ रहे

  • पट्टी पर एक addEventListener अंदर के हर बटन को सुनता है
  • red के क्लिक पर event.target.id red है और event.currentTarget.id strip है
  • वही श्रोता blue के क्लिक पर blue लिखता है
  • gold, जो श्रोता के बाद बना, फिर भी gold लिखता है
  • पट्टी पर क्लिक, गार्ड के साथ, skip लिखता है
  • पेज की पंक्ति है red / blue / gold / 1

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

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

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

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

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

📝 निर्देश

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