E.target और e.currentTarget के बीच अंतर

Question

मुझे अंतर समझ में नहीं आता, वे दोनों एक जैसे लगते हैं लेकिन मुझे लगता है कि वे नहीं हैं।

एक या दूसरे का उपयोग कब करना है, इसके किसी भी उदाहरण की सराहना की जाएगी।

Comments

यह फिडल अंतर को बहुत स्पष्ट रूप से दिखाता है

— मुर्फा सूसली

किसी को भी ActionScript3 अच्छी तरह से पता है कि इसकी घटनाओं को DOM घटनाओं के समान व्यवहार करता है?

— बेन क्रेसी

जावास्क्रिप्ट समतुल्य: stackoverflow.com/questions/10086427/…

— बेन क्रेसी

मुरफ़ सूसली द्वारा प्रदान किया गया एक संदर्भ एक स्पष्ट व्याख्या है जो इस सवाल का जवाब देता है कि क्या अंतर है। इस फिडल का थोड़ा सरलीकृत संस्करण सबसे अच्छा जवाब होगा।

— अज़ाकगीम

Answer 1

बेन अपने जवाब में पूरी तरह से सही है - इसलिए वह जो कहता है उसे ध्यान में रखें। मैं आपको जो बताने जा रहा हूं वह पूर्ण विवरण नहीं है, लेकिन यह याद रखने का एक बहुत आसान तरीका है e.target, e.currentTargetमाउस घटनाओं और प्रदर्शन सूची के संबंध में काम करना:

e.target= माउस के नीचे की चीज (जैसा कि बेन कहता है ... वह चीज जो घटना को ट्रिगर करती है)। e.currentTarget= डॉट से पहले की बात ... (नीचे देखें)

तो अगर आपके पास क्लिप के अंदर 10 बटन हैं, जिसमें "बीटीएन" का नाम है और आप ऐसा करते हैं:

btns.addEventListener(MouseEvent.MOUSE_OVER, onOver);
// btns = the thing before the dot of an addEventListener call
function onOver(e:MouseEvent):void{
  trace(e.target.name, e.currentTarget.name);
}

e.target10 बटनों में से एक e.currentTargetहोगा और हमेशा "बीटीएन" क्लिप होगा।

यह ध्यान देने योग्य है कि यदि आपने माउस को एक ROLL_OVER में बदल दिया है या संपत्ति btns.mouseChildrenको गलत पर सेट किया है , e.targetऔर e.currentTargetदोनों हमेशा "बीटीएन" होंगे।

Comments

तो, दूसरे शब्दों में, लक्ष्य childs हैं और currentTarget कंटेनर हैं।

— आर्टीमिक्स

नहीं, currentTargetहमेशा घटना के लिए सुनने वाली वस्तु है; targetवह वास्तविक लक्ष्य है जिसे घटना प्राप्त हुई है। ईवेंट बबलिंग के अनुसार, लक्ष्य ईवेंट प्राप्त करता है और यह डिस्प्ले लिस्ट को बुलबुले बना देता है। (या इवेंट कैप्चरिंग के लिए दूसरा रास्ता)

— 734

यदि यह एक बच्चा था जिसने इस घटना को भेज दिया तो हाँ बच्चे हैं। आम तौर पर आप e.currentTarget का उपयोग करना चाहेंगे क्योंकि आपने श्रोता को यह सौंपा है। लेकिन स्थितियों में, जैसे कि एक ज़ेवन ऊपर सूचीबद्ध है जहाँ आप एक श्रोता को कई बच्चों के साथ एक कंटेनर में चाहते हैं, तो आप ई-टारगेट का उपयोग करके देखेंगे कि कौन से बच्चों ने घटना को भेजा।

— बेन गेल

ऊपर @poke से टिप्पणी सबसे अच्छा जवाब है "करंटगेट हमेशा ऑब्जेक्ट सुनने वाला होता है, लक्ष्य वास्तविक लक्ष्य होता है जो घटना को प्राप्त करता है"

— पांडावुड

Answer 2

e.targetवह है जो ट्रिगर करने के लिए घटना डिस्पैचर चलाता है और e.currentTargetवह है जो आपने अपने श्रोता को सौंपा है।

Comments

यहाँ एक अच्छा उदाहरण है: joequery.me/code/event-target-vs-event-currenttarget-30-seconds

— Glenn Wark

Answer 3

e.currentTargetहमेशा वह तत्व होता है जो वास्तव में घटना है। e.targetवह तत्व है जिससे ईवेंट का उद्भव हुआ है, इसलिए आपका मार्कअप संरचित होने के आधार पर, === e.targetका बच्चा हो सकता है e.currentTargetया e.targetहो सकता e.currentTargetहै।

Answer 4

मुझे विजुअल जवाब पसंद हैं।

जब आप क्लिक करते हैं #btn, तो दो ईवेंट हैंडलर्स को कॉल किया जाता है और वे उस आउटपुट को आउटपुट करते हैं जो आप चित्र में देखते हैं।

यहाँ डेमो: https://jsfiddle.net/ujhe1key/

Comments

सवाल AS3 नहीं JS के बारे में है।

— आर्टेमिक्स

आह ठीक है, टैगिंग के बारे में क्षमा करें। जवाब हालांकि दोनों के लिए अभी भी लागू है।

— मारिया इनेस परनिसारी

Answer 5

यह ध्यान देने योग्य है कि event.target उपयोगी हो सकता है, उदाहरण के लिए, विभिन्न कार्यों को ट्रिगर करने के लिए एकल श्रोता का उपयोग करने के लिए। मान लें कि आपके पास विशिष्ट "मेनू" है, जिसमें 10 बटन अंदर हैं, ऐसा करने के बजाय:

menu.button1.addEventListener(MouseEvent.CLICK, doAction1);
menu.button2.addEventListener(MouseEvent.CLICK, doAction2);
etc...

आप बस कर सकते हैं:

menu.addEventListener(MouseEvent.CLICK, doAction);

और doAction (घटना) के आधार पर event.target (यह नाम संपत्ति का उपयोग करके, आदि ...) के आधार पर एक अलग कार्रवाई को ट्रिगर करें

Answer 6

एक उदाहरण बनाओ:

var body = document.body,
    btn = document.getElementById( 'id' );
body.addEventListener( 'click', function( event ) {
    console.log( event.currentTarget === body );
    console.log( event.target === btn );
}, false );

जब आप 'btn' पर क्लिक करते हैं, और 'true' और 'true' दिखाई देगा!

Answer 7

e.currentTarget हमेशा उस घटक को लौटाएगा जिस पर ईवेंट श्रोता जोड़ा गया है।

दूसरी ओर, ई। टार्गेट स्वयं या किसी प्रत्यक्ष बच्चे या भव्य बच्चे या ग्रैंड-ग्रैंड-चाइल्ड हो सकते हैं और इसी तरह से घटना को किसने प्राप्त किया। दूसरे शब्दों में, e.target घटक को प्रदर्शित करता है जो प्रदर्शन सूची पदानुक्रम में शीर्ष पर है और बाल पदानुक्रम या घटक में ही होना चाहिए।

एक उपयोग तब हो सकता है जब आपके पास कैनवस में कई चित्र हों और आप चित्र को घटक के अंदर खींचना चाहते हों लेकिन कैनवस। आप कैनवस पर एक श्रोता जोड़ सकते हैं और उस श्रोता में आप यह सुनिश्चित करने के लिए निम्नलिखित कोड लिख सकते हैं कि कैनवस घसीटा नहीं जाएगा।

function dragImageOnly(e:MouseEvent):void
{
    if(e.target==e.currentTarget)
    {
        return;
     }
     else
     {
        Image(e.target).startDrag();
     }
}

Answer 8

target  is the element that triggered the event (e.g., the user clicked on)

currenttarget is the element that the event listener is attached to.

Answer 9

• e.target तत्व है, जिस पर आप क्लिक करते हैं
• e.currentTarget जोड़े गए ईवेंट श्रोता के साथ तत्व है।

यदि आप बटन के चाइल्ड एलिमेंट पर क्लिक करते हैं, तो बटन विशेषताओं का पता लगाने के लिए करंटटार्ग का उपयोग करना बेहतर है, सीएच में कभी-कभी ई-कॉमर्स का उपयोग करने की समस्या।

Answer 10

e.currentTarget वह तत्व (पैरेंट) है जहां ईवेंट पंजीकृत है, e.target नोड (बच्चे) है जहां ईवेंट इंगित कर रहा है।