Analisis perbezaan antara objek acara dalam kemahiran JS dan JQ_javascript

Ujian kod:

Salin kod Kod adalah seperti berikut:

test text

test.addEventListener('klik', function(e){console.log(e);}, false),
$('#test').on('click', function(e){console.log(e)});



Analisis keputusan:

Salin kod Kod adalah seperti berikut: js-jq-event-common:{

altKey: palsu,

buih: benar,
butang: 0,
boleh dibatalkan: benar,
pelangganX: 58,
pelangganY: 13,
ctrlKey: palsu,
offsetX: 50,
offsetY: 5,
halamanX: 58,
halamanY: 13,
skrinX: 58,
skrinY: 122,
pandangan: Tetingkap,
Yang mana: 1,
Taip: 'klik',
cap masa: 1407761742842,
metaKey: palsu,
berkaitanSasaran: batal,
target: div#test /*Sasaran jq-evt tidak semestinya elemen dipadankan oleh pemilih jQuery Ia mungkin elemen pertama untuk menangkap acara, dan kemudian apabila ia berbuih, salah satu elemen akan menjadi elemen dipadankan oleh pemilih*/
},
js-jq-event-diff:{
currentTarget: null/*nampaknya pada umumnya null*/
||. div#test/*Elemen yang dipadankan oleh pemilih jq berada dalam atribut [currentTarget]*/,
Fasa acara: 0 || 2,
toElement: div#test
},
js-event-solo:{
x: 58,
y: 13,
cancelBubble: palsu,
charCode: 0,
papan keratanData: tidak ditentukan,
Pemindahan data: batal,
lalaiPrevented: palsu,
srcElement: div#test,
fromElement: null,
butiran: 1,
Kod kunci: 0,
layerX: 58,
lapisanY: 13,
Nilai pulangan: benar
},
jq-event-solo: {
butang: tidak ditentukan,
data: tidak ditentukan,
delegateTarget: div#test/*Siapa yang sedang mendengar? Inilah unsurnya. */,
isDefaultPrevented: fungsi,
handleObj: Objek,
jQuery211024030584539286792: benar,
Acara asal: MouseEvent,
shiftKey: palsu
}
body-click-delegate-event: {
semasaSasaran: HTMLBodyElement,
delegateTarget: HTMLBodyElement,
sasaran: HTMLDivElement
}



Ringkasan:

Dalam parameter acara js, sama ada ia adalah sasaran, toElement atau srcElement, mereka semua menunjukkan kepada elemen pertama yang mencetuskan acara (ia belum muncul lagi), dan fromElement adalah batal dalam acara klik, jadi jika anda menetapkannya untuk menyertakan banyak peristiwa induk kontena induk elemen, maka acara itu berkemungkinan besar ialah elemen anak ibu bapa ini.

Oleh itu, dalam aplikasi sebenar, jika anda ingin merujuk kepada ibu bapa, anda hanya boleh menggunakan ini

Dalam parameter acara jq,

currentTarget ialah elemen yang sepadan dengan pemilih anda, iaitu elemen yang anda mahukan; delegateTarget ialah elemen yang mendengar acara dan tergolong dalam elemen yang diwakilkan
Sasaran adalah sama dengan sasaran dalam parameter acara js Ia adalah elemen pertama yang mencetuskan acara. Ia tidak berguna seperti currentTarget (tidak semestinya, seperti aplikasi dalam acara bodyclick)
Sesetengah pelajar mungkin mengatakan bahawa jika anda ingin merujuk secara langsung elemen yang tertakluk pada peristiwa peranti, gunakan sahaja ini Mengapa perlu bersusah payah memahami Sasaran dan sasaran semasa. Idea ini membuktikan bahawa anda hanya menggunakan jQuery dan tidak pernah menggunakan alat seperti Backbone.

Backbone mengikat ini di banyak tempat, jadi tidak mungkin untuk menggunakan ini dalam fungsinya:

Salin kod

Kod adalah seperti berikut: var view = Backbone.View.extend({ el: document.body,

acara: {

'klik p': 'showText' // Wakilkan badan untuk memantau acara klik p },
showText: function(e){
var p = e.currentTarget; // [currentTarget] Mendapatkan elemen yang dipadankan oleh pemilih this.log(p.innerHTML); Log: fungsi(msg){
console.log(msg);
}
});

Walaupun objek acara dalam JS dan JQ adalah serupa, masih terdapat beberapa perbezaan Adakah anda faham