$ (This) ve event.target arasındaki fark nedir?

157

JQuery'de yeniyim ve JavaScript ve jQuery'deki öğreticiyi izleyerek sekmeli paneller yapıyordum : Eksik Kılavuz , yazar bunu yaptığında ilk satır var:

   var target = $(this);

Ama ben bu şekilde yapmaya çalıştım

   var target = evt.target;

ve bu hatayı aldım:

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

Ve evt.targetgeri döndüğümde $(this), bir cazibe gibi çalıştı.

Ben arasındaki fark ne olduğunu bilmek istiyorum $(this)ve evt.target?

İhtiyacınız olması durumunda kodumu burada bulabilirsiniz:

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

— Rafael Adel
kaynak

7

thisJavaScript DOM öğesine bir referanstır. $()jQuery tarafından DOM öğesini jQuery Nesnesine dönüştürmek için sağlanan biçimdir. kullanarak evt.target, oysa sen, bir öğeye başvuruda ediyoruz $(this)biz erişiminiz olduğundan parametrelerle bir nesne durumdayız.

— Ohgodwhy

2

yapabilir $(evt.target)ve (bu durumda) aynı sonuçları elde edebilirsiniz. .attr()Yöntem jQuery Nesne değil elemanı kendisi tarafından sağlanan

— BLSully

295

Orada olduğu arasında bir fark $(this)ve event.targetve oldukça önemli bir biri. Birlikte this(ya da event.currentTargetaşağıya bakınız) her zaman dinleyici bağlı DOM elemanına değinmektedir, event.targettıklandığı gerçek DOM elemanıdır. Olay köpürmesi nedeniyle, varsa

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

ve dış div'e tıklama dinleyici ekleyin

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

Daha sonra handler(eğer kolları iç div etkinlik ve yayılmasını durdurur diğer koda sahip sürece) dış div hem de iç birinin içinde tıkladığında çağrılır.

Bu örnekte, iç div'in içini tıkladığınızda, ardından handler:

this.outerDOM öğesini ifade eder (çünkü işleyicinin eklendiği nesne budur)
event.currentTargetayrıca .outeröğeye atıfta bulunur (çünkü etkinliği işleyen geçerli hedef öğedir)
event.target.inneröğeyi ifade eder (bu size etkinliğin kaynaklandığı öğeyi verir)

JQuery sarıcı $(this), DOM öğesini yalnızca bir jQuery nesnesine sarar, böylece jQuery işlevlerini çağırabilirsiniz. Aynı şeyi ile yapabilirsiniz $(event.target).

Ayrıca bağlamını yeniden hatırlarsanız this(örneğin, Omurga kullanırsanız otomatik olarak yapılır), başka bir şeye işaret edeceğini unutmayın. Gerçek DOM öğesini istediğiniz zaman alabilirsiniz event.currentTarget.

— Petr Bela
kaynak

Bu örnekte, iç öğeyi tıklatıp event.currentTarget kullanırsanız, iç öğeyi mi yoksa dış öğeyi mi alıyorsunuz?

— merlinpatt

3

currentTargether zaman işleyiciye sahip olan, yani. dış olan

— Petr Bela

"Böyle bir durumda" ile ".outer" değil, ".inner" demek istediniz ve event.target daha sonra iç öğeye atıfta bulunur mu? Örneğiniz aslında neyin tıklandığını belirtmedi, ancak düzenlemeden önce emin olmak istedim. :)

— Nils Sens

@NilsSens Evet, 'iç' düğmesini tıkladığınızda anlamına gelir. Bunu açıklığa kavuşturacağım.

— Petr Bela

39

thisetkinliğin işlendiği DOM öğesi (geçerli hedef) için bir referanstır. event.targetolayı başlatan öğeyi ifade eder. Bu durumda aynıydılar ve sıklıkla olabilirler, ancak her zaman böyle olmayabilirler.

JQuery olay belgelerini gözden geçirerek bununla ilgili iyi bir fikir edinebilirsiniz , ancak özet olarak:

event.currentTarget

Olay köpürme aşamasındaki geçerli DOM öğesi.

event.delegateTarget

Şu anda çağrılan jQuery olay işleyicisinin eklendiği öğe.

event.relatedTarget

Varsa, etkinliğe katılan diğer DOM öğesi.

event.target

Etkinliği başlatan DOM öğesi.

JQuery kullanarak istenen işlevselliği elde etmek için, aşağıdakilerden birini kullanarak bir jQuery nesnesine sarmanız gerekir: $(this)veya $(evt.target).

.attr()Yöntem yalnızca bir DOM öğesindeki bir jQuery nesne üzerinde çalışıyor. $(evt.target).attr('href')ya da sadece evt.target.hrefistediğini verecek.

— nbrooks
kaynak

Bunlar değil mutlaka aynı elemana hem referanslar. Petr'ın cevabına bakınız.

— kralyk

1

Yeterince doğru, bunu belirttiğin için teşekkürler. Eski cevaplarımı yeniden okumak her zaman ilginç ...

— nbrooks

8

JQuery'nin bu değişkeni "on" yöntemiyle işleme biçiminde önemli bir fark vardır.

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

Bunu ile karşılaştırırsanız: -

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

— natureshop
kaynak

4

http://api.jquery.com/on/ belirtiyor:

JQuery bir işleyici çağırdığında, thisanahtar kelime olayın teslim edildiği öğeye bir referanstır ; doğrudan bağlı olaylar thisiçin olayın eklendiği öğedir ve yetki verilen olaylar thisiçin bir öğe eşleme seçicisidir. ( Olayın bir alt öğeden köpürmesi durumunda thisbuna eşit olmayabileceğini unutmayın event.target.)

JQuery yöntemleriyle kullanılabilmesi için öğeden bir jQuery nesnesi oluşturmak için $ (this) öğesini kullanın.

Eğer sahipsek

<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>

Aşağıdaki çıktıyı kontrol edin:

<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>

$Bir jQuery nesnesi oluşturmak için dom öğesini sarmak için kullandığımı unutmayın, her zaman böyle yaparız.

İlk durumda, bulur this, event.currentTarget, event.targethepsi aynı elemana referans alınmıştır.

İkinci durumda da, bazı sarılmış elemana olay temsilci tetiklendiğinde, event.targetsüre, tetiklenen elemana başvurulan olacağını thisve event.currentTargetolay nereye teslim edileceğini referans alınmıştır.

İçin thisve event.currentTargetsürekli aynı şeyi göre tam olarak http://api.jquery.com/event.currenttarget/

— Jaskey
kaynak

3

Burada çapraz tarayıcı sorunları var.

Tipik bir jQuery olmayan olay işleyicisi şu şekilde olur:

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 , olay işleyicilerinde evtolduğu gibi hedefi normalleştirir ve kullanılabilir hale getirir this, bu nedenle tipik bir jQuery olay işleyicisi şu şekilde olur:

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

evtJQuery'nin normalleştirilmiş ve bir POJS hedefini kullanan karma bir olay işleyici şöyle bir şey olacaktır:

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

— Pancar-Pancar
kaynak

0

Bir olay işleyici işlevi veya nesne yönteminde, "içeren öğenin" özelliklerine erişmenin bir yolu özel olan bu anahtar sözcüğü kullanmaktır. Bu anahtar kelime şu anda işlenmekte olan işlevin veya yöntemin sahibini temsil eder. Yani:

Genel bir işlev için bu pencereyi temsil eder.
Bir nesne yöntemi için bu, nesne örneğini temsil eder.
Ve bir olay işleyicisinde, bu olayı alan öğeyi temsil eder.

Örneğin:

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

Bu html'yi oluşturduktan sonra uyarı pencerelerinin içeriği sırasıyla:

object Window
object HTMLParagraphElement

Bir Event nesnesi tüm olaylarla ilişkilendirilir. Web sayfasında fare tıklatmasının konumu gibi "olay hakkında" bilgi sağlayan özelliklere sahiptir.

Örneğin:

<!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>

Bu html'yi oluşturduktan sonra uyarı pencerelerinin içeriği sırasıyla:

object MouseEvent
X = 982 Y = 329

— MMKarami
kaynak