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

इवेंट लिसनर

कोट रूम में एक खूंटी है। बटन #peg है और उस पर hang लिखा है। नीचे #ticket अभी blank कहता है।
पिछला पन्ना घंटी और onclick प्रॉपर्टी था। वहाँ एक ही जगह थी। दूसरा फ़ंक्शन पहले वाले को हटा देता था। यहाँ वह प्रॉपर्टी नहीं लिखते। typeof और this भी उसी पन्ने के थे।
यह पन्ना addEventListener का है। कॉल फ़ंक्शन को बटन की क्लिक-सूची में जोड़ता है। वही पंक्ति उसे चलाती नहीं। peg.click() तक टिकट blank रहता है।
पहले wool, फिर silk। दूसरा पहले वाले को नहीं हटाता। एक क्लिक दोनों चलाता है: पहले wool, फिर silk। टिकट wool silk हो जाता है। बटन पर hang ही रहता है।
वही wool फ़ंक्शन दो बार दो तो दूसरी बार कुछ नहीं जुड़ता। एक क्लिक, एक बार।
removeEventListener वही फ़ंक्शन हटाता है जो तुमने जोड़ा। नया फ़ंक्शन, चाहे लाइनें wool जैसी हों, दूसरा ऑब्जेक्ट है। wool अपनी जगह रहता है।
पेज की स्क्रिप्ट दोनों जोड़ती है और एक बार क्लिक करती है। खूंटी के नीचे की पंक्ति है wool silk / 2 / peg। यहाँ एलिमेंट नहीं बनता, स्टाइल नहीं लिखते, और इवेंट का आर्ग्युमेंट नहीं पढ़ते। वह अगला पन्ना है।

दो हुक, एक जगह नहीं

getElementById सिर्फ़ बटन और टिकट वाला पैरा देता है। हर addEventListener एक और लिसनर बगल में बैठा सकता है। क्लिक सूची को आगे से पीछे चलाता है। ये फ़ंक्शन पैरामीटर नहीं लेते। इवेंट ऑब्जेक्ट अगला पन्ना है।

कौन सुन रहा है

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

📊 कौन सुन रहा है

पल कौन सुन रहा है टिकट का पाठ आसान भ्रम
click, अभी कोई लिसनर नहीं कोई नहीं blank खाली क्लिक wool लिख दे
wool का addEventListener, click से पहले wool blank जोड़ने की कॉल ही wool लिख दे
सिर्फ़ wool के साथ click wool wool बटन का पाठ wool बन जाए
पहले wool फिर silk, एक click दोनों, wool फिर silk wool silk सिर्फ़ दूसरा चले
wool का removeEventListener, फिर click silk silk दोनों अब भी चलें
पेज स्क्रिप्ट, एक click दोनों wool silk पंक्ति hang पर खत्म हो

addEventListener("click", wool) wool को क्लिक-सूची के अंत में रखता है। wool को बुलाता नहीं। peg.click() क्लिक भेजता है और सूची आगे से चलाता है। बटन का अपना पाठ नहीं बदलता।
silk बाद में जोड़ो तो wool के पीछे बैठता है। दोनों चलते हैं। क्रम वही है जिसमें जोड़ा।
एक ही फ़ंक्शन ऑब्जेक्ट दो बार नहीं जुड़ता। peg.addEventListener("click", wool) और फिर वही पंक्ति सूची को एक पर रखती है। एक क्लिक wool को एक बार चलाता है। parts.length 1 होता है और टिकट wool होता है।
removeEventListener("click", wool) उस ऑब्जेक्ट को हटाता है। silk जोड़ा हो तो silk रहता है। नया फ़ंक्शन जो "wool" को push भी करे, मेल नहीं खाता। peg.removeEventListener("click", function () { parts.push("wool"); }) के बाद असली wool सूची में रहता है। क्लिक फिर भी wool लिखता है।
join(" ") सिर्फ़ उन शब्दों के बीच स्पेस लगाता है जो parts में पहले से हैं। खाली सूची को यहाँ नहीं जोड़ते। टिकट blank शब्द से शुरू होता है और सिर्फ़ लिसनर के अंदर बदलता है।

अभी कोई नहीं सुन रहा

फ़ाइल बटन और पैरा से खुलती है। कोई लिसनर नहीं जोड़ा। क्लिक चलता है, और ये दो लॉग टिकट और बटन का शब्द पूछते हैं।

शांत खूंटी

javascript 
let peg = document.getElementById("peg");
let ticket = document.getElementById("ticket");
peg.click();
console.log(ticket.textContent);
console.log(peg.textContent);

लॉग हैं blank और hang। क्लिक-सूची खाली थी। पैरा नहीं बदला।

लिसनर इंतज़ार करता है

addEventListener wool को रखता है। बॉडी उस पंक्ति पर नहीं चलती। parts खाली रहता है, टिकट blank रहता है, बटन अब भी hang कहता है।

जोड़ो, चलाओ मत

javascript 
let peg = document.getElementById("peg");
let ticket = document.getElementById("ticket");
let parts = [];
function wool() {
parts.push("wool");
ticket.textContent = parts.join(" ");
}
peg.addEventListener("click", wool);
console.log(ticket.textContent);
console.log(parts.length);
console.log(peg.textContent);

लॉग हैं blank, 0, और hang। wool सूची में है। किसी ने बुलाया नहीं, इसलिए parts में शब्द नहीं।

click सूची वाले को चलाता है

यह टुकड़ा फिर नए बटन से शुरू होता है। सिर्फ़ wool जुड़ता है, फिर peg.click()। टिकट wool हो जाता है। बटन का पाठ hang रहता है। parts.length 1 है।

एक लिसनर

javascript 
let peg = document.getElementById("peg");
let ticket = document.getElementById("ticket");
let parts = [];
function wool() {
parts.push("wool");
ticket.textContent = parts.join(" ");
}
peg.addEventListener("click", wool);
peg.click();
console.log(ticket.textContent);
console.log(peg.textContent);
console.log(parts.length);

लॉग हैं wool, hang, और 1। एक लिसनर, एक शब्द। hang अब भी बटन है।

silk, wool के बगल बैठता है

नया बटन। पहले wool, फिर silk, और उसके बाद एक click। दोनों जोड़ के बीच क्लिक नहीं। wool "wool" रखता है और लिखता है। silk "silk" रखता है और दोनों शब्द स्पेस के साथ लिखता है। टिकट wool silk है। parts.length 2 है। बटन hang रहता है।

दोनों चलते हैं

javascript 
let peg = document.getElementById("peg");
let ticket = document.getElementById("ticket");
let parts = [];
function wool() {
parts.push("wool");
ticket.textContent = parts.join(" ");
}
function silk() {
parts.push("silk");
ticket.textContent = parts.join(" ");
}
peg.addEventListener("click", wool);
peg.addEventListener("click", silk);
peg.click();
console.log(ticket.textContent);
console.log(parts.length);
console.log(peg.textContent);

लॉग हैं wool silk, 2, और hang। silk ने wool को नहीं मिटाया। एक क्लिक ने सूची को जोड़ के क्रम में चलाया।

wool को खूंटी से उतारो

नया बटन। दोनों फ़ंक्शन जुड़ते हैं, फिर removeEventListener उसी wool फ़ंक्शन के साथ चलता है। silk रहता है। एक click सिर्फ़ silk चलाता है। टिकट silk है, wool silk नहीं। parts.length 1 है।

wool हटाओ

javascript 
let peg = document.getElementById("peg");
let ticket = document.getElementById("ticket");
let parts = [];
function wool() {
parts.push("wool");
ticket.textContent = parts.join(" ");
}
function silk() {
parts.push("silk");
ticket.textContent = parts.join(" ");
}
peg.addEventListener("click", wool);
peg.addEventListener("click", silk);
peg.removeEventListener("click", wool);
peg.click();
console.log(ticket.textContent);
console.log(parts.length);
console.log(peg.textContent);

लॉग हैं silk, 1, और hang। wool वही ऑब्जेक्ट था जो तुमने जोड़ा, इसलिए सूची से गया। नीचे का डेमो किसी को नहीं हटाता।

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

स्क्रिप्ट body के अंत में है, जब बटन और पैरा बन चुके हों। wool जोड़ती है, फिर silk, फिर एक बार click। हर फ़ंक्शन hits में 1 जोड़ता है और अपना शब्द रखता है। पंक्ति टिकट का पाठ, गिनती और peg.id को जोड़ती है। बटन का पाठ नहीं लिखती। इवेंट आर्ग्युमेंट नहीं पढ़ती।

पेज डेमो — खूंटी

html 
<!DOCTYPE html>
<html>
<head>
<title>event-listeners — page</title>
</head>
<body>
<button id="peg" type="button">hang</button>
<p id="ticket">blank</p>
<p id="line">…</p>
<script>
let peg = document.getElementById("peg");
let ticket = document.getElementById("ticket");
let parts = [];
let hits = 0;
function wool() {
hits = hits + 1;
parts.push("wool");
ticket.textContent = parts.join(" ");
}
function silk() {
hits = hits + 1;
parts.push("silk");
ticket.textContent = parts.join(" ");
}
peg.addEventListener("click", wool);
peg.addEventListener("click", silk);
peg.click();
document.getElementById("line").textContent =
ticket.textContent + " / " + hits + " / " + peg.id;
</script>
</body>
</html>

पंक्ति है wool silk / 2 / peg। टिकट wool silk है, blank नहीं। गिनती 2 है, क्योंकि दोनों लिसनर एक क्लिक पर चले। आखिरी शब्द बटन की आईडी है, peg.id, hang नहीं। बटन पर अब भी hang है। अगला पन्ना इवेंट ऑब्जेक्ट है। वह आर्ग्युमेंट पढ़ता है जो ये फ़ंक्शन नहीं लेते।

खूंटी पर पाँच जाँच

  1. बिना लिसनर क्लिक करो। टिकट blank है और बटन hang।
  2. wool जोड़ो और क्लिक मत करो। टिकट blank है, parts.length 0 है, बटन hang है।
  3. wool जोड़ो, फिर क्लिक करो। टिकट wool है, बटन hang है, parts.length 1 है।
  4. wool, फिर silk जोड़ो, एक बार क्लिक करो। टिकट wool silk है, parts.length 2 है, बटन hang है।
  5. दोनों जोड़ो, wool हटाओ, फिर क्लिक करो। टिकट silk है, parts.length 1 है, बटन hang है। पेज की पंक्ति पढ़ो: wool silk / 2 / peg।

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

बटन पर अब भी hang है। सूची में दोनों फ़ंक्शन थे, या सिर्फ़ silk, या कोई नहीं।

  • यह उम्मीद कि दूसरा addEventListener पहले की जगह ले ले, जैसे onclick लेता था
  • यह उम्मीद कि addEventListener खुद टिकट को wool कर दे
  • यह उम्मीद कि दोनों जुड़े हों तो सिर्फ़ silk चले
  • यह उम्मीद कि बटन का पाठ wool हो जाए
  • यह उम्मीद कि नए फ़ंक्शन वाला removeEventListener wool हटा दे
  • वही wool फ़ंक्शन दो बार जोड़ना और दो बार चलने की उम्मीद
  • यहाँ onclick, typeof null, या this.id पढ़ना; वह घंटी वाला पन्ना था
  • यहाँ event.target पढ़ना; ये फ़ंक्शन आर्ग्युमेंट नहीं लेते, इवेंट ऑब्जेक्ट अगला पन्ना है
  • बटन createElement से बनाना; वह पुराना पन्ना था
  • पंक्ति को blank / 0 / hang पढ़ना

क्या रह जाता है

  • बिना लिसनर peg.click() टिकट को blank और बटन को hang छोड़ता है
  • addEventListener क्लिक तक टिकट को blank रखता है
  • सिर्फ़ wool के साथ एक क्लिक टिकट को wool करता है और बटन hang रहता है
  • wool फिर silk, फिर एक क्लिक, टिकट को wool silk करता है
  • उसी wool पर removeEventListener, फिर क्लिक, टिकट को silk करता है
  • वही wool दो बार जुड़ने पर एक बार चलता है, और नया फ़ंक्शन उसे नहीं हटाता
  • पेज की पंक्ति है wool silk / 2 / peg

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

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

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

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

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

📝 निर्देश

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