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

JavaScript इवेंट

फ्लैट के दरवाज़े पर एक घंटी है। बटन #bell है और उस पर press लिखा है। उसके नीचे #chime अभी silent कहता है। HTML में onclick एट्रिब्यूट नहीं है, इसलिए bell.onclick शुरू से null है।
पुराना जाल: JavaScript में typeof null का मान "object" होता है। इसलिए typeof bell.onclick भी "object" है, न "null" और न "undefined"। तुलना bell.onclick === null सही है।
onclick में फ़ंक्शन रखने से घंटी उसी वक्त नहीं बजती। चाइम silent रहता है, जब तक bell.click() उस फ़ंक्शन को न चलाए जो जगह में बैठा है। उस जगह में एक ही फ़ंक्शन रहता है। दूसरा लिखोगे तो पहला हट जाता है। एक क्लिक दोनों को नहीं चलाता। addEventListener अगला पन्ना है; वहाँ श्रोता एक के ऊपर एक बैठते हैं। यह पन्ना उसे नहीं बुलाता।
bell.onclick = null जगह खाली कर देता है। उसके बाद क्लिक चाइम को नहीं छूता। फ़ंक्शन के अंदर this वही बटन है, इसलिए this.id bell है। बटन का शब्द press ही रहता है। पन्ने की स्क्रिप्ट एक बार click करती है। घंटी के नीचे की पंक्ति है dong / 1 / bell। यहाँ एलिमेंट नहीं बनता और CSS प्रॉपर्टी नहीं लिखी जाती।

बटन पर एक जगह

पिछला पन्ना createElement से li नोड बनाता था और append, prepend, insertBefore से उन्हें रखता था। यहाँ नोड नहीं बनता और children नहीं पढ़ा जाता। उससे पहले के पन्ने ने रंग की पट्टी पर style और classList लिखा था। यहाँ style नहीं दिया जाता। getElementById सिर्फ बटन और पैराग्राफ देता है। नई बात onclick प्रॉपर्टी है: एक फ़ंक्शन, या null।

जगह में क्या है

बटन press से शुरू होता है और नीचे silent है। पंक्तियाँ क्रम से पढ़ो। हर टुकड़ा उसी ताज़े बटन से शुरू होता है, सिवाय पन्ने वाली पंक्ति के, जो नीचे का डेमो है। वह डेमो null नहीं रखता।

📊 जगह में क्या है

पल onclick में क्या है घंटी का पाठ आसान चूक
किसी असाइनमेंट से पहले null; typeof है "object" silent typeof को "null" पढ़ना
ding फ़ंक्शन के बाद, click से पहले एक फ़ंक्शन silent समझना कि असाइनमेंट ही बजा देता है
ding के साथ click के बाद वही फ़ंक्शन ding बटन का पाठ ding हो जाना
dong, ding की जगह लेता है, फिर एक click dong फ़ंक्शन, ding नहीं dong दोनों फ़ंक्शन चलना
onclick = null, फिर click, ताज़ा बटन null; typeof है "object" silent खाली जगह का फिर बजना
पन्ने की स्क्रिप्ट, एक click एक फ़ंक्शन; this.id है bell dong पंक्ति का silent पर खत्म होना

onclick एलिमेंट की प्रॉपर्टी है। हैंडलर न हो तो मान null है, और typeof null फिर भी "object" है। जगह खाली है यह जानने के लिए === null लगाओ। असाइनमेंट फ़ंक्शन को रखता है। उसे बुलाता नहीं। bell.click() एक क्लिक भेजता है और उसी फ़ंक्शन को चलाता है जो उस वक्त जगह में है। बटन का अपना पाठ नहीं बदलता। दूसरा असाइनमेंट प्रॉपर्टी के ऊपर लिख देता है। पहले फ़ंक्शन का नाम रख लिया हो तो वह ऑब्जेक्ट मेमोरी में रहता है, पर प्रॉपर्टी अब उसकी ओर नहीं देखती। onclick = null हैंडलर हटा देता है। HTML का onclick एट्रिब्यूट भी यही जगह भरता; इस बटन पर वह एट्रिब्यूट नहीं है। ऐरो फ़ंक्शन इस जगह में this को बटन नहीं बनाता। यह पन्ना साधारण function रखता है।

जगह शुरू में खाली है

फ़ाइल बटन और पैराग्राफ से खुलती है। अभी कुछ असाइन नहीं हुआ। ये चार लॉग प्रॉपर्टी, उसका typeof, घंटी का पाठ, और बटन का शब्द पूछते हैं।

शांत घंटी

javascript 
let bell = document.getElementById("bell");
let chime = document.getElementById("chime");
console.log(bell.onclick);
console.log(typeof bell.onclick);
console.log(chime.textContent);
console.log(bell.textContent);

नतीजे: null, object, silent, और press। जगह खाली है। typeof शब्द null नहीं छापता। बटन और पैराग्राफ अभी मार्कअप के शब्द दिखाते हैं।

फ़ंक्शन इंतज़ार करता है

onclick = function ... फ़ंक्शन को रख देता है। बॉडी उस पंक्ति पर नहीं चलती। घंटी अभी silent है और प्रॉपर्टी अब null नहीं है।

रखो, बजाओ मत

javascript 
let bell = document.getElementById("bell");
let chime = document.getElementById("chime");
bell.onclick = function () {
chime.textContent = "ding";
};
console.log(typeof bell.onclick);
console.log(chime.textContent);
console.log(bell.onclick === null);

नतीजे: function, silent, और false। जगह में फ़ंक्शन दिखता है। पैराग्राफ नहीं बदला, क्योंकि फ़ंक्शन को किसी ने बुलाया नहीं।

click वही एक चलाता है

bell.click() मौजूदा हैंडलर चलाता है। घंटी ding हो जाती है। बटन का पाठ press रहता है। क्लिक के बाद भी जगह में फ़ंक्शन रहता है।

एक बार क्लिक

javascript 
let bell = document.getElementById("bell");
let chime = document.getElementById("chime");
bell.onclick = function () {
chime.textContent = "ding";
};
bell.click();
console.log(chime.textContent);
console.log(bell.textContent);
console.log(typeof bell.onclick);

नतीजे: ding, press, और function। एक क्लिक, एक बदलाव, और बदलाव पैराग्राफ में है। शब्द press अभी बटन पर है।

दूसरा फ़ंक्शन पहले की जगह लेता है

यह टुकड़ा फिर ताज़े बटन से शुरू होता है। पहले ding रखा जाता है, फिर dong उसके ऊपर लिखा जाता है, और उसके बाद एक click आता है। दोनों असाइनमेंट के बीच क्लिक नहीं है, इसलिए इस दौड़ में घंटी कभी ding नहीं होती। क्लिक के बाद वह dong है। bell.onclick === ding false है। bell.onclick === dong true है।

दूसरा रह जाता है

javascript 
let bell = document.getElementById("bell");
let chime = document.getElementById("chime");
function ding() {
chime.textContent = "ding";
}
function dong() {
chime.textContent = "dong";
}
bell.onclick = ding;
bell.onclick = dong;
bell.click();
console.log(bell.onclick === ding);
console.log(bell.onclick === dong);
console.log(chime.textContent);

नतीजे: false, true, और dong। नाम ding अभी भी एक फ़ंक्शन की ओर देखता है। प्रॉपर्टी नहीं। एक क्लिक ने सिर्फ dong चलाया।

null जगह खाली करता है

इसे ताज़े बटन पर चलाओ। फ़ंक्शन रखा जाता है और किसी क्लिक से पहले मिटा दिया जाता है। null के बाद bell.click() dong नहीं लिखता। घंटी silent रहती है। typeof फिर object है, क्योंकि मान null है।

जगह खाली करो

javascript 
let bell = document.getElementById("bell");
let chime = document.getElementById("chime");
bell.onclick = function () {
chime.textContent = "dong";
};
bell.onclick = null;
bell.click();
console.log(bell.onclick);
console.log(typeof bell.onclick);
console.log(chime.textContent);

नतीजे: null, object, और silent। जो फ़ंक्शन dong लिखता, वह क्लिक के वक्त जगह में नहीं है। नीचे का पन्ना जगह खाली नहीं करता।

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

स्क्रिप्ट body के अंत में है, बटन और पैराग्राफ के बाद। वह एक फ़ंक्शन रखती है और एक बार click बुलाती है। फ़ंक्शन के अंदर taps 0 से 1 होता है, घंटी dong होती है, और this.id bell.dataset.who में लिखी जाती है। पंक्ति घंटी का पाठ, गिनती, और वह id जोड़ती है। बटन का पाठ नहीं लिखती।

पन्ने का डेमो — दरवाज़े की घंटी

html 
<!DOCTYPE html>
<html>
<head>
<title>events — page</title>
</head>
<body>
<button id="bell" type="button">press</button>
<p id="chime">silent</p>
<p id="line">…</p>
<script>
let bell = document.getElementById("bell");
let chime = document.getElementById("chime");
let taps = 0;
bell.onclick = function () {
taps = taps + 1;
chime.textContent = "dong";
bell.dataset.who = this.id;
};
bell.click();
document.getElementById("line").textContent =
chime.textContent + " / " + taps + " / " + bell.dataset.who;
</script>
</body>
</html>

पंक्ति बनती है dong / 1 / bell। घंटी dong है, silent नहीं। संख्या 1 है, क्योंकि स्क्रिप्ट एक बार क्लिक करती है। आखिरी टोकन बटन की id है, हैंडलर के अंदर के this से, शब्द press नहीं। बटन पर अभी press है। अगला पन्ना इवेंट लिसनर का है। उसका मुख्य औज़ार यह एक onclick जगह नहीं है।

पाँच जाँच

  1. onclick, typeof bell.onclick, घंटी का पाठ, और बटन का पाठ पढ़ो। मान: null, object, silent, और press।
  2. ding फ़ंक्शन रखो और क्लिक मत करो। typeof function है, घंटी silent है, और onclick === null false है।
  3. उसी ding फ़ंक्शन के साथ bell.click() बुलाओ। घंटी ding है, बटन press है, और typeof function है।
  4. पहले ding, फिर dong, फिर एक क्लिक। onclick === ding false है, onclick === dong true है, और घंटी dong है।
  5. ताज़े बटन पर फ़ंक्शन रखो, onclick को null करो, फिर क्लिक करो। मान: null, object, और silent। पन्ने की पंक्ति: dong / 1 / bell।

यह घंटी कहाँ धोखा देती है

बटन पर अभी press है। जगह में गलत फ़ंक्शन था, या जगह खाली थी।

  • typeof bell.onclick को "null" पढ़ना, जब मान null हो
  • यह उम्मीद कि असाइनमेंट खुद घंटी को ding कर दे
  • दूसरे असाइनमेंट के बाद एक क्लिक पर ding और dong दोनों के चलने की उम्मीद
  • बटन का पाठ ding हो जाए, यह उम्मीद
  • onclick = null के बाद भी click घंटी बदले, यह उम्मीद
  • ऐरो फ़ंक्शन रखकर this.id के bell होने की उम्मीद
  • यहाँ event.target पढ़ना; इन फ़ंक्शनों का कोई आर्ग्युमेंट नहीं, इवेंट ऑब्जेक्ट बाद का पन्ना है
  • यहाँ addEventListener बुलाना; अगला पन्ना श्रोताओं को जमा करता है
  • बटन createElement से बनाना; वह पिछला पन्ना था
  • पंक्ति को silent / 0 / press पढ़ना

ये साथ ले जाओ

  • हैंडलर न हो तो bell.onclick null है और typeof bell.onclick object है
  • फ़ंक्शन रखने से घंटी click तक silent रहती है
  • ding फ़ंक्शन के साथ bell.click() घंटी को ding करता है और बटन press छोड़ता है
  • दूसरा असाइनमेंट पहले की जगह लेता है, इसलिए एक क्लिक सिर्फ dong चलाता है
  • ताज़े बटन पर onclick = null के बाद click घंटी को silent छोड़ता है
  • पन्ने की पंक्ति dong / 1 / bell है, और हैंडलर के अंदर this.id bell है

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

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

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

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

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

📝 निर्देश

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