$ (यह) और event.target के बीच अंतर?

157

मैं jQuery के लिए नया हूं, और जावास्क्रिप्ट और jQuery में ट्यूटोरियल के बाद, टैब्ड पैनल बना रहा था : मिसिंग मैनुअल , जब लेखक ऐसा करता है तो वह पहली पंक्ति होती है:

   var target = $(this);

लेकिन मैंने इसे इस तरह से करने की कोशिश की

   var target = evt.target;

और मुझे वह त्रुटि मिली:

Uncaught TypeError: Object http://localhost/tabbedPanels/#panel1 has no method 'attr'

और जब मैं evt.targetवापस बदल गया $(this), यह एक आकर्षण की तरह काम किया।

मैं जानना चाहता हूँ के बीच अंतर क्या चाहते हैं $(this)और evt.target?

यदि आपको इसकी आवश्यकता है तो मेरा कोड यहाँ है:

index.html:

<!DOCTYPE html>
<html>
    <head>
        <title>Tabbed Panel</title>
        <style>
            body {
               width : 100%;
               height: 100%;
            }

            #wrapper {
                margin : auto;
                width : 800px;                
            }

            #tabsContainer {
                overflow: hidden;
            }

            #tabs {                
                padding:0;
                margin:0;
            }                

            #tabs li {
                float : left;
                list-style:none;
            }

            #tabs a {
                text-decoration:none;
                padding : 3px 5px;                
                display : block;                
            }

            #tabs a.active {
                background-color : grey;                
            }            
            #panelsContainer {
                clear: left;
            }            
            #panel1 {
                color : blue;
            }            
            #panel2 {
                color : yellow;
            }
            #panel3 {
                color: green;
            }
            #panel4 {
                color : black;
            }         

        </style>
        <script type="text/javascript" src="jquery-1.8.0.min.js"></script>
        <script type="text/javascript" src="script.js"></script>        
    </head>

    <body>
        <div id="wrapper">
            <div id="tabsContainer">
                <ul id="tabs">
                    <li><a href="#panel1">Panel1</a></li>
                    <li><a href="#panel2">Panel2</a></li>
                    <li><a href="#panel3">Panel3</a></li>
                    <li><a href="#panel4">Panel4</a></li>
                </ul>
            </div>
            <div id="panelsContainer">
                <div id="panel1" class="panel">
                    this is panel1
                </div>
                <div id="panel2" class="panel">
                    this is panel2
                </div>
                <div id="panel3" class="panel">
                    this is panel3
                </div>
                <div id="panel4" class="panel">
                    this is panel4
                </div>                
            </div>
        </div>

    </body>

</html>

script.js:

$(function(){
    $("#tabs a").click(function(evt){
       var target = evt.target,
           targetPanel = target.attr("href");
       $(".panel").hide();
       $("#tabs a.active").removeClass("active");
       target.addClass("active").blur();
       $(targetPanel).fadeIn(300);
       evt.preventDefault();
    });

    $("#tabs a:first").click();
})

javascript-events this jquery

— राफेल एडेल
स्रोत

7

thisजावास्क्रिप्ट DOM तत्व का संदर्भ है। $()DOM तत्व को jQuery ऑब्जेक्ट में बदलने के लिए jQuery द्वारा प्रदान किया गया प्रारूप है। का उपयोग कर evt.targetआप एक तत्व को संदर्भित कर रहे हैं, जबकि साथ $(this)आप मानकों के साथ एक वस्तु को संदर्भित करते हैं कि हमें की पहुंच है।

— ओहगोद्वि 16

2

आप कर सकते हैं $(evt.target)और (इस मामले में) के रूप में अच्छी तरह से एक ही परिणाम के साथ समाप्त होता है। .attr()विधि jQuery वस्तु, नहीं तत्व से ही प्रदान की जाती है

— BLSully

294

वहाँ है के बीच एक अंतर $(this)और event.targetहै, और काफी महत्वपूर्ण है। जबकि this(या event.currentTarget, नीचे देखें) हमेशा DOM तत्व को संदर्भित करता है जो श्रोता से जुड़ा था, event.targetवास्तविक DOM तत्व है जिसे क्लिक किया गया था। याद रखें कि घटना बुदबुदाती के कारण, यदि आपके पास है

<div class="outer">
  <div class="inner"></div>
</div>

और बाहरी श्रोता के लिए क्लिक श्रोता संलग्न करें

$('.outer').click( handler );

तब handlerआपको तब आमंत्रित किया जाएगा जब आप बाहरी div के साथ-साथ भीतर वाले पर भी क्लिक करेंगे (जब तक कि आपके पास अन्य कोड नहीं है जो आंतरिक div पर ईवेंट को संभालता है और प्रचार बंद कर देता है)।

इस उदाहरण में, जब आप आंतरिक div के अंदर क्लिक करते हैं, तो handlerनिम्न में :

this.outerDOM तत्व को संदर्भित करता है (क्योंकि यह वह वस्तु है जिससे हैंडलर जुड़ा था)
event.currentTarget.outerतत्व को भी संदर्भित करता है (क्योंकि यह घटना को संभालने वाला वर्तमान लक्ष्य तत्व है)
event.target.innerतत्व को संदर्भित करता है (यह आपको वह तत्व प्रदान करता है जहां घटना उत्पन्न हुई)

JQuery आवरण $(this)केवल एक jQuery वस्तु में DOM तत्व लपेटता है ताकि आप उस पर jQuery फ़ंक्शन कॉल कर सकें। आप उसी के साथ कर सकते हैं $(event.target)।

यह भी ध्यान दें कि यदि आप इसके संदर्भ में संशोधन करते हैं this(जैसे कि यदि आप बैकबोन का उपयोग करते हैं तो यह स्वचालित रूप से किया जाता है), तो यह कुछ और इंगित करेगा। आप हमेशा वास्तविक DOM तत्व प्राप्त कर सकते हैं event.currentTarget।

— पेट्रा बेला
स्रोत

इस उदाहरण के साथ, यदि आप आंतरिक तत्व पर क्लिक करते हैं और Event.currentTarget का उपयोग करते हैं, तो क्या आपको आंतरिक तत्व या बाहरी एक मिलता है?

— मर्लिनपैट

3

currentTargetहमेशा हैंडलर के साथ एक है, यानी। बाहरी एक

— पेट्र बेला

"ऐसे मामले में" आपका मतलब '.inner' था, न कि '.outer' पर क्लिक किया गया था, और Event.target फिर आंतरिक तत्व को संदर्भित करेगा? आपके उदाहरण ने यह नहीं बताया कि वास्तव में किस पर क्लिक किया गया था, लेकिन मैं संपादन से पहले यह सुनिश्चित करना चाहता था। :)

— निल्स सेंसर

@NilsSens हाँ, इसका मतलब है जब आप 'इनर' पर क्लिक करते हैं। मैं स्पष्ट कर दूंगा।

— पेट्र बेला

39

thisDOM तत्व के लिए एक संदर्भ है जिसके लिए ईवेंट को (वर्तमान लक्ष्य) संभाला जा रहा है। event.targetउस तत्व को संदर्भित करता है जिसने घटना शुरू की। वे इस मामले में समान थे, और अक्सर हो सकते हैं, लेकिन वे हमेशा जरूरी नहीं हैं।

आप jQuery इवेंट डॉक्स की समीक्षा करके इसका एक अच्छा अर्थ प्राप्त कर सकते हैं , लेकिन सारांश में:

event.currentTarget

घटना बुदबुदाई चरण के भीतर वर्तमान डोम तत्व।

event.delegateTarget

वह तत्व जहां वर्तमान में jQuery इवेंट हैंडलर कहा जाता है।

event.relatedTarget

घटना में शामिल अन्य DOM तत्व, यदि कोई हो।

event.target

DOM तत्व जिसने इवेंट शुरू किया है।

JQuery का उपयोग करके वांछित कार्यक्षमता प्राप्त करने के लिए, आपको इसे $(this)या तो jQuery ऑब्जेक्ट में लपेटना होगा: या $(evt.target)।

.attr()विधि केवल DOM तत्व की नहीं एक jQuery वस्तु पर काम करता है। $(evt.target).attr('href')या बस evt.target.hrefआपको वही मिलेगा जो आप चाहते हैं।

— nbrooks
स्रोत

वे दोनों एक ही तत्व के संदर्भ में जरूरी नहीं हैं । देखिए पेट्र का जवाब।

— kralyk

1

यह सच है, यह इंगित करने के लिए धन्यवाद। यह हमेशा दिलचस्प है मेरे पुराने जवाबों को फिर से पढ़ना ...

— nbrooks

8

JQuery इस चर को "ऑन" विधि से कैसे हैंडल करता है, इसमें एक महत्वपूर्ण अंतर है

$("outer DOM element").on('click',"inner DOM element",function(){
  $(this) // refers to the "inner DOM element"
})

यदि आप इसकी तुलना करते हैं: -

$("outer DOM element").click(function(){
  $(this) // refers to the "outer DOM element"
})

— natureshop
स्रोत

4

http://api.jquery.com/on/ राज्यों:

जब jQuery एक हैंडलर कहता है, तो thisकीवर्ड उस तत्व का संदर्भ होता है, जहां ईवेंट वितरित किया जा रहा है ; सीधे बंधे हुए आयोजनों के thisलिए वह तत्व है जहाँ घटना जुड़ी हुई थी और प्रत्यायोजित घटनाओं के thisलिए एक तत्व है जो चयनकर्ता से मेल खाता है। (ध्यान दें कि यह घटना अगर वंशज तत्व से बुदबुदाती है तो thisबराबर नहीं हो सकती event.target।)

तत्व से एक jQuery ऑब्जेक्ट बनाने के लिए ताकि इसे jQuery विधियों के साथ उपयोग किया जा सके, $ (इस) का उपयोग करें।

अगर हमारे पास है

<input type="button" class="btn" value ="btn1">
<input type="button" class="btn" value ="btn2">
<input type="button" class="btn" value ="btn3">

<div id="outer">
    <input type="button"  value ="OuterB" id ="OuterB">
    <div id="inner">
        <input type="button" class="btn" value ="InnerB" id ="InnerB">
    </div>
</div>

नीचे दिए गए आउटपुट की जाँच करें:

<script>
    $(function(){
        $(".btn").on("click",function(event){
            console.log($(this));
            console.log($(event.currentTarget));
            console.log($(event.target));
        });


        $("#outer").on("click",function(event){
            console.log($(this));
            console.log($(event.currentTarget));
            console.log($(event.target));
        })
    })
</script>

ध्यान दें कि मैं $एक jQuery ऑब्जेक्ट बनाने के लिए डोम तत्व को लपेटने के लिए उपयोग करता हूं , जो कि हम हमेशा कैसे करते हैं।

आपको पता होता है कि पहले मामले के लिए, this, event.currentTarget, event.targetसभी एक ही तत्व को संदर्भित कर रहे हैं।

दूसरे मामले में रहते हुए, जब कुछ लिपटे तत्व को घटना प्रतिनिधि ट्रिगर कर रहे हैं, event.target, ट्रिगर तत्व को संदर्भित किया जाएगा, जबकि thisऔर event.currentTargetजहां घटना वितरित किया जाता है को संदर्भित कर रहे हैं।

के लिए thisऔर event.currentTarget, वे वास्तव में कर रहे हैं के अनुसार एक ही बात http://api.jquery.com/event.currenttarget/

— Jaskey
स्रोत

3

यहां क्रॉस ब्राउज़र समस्याएं हैं।

एक सामान्य गैर- jQuery इवेंट हैंडलर कुछ इस तरह होगा:

function doSomething(evt) {
    evt = evt || window.event;
    var target = evt.target || evt.srcElement;
    if (target.nodeType == 3) // defeat Safari bug
        target = target.parentNode;
    //do stuff here
}

jQuery सामान्य हो जाता है evtऔर thisईवेंट हैंडलर के रूप में लक्ष्य को उपलब्ध करता है, इसलिए एक विशिष्ट jQuery ईवेंट हैंडलर कुछ इस तरह होगा:

function doSomething(evt) {
    var $target = $(this);
    //do stuff here
}

एक हाइब्रिड इवेंट हैंडलर जो jQuery के सामान्यीकृत evtऔर POJS लक्ष्य का उपयोग करता है, वह कुछ इस तरह होगा:

function doSomething(evt) {
    var target = evt.target || evt.srcElement;
    if (target.nodeType == 3) // defeat Safari bug
        target = target.parentNode;
    //do stuff here
}

— चुकंदर-चुकंदर
स्रोत

0

ईवेंट हैंडलर फ़ंक्शन या ऑब्जेक्ट विधि के भीतर, "युक्त तत्व" के गुणों तक पहुंचने का एक तरीका यह है कि यह विशेष कीवर्ड का उपयोग करे। यह कीवर्ड वर्तमान में संसाधित किए जा रहे फ़ंक्शन या विधि के स्वामी का प्रतिनिधित्व करता है। इसलिए:

वैश्विक फ़ंक्शन के लिए, यह विंडो का प्रतिनिधित्व करता है।
ऑब्जेक्ट विधि के लिए, यह ऑब्जेक्ट इंस्टेंस का प्रतिनिधित्व करता है।
और एक घटना हैंडलर में, यह उस तत्व का प्रतिनिधित्व करता है जिसे घटना प्राप्त हुई थी।

उदाहरण के लिए:

<!DOCTYPE html>
<html>
    <head>
        <script>
        function mouseDown() {
            alert(this);
        }
        </script>
    </head>
    <body>
        <p onmouseup="mouseDown();alert(this);">Hi</p>
    </body>
</html>

इस HTML को क्रमशः प्रस्तुत करने के बाद चेतावनी विंडो की सामग्री इस प्रकार है:

object Window
object HTMLParagraphElement

ईवेंट ऑब्जेक्ट सभी ईवेंट से संबद्ध होता है। इसमें ऐसे गुण हैं जो "घटना के बारे में" जानकारी प्रदान करते हैं, जैसे कि वेब पेज में एक माउस क्लिक का स्थान।

उदाहरण के लिए:

<!DOCTYPE html>
<html>
    <head>
        <script>
        function mouseDown(event) {
            var theEvent = event ? event : window.event;
            var locString = "X = " + theEvent.screenX + " Y = " + theEvent.screenY;
            alert(event);
                    alert(locString);
        }
        </script>
    </head>
    <body>
        <p onmouseup="mouseDown(event);">Hi</p>
    </body>
</html>

इस HTML को क्रमशः प्रस्तुत करने के बाद चेतावनी विंडो की सामग्री इस प्रकार है:

object MouseEvent
X = 982 Y = 329

— MMKarami
स्रोत