Perbedaan antara $ (ini) dan event.target?

157

Saya baru mengenal jQuery, dan sedang membuat panel tab, mengikuti tutorial dalam JavaScript dan jQuery: The Missing Manual , ada baris pertama ketika penulis melakukan ini:

   var target = $(this);

Tetapi saya mencoba melakukannya dengan cara itu 

   var target = evt.target;

dan saya mendapat kesalahan itu:

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

Dan ketika saya berubah evt.targetkembali ke $(this), itu berfungsi seperti pesona.

Saya ingin tahu apa perbedaan antara $(this)dan evt.target?

Ini kode saya jika Anda membutuhkannya:

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
sumber
7
thisadalah referensi ke elemen JavaScript DOM. $()adalah format yang disediakan oleh jQuery untuk mengubah elemen DOM menjadi Obyek jQuery. menggunakan evt.targetAnda mereferensikan suatu elemen, sedangkan dengan $(this)Anda mereferensikan objek dengan parameter yang dapat kami akses.
Ohgod
2
Anda bisa melakukannya $(evt.target)dan (dalam hal ini) berakhir dengan hasil yang sama juga. The .attr()Metode disediakan oleh jQuery Obyek, bukan elemen itu sendiri
BLSully

Jawaban:

294

Ada adalah perbedaan antara $(this)dan event.target, dan cukup satu yang signifikan. Sementara this(atau event.currentTarget, lihat di bawah) selalu merujuk ke elemen DOM yang dilampirkan oleh pendengar, event.targetadalah elemen DOM yang sebenarnya yang diklik. Ingatlah bahwa karena peristiwa menggelegak, jika ada

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

dan lampirkan pendengar klik ke div luar

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

maka handlerakan dipanggil ketika Anda mengklik di dalam div luar serta yang dalam (kecuali Anda memiliki kode lain yang menangani acara di div dalam dan berhenti propagasi).

Dalam contoh ini, ketika Anda mengklik di dalam div bagian dalam, maka di handler:

  • thismerujuk pada .outerelemen DOM (karena itulah objek yang dilampirkan pawang)
  • event.currentTargetjuga merujuk ke .outerelemen (karena itulah elemen target saat ini yang menangani acara)
  • event.targetmerujuk ke .innerelemen (ini memberi Anda elemen tempat acara berasal)

$(this)Pembungkus jQuery hanya membungkus elemen DOM dalam objek jQuery sehingga Anda dapat memanggil fungsi jQuery di atasnya. Anda dapat melakukan hal yang sama dengannya $(event.target).

Perhatikan juga bahwa jika Anda mengubah konteks this(misalnya jika Anda menggunakan Backbone itu dilakukan secara otomatis), itu akan mengarah ke sesuatu yang lain. Anda selalu dapat memperoleh elemen DOM yang sebenarnya event.currentTarget.

Petr Bela
sumber
Dengan contoh ini, jika Anda mengklik elemen dalam dan menggunakan event.currentTarget, apakah Anda mendapatkan elemen dalam atau yang luar?
merlinpatt
3
currentTargetselalu satu dengan pawang, yaitu. yang luar
Petr Bela
Dengan "dalam kasus seperti itu" yang Anda maksud adalah 'di dalam', bukan 'di luar' diklik, dan event.target kemudian akan merujuk ke elemen dalam? Contoh Anda tidak menyatakan apa yang sebenarnya diklik, tetapi saya ingin memastikan sebelum mengedit. :)
Nils Sens
@NilsSens Ya, itu berarti ketika Anda mengklik 'batin'. Saya akan menjelaskannya.
Petr Bela
39

thisadalah referensi untuk elemen DOM yang menangani acara (target saat ini). event.targetmengacu pada elemen yang memprakarsai acara tersebut. Mereka sama dalam kasus ini, dan sering kali bisa, tetapi tidak selalu demikian.

Anda bisa memahami hal ini dengan meninjau dokumen acara jQuery , tetapi secara ringkas:

event.currentTarget

Elemen DOM saat ini dalam fase bubbling acara.

event.delegateTarget

Elemen tempat event handler jQuery saat ini disebut dilampirkan.

event.relatedTarget

Elemen DOM lain yang terlibat dalam acara tersebut, jika ada.

event.target

Elemen DOM yang memprakarsai acara.

Untuk mendapatkan fungsionalitas yang diinginkan menggunakan jQuery, Anda harus membungkusnya dalam objek jQuery menggunakan: $(this)atau $(evt.target).

The .attr()Metode hanya bekerja pada objek jQuery, bukan pada elemen DOM. $(evt.target).attr('href')atau hanya evt.target.hrefakan memberi Anda apa yang Anda inginkan.

orang bodoh
sumber
Keduanya tidak harus keduanya merujuk pada elemen yang sama. Lihat jawaban Petr.
kralyk
1
Cukup benar, terima kasih telah menunjukkannya. Selalu menarik membaca kembali jawaban lama saya ...
nbrooks
8

Ada perbedaan signifikan dalam cara jQuery menangani variabel ini dengan metode "on"

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

Jika Anda membandingkan ini dengan: -

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

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

Ketika jQuery memanggil penangan, thiskata kunci adalah referensi ke elemen di mana acara sedang dikirim ; untuk acara yang terikat langsung thisadalah elemen tempat acara dilampirkan dan untuk acara yang didelegasikan thisadalah pemilih elemen yang cocok. (Catatan yang thismungkin tidak sama dengan event.targetjika acara telah menggelegak dari elemen turunan.)

Untuk membuat objek jQuery dari elemen sehingga bisa digunakan dengan metode jQuery, gunakan $ (ini).

Jika sudah 

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

Periksa output di bawah ini:

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

Catatan yang saya gunakan $untuk membungkus elemen dom untuk membuat objek jQuery, yang selalu kita lakukan.

Anda akan menemukan bahwa untuk kasus pertama, this, event.currentTarget, event.targetsemua direferensikan ke elemen yang sama.

Sedangkan dalam kasus kedua, ketika acara didelegasikan ke beberapa elemen terbungkus dipicu, event.targetakan dirujuk ke elemen yang dipicu, sementara thisdan event.currentTargetdireferensikan ke tempat acara dikirim.

Untuk thisdan event.currentTarget, semuanya persis sama menurut http://api.jquery.com/event.currenttarget/

Jaskey
sumber
3

Ada masalah lintas browser di sini.

Penangan event non-jQuery biasanya adalah seperti ini:

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 menjadi normal evtdan membuat target tersedia seperti thispada event handler, jadi event handler jQuery biasanya adalah seperti ini:

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

Penangan kejadian hibrid yang menggunakan evttarget jQuery yang dinormalisasi dan POJS akan menjadi seperti ini:

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

Dalam fungsi event handler atau metode objek, salah satu cara untuk mengakses properti "elemen yang mengandung" adalah dengan menggunakan kata kunci khusus ini. Kata kunci ini mewakili pemilik fungsi atau metode yang sedang diproses. Begitu:

  • Untuk fungsi global, ini mewakili jendela.

  • Untuk metode objek, ini mewakili instance objek.

  • Dan dalam event handler, ini mewakili elemen yang menerima event.

Sebagai contoh:

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

Konten jendela peringatan setelah merender html ini masing-masing adalah:

object Window
object HTMLParagraphElement

Objek acara dikaitkan dengan semua acara. Ini memiliki properti yang memberikan informasi "tentang acara", seperti lokasi klik mouse di halaman web.

Sebagai contoh:

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

Konten jendela peringatan setelah merender html ini masing-masing adalah:

object MouseEvent
X = 982 Y = 329
MMKarami
sumber