Tes Kode:
Salinan kode adalah sebagai berikut:
<Div id = "test"> <p> Tes Teks <p> </div>
<skrip src = "vendor/jQuery-2.1.1.js"> </script>
<script>
test.addeventListener ('klik', fungsi (e) {console.log (e);}, false),
$ ('#test'). on ('click', function (e) {console.log (e)});
</script>
Analisis Hasil:
Salinan kode adalah sebagai berikut:
js-jq-event-common: {
Altkey: Salah,
Gelembung: Benar,
Tombol: 0,
Dapat dibatalkan: Benar,
ClientX: 58,
Clienty: 13,
Ctrlkey: Salah,
Offsetx: 50,
Offsety: 5,
Pagex: 58,
Pagey: 13,
Screenx: 58,
Screeney: 122,
Lihat: Jendela,
Yang: 1,
Ketik: 'Klik',
Timestamp: 1407761742842,
Metakey: Salah,
Target Terkait: Null,
Target: Div#test /*target JQ-EVT tidak selalu merupakan elemen yang cocok dengan pemilih jQuery, itu mungkin elemen pertama yang menangkap acara, dan kemudian menggelegar ke atas salah satu dari mereka adalah elemen yang cocok dengan pemilih* /
},
js-jq-event-diff: {
CurrentTarget: NULL/*Tampaknya biasanya nol*/
|| Div#test/*jq selector cocok dengan elemen di atribut [currentTarget]*/,
EventPhase: 0 || 2,
Toelement: Div#Test
},
js-event-solo: {
X: 58,
Y: 13,
CancelBubble: Salah,
Charcode: 0,
clipboarddata: tidak ditentukan,
DataTransfer: Null,
DefaultPrevented: false,
Srcelement: Div#Test,
Fromelement: Null,
Detail: 1,
Kode Key: 0,
Layerx: 58,
Lapisan: 13,
ReturnValue: Benar
},
jq-event-solo: {
Tombol: Tidak ditentukan,
Data: tidak terdefinisi,
DelegateTarget: Div#test/*Siapa yang mendengarkan? Itulah elemennya. */,
isDefaultPrevent: fungsi,
handleobj: objek,
jQuery211024030584539286792: Benar,
OriginalEvent: MouseEvent,
ShiftKey: Salah
}
body-click-delegate-event: {
CurrentTarget: HTMLBodyElement,
DelegateTarget: htmlBodyElement,
Target: HTMLDIVE
}
Meringkaskan:
Dalam parameter Acara JS, apakah itu target, TOOLEMENT, dan SRCELEMENT, mereka menunjuk ke elemen pertama yang memicu acara (belum menggelembung), dan dari Element adalah nol dalam acara klik. Oleh karena itu, jika Anda mengatur acara induk dengan banyak elemen, peristiwa pemicu cenderung menjadi elemen anak dari orang tua ini.
Oleh karena itu, dalam aplikasi aktual, jika Anda ingin merujuk orang tua, Anda hanya dapat menggunakan ini
Dalam parameter acara JQ,
CurrentTarget adalah elemen yang cocok dengan pemilih Anda, yang merupakan elemen yang Anda inginkan;
DelegateTarget adalah elemen yang mendengarkan acara dan milik elemen yang didelegasikan.
Target dalam parameter peristiwa dari JS yang sama adalah elemen pertama yang memicu acara, dan tidak berguna seperti arus lancar (tidak harus, misalnya, aplikasi dalam acara BodyClick)
Beberapa siswa mungkin mengatakan bahwa Anda perlu secara langsung merujuk elemen -elemen dari acara perangkat dan menggunakannya. Mengapa Memahami CurrentTarget dan Target? Gagasan ini membuktikan bahwa Anda hanya menggunakan jQuery dan tidak pernah menggunakan alat seperti backbone.
Backbone mengikat ini di banyak tempat, jadi menggunakan ini dalam fungsinya tidak mungkin:
Salinan kode adalah sebagai berikut:
var view = backbone.view.extend ({
EL: Document.Body,
Acara: {
'Klik P': 'ShowText' // Delegasi Tubuh Untuk Mendengarkan Acara Klik P},
showText: function (e) {
var p = e.currentTarget; // [currentTarget] Dapatkan elemen yang cocok dengan pemilih this.log (p.innerhtml); // Saya melihatnya, ini tidak menunjuk ke elemen p},
Log: function (msg) {
console.log (msg);
}
});
Meskipun objek acara di JS dan JQ serupa, masih ada beberapa perbedaan. Apakah kamu mengerti?