क्या कोई मुझे उदाहरणों के साथ जावास्क्रिप्ट घटनाओं में currentTargetऔर targetसंपत्ति के बीच सटीक अंतर बता सकता है और किस परिदृश्य में संपत्ति का उपयोग किया जाता है?
जवाबों:
मूल रूप से, घटनाएँ डिफ़ॉल्ट रूप से बबल होती हैं , इसलिए दोनों के बीच का अंतर है:
target वह तत्व है जिसने घटना को ट्रिगर किया (उदाहरण के लिए, उपयोगकर्ता ने क्लिक किया) currentTarget वह तत्व है जो ईवेंट श्रोता से जुड़ा हुआ है।इस ब्लॉग पोस्ट पर एक सरल विवरण देखें ।
XMLHttpRequest
target = तत्व जिसने घटना को ट्रिगर किया।
currentTarget = तत्व जिसमें इवेंट श्रोता है।
न्यूनतम रननीय उदाहरण
window.onload = function() {
var resultElem = document.getElementById('result')
document.getElementById('1').addEventListener(
'click',
function(event) {
resultElem.innerHTML += ('<div>target: ' + event.target.id + '</div>')
resultElem.innerHTML += ('<div>currentTarget: ' + event.currentTarget.id + '</div>')
},
false
)
document.getElementById('2').dispatchEvent(
new Event('click', { bubbles:true }))
}<div id="1">1 click me
<div id="2">2 click me as well</div>
</div>
<div id="result">
<div>result:</div>
</div>यदि आप पर क्लिक करते हैं:
2 click me as wellफिर 1इसे सुनता है, और परिणाम के लिए अपील करता है:
target: 2
currentTarget: 1
क्योंकि उस मामले में:
2 वह तत्व है जिसने इस घटना की उत्पत्ति की है1 वह तत्व है जो घटना को सुनता हैयदि आप पर क्लिक करते हैं:
1 click meइसके बजाय, परिणाम है:
target: 1
currentTarget: 1
क्रोमियम 71 पर परीक्षण किया गया।
यदि यह चिपका नहीं है, तो यह प्रयास करें:
वर्तमान का currentTargetतात्पर्य वर्तमान से है। यह सबसे हालिया लक्ष्य है जिसने उस घटना को पकड़ा है जो कहीं और से बुदबुदाती है।
<style>
body * {
margin: 10px;
border: 1px solid blue;
}
</style>
<form onclick="alert('form')">FORM
<div onclick="alert('div')">DIV
<p onclick="alert('p')">P</p>
</div>
</form>यदि उपरोक्त कोड में P टैग पर क्लिक करें तो आपको तीन अलर्ट मिलेंगे, और यदि आप div टैग पर क्लिक करते हैं तो आपको फॉर्म अलर्ट पर क्लिक करने पर दो अलर्ट और एक ही अलर्ट मिलेगा। और अब निम्नलिखित कोड देखें,
<style>
body * {
margin: 10px;
border: 1px solid blue;
}
</style>
<script>
function fun(event){
alert(event.target+" "+event.currentTarget);
}
</script>
<form>FORM
<div onclick="fun(event)">DIV
<p>P</p>
</div>
</form>[ऑब्जेक्ट HTMLParagraphElement] [ऑब्जेक्ट HTMLDivElement]
यहाँ event.target [ऑब्जेक्ट HTMLParagraphElement] है, और Event.curentTarget [ऑब्जेक्ट HTMLDivElement] है:
event.target वह नोड है, जिससे ईवेंट उत्पन्न हुआ था, और event.currentTarget, इसके विपरीत, उस नोड को संदर्भित करता है, जिस पर वर्तमान-ईवेंट श्रोता संलग्न था। अधिक जानकारी के लिए बबलिंग देखें
यहां हमने P टैग पर क्लिक किया है, लेकिन हमारे पास P पर श्रोता नहीं है, लेकिन इसके मूल तत्व div पर है।
event.target वह नोड है, जिससे ईवेंट की उत्पत्ति हुई है, अर्थात। जहाँ भी आप अपने ईवेंट श्रोता (पैराग्राफ या स्पैन पर) को रखते हैं, ईवेंट ।arget नोड को संदर्भित करता है (जहां उपयोगकर्ता ने क्लिक किया)।
Event.currentTarget , इसके विपरीत, उस नोड को संदर्भित करता है जिस पर वर्तमान-ईवेंट श्रोता संलग्न था। अर्थात। यदि हम अपने ईवेंट श्रोता को पैराग्राफ नोड पर संलग्न करते हैं, तो Event.currentTarget पैराग्राफ को संदर्भित करता है जबकि Event.target अभी भी स्पैन को संदर्भित करता है। ध्यान दें: यदि हमारे पास शरीर पर एक ईवेंट श्रोता भी है, तो इस ईवेंट-श्रोता के लिए, Event.currentTarget बॉडी को संदर्भित करता है (यानी; ईवेंट-लिस्ंटर के इनपुट के रूप में प्रदान की जाने वाली घटना को हर बार अपडेट किया जाता है)