Pertanyaan jQuery .on (); vs JavaScript .addEventListener ();


Dapatkah seseorang menjelaskan kepada saya mengapa ada perbedaan dalam urutan di mana penangan peristiwa dilaksanakan tergantung pada bagaimana mereka telah dilampirkan? Pada contoh di bawah ini saya menggunakan .on() dan .addEventListener() metode untuk menangani acara tertentu pada yang berbeda DOM elemen.

jsfiddle: http://jsfiddle.net/etsS2/

Saya pikir dalam contoh khusus ini urutan di mana event handler akan dieksekusi akan tergantung pada event-bubbling - jadi mulai dari acara aslinya target dan bergerak ke atas document elemen.

document.getElementById('outer').addEventListener('mouseup', function (event) {
//$('#outer').on('mouseup', function (event) {
    alert('This alert should not show up!');
}, false);

Jika saya menghapus komentar on(); versi semuanya bekerja seperti yang diharapkan - apakah ada perbedaan dalam cara jQuery menangani kejadian yang bertentangan dengan dataran JavaScript?


34
2018-01-24 23:47


asal


Jawaban:


Ketika Anda menggunakan .on() di level dokumen, Anda menunggu acara untuk menggelembung hingga titik itu. Event handler untuk wadah perantara mana pun sudah akan dipanggil.

Acara "menggelegak" adalah proses di mana browser mencari penangan kejadian yang terdaftar dengan orang tua dari elemen yang merupakan penerima asli sebenarnya dari acara tersebut. Ia bekerja ke atas di pohon DOM. Tingkat dokumen adalah terakhir tingkat diperiksa. Dengan demikian, pawang Anda terdaftar .on() tidak akan berjalan sampai level tersebut tercapai. Sementara itu, pengendali event lainnya di level "luar" tercapai lebih dulu dan dieksekusi oleh browser.

Jadi, itu return false; di pawang yang terdaftar dengan .on() cukup banyak tidak berguna, karena akan menjadi panggilan untuk event.stopPropagation(). Di luar itu, mencampur pendaftaran event handler asli dengan pekerjaan yang perpustakaan seperti jQuery akan lakukan mungkin ide yang sangat buruk kecuali Anda serius tahu apa yang Anda lakukan.

Disana ada sebuah pertanyaan yang ditanyakan hampir persis seperti ini beberapa saat yang lalu hari ini.


22
2018-01-24 23:53



Lihatlah addEventListener versi:

document.getElementById('outer').addEventListener('mouseup', function (event) {
    alert('This alert should not show up!');
}, false);

Itu berfungsi dengan baik karena argumen ketiga adalah useCapture, yang menentukan apakah fase penangkapan acara harus digunakan atau tidak.

Saat Anda beralih ke versi jQuery:

$('#outer').on('mouseup', function (event) {
    alert('This alert should not show up!');
}, false);

Saya pikir apa yang terjadi adalah argumen ketiga secara sederhana menimpa fungsi event handler Anda dan menyebabkan pengendali event untuk melakukan apa-apa kecuali return false; yang jelas bukan apa yang dimaksudkan untuk terjadi.

Dari jQuery docs (Penekanan ditambahkan):

Fungsi untuk dieksekusi ketika acara dipicu. Nilai salah adalah   juga diizinkan sebagai singkatan untuk fungsi yang hanya mengembalikan   Salah.

Hapus false argumen dan versi jQuery akan berfungsi dengan benar juga:

$('#outer').on('mouseup', function (event) {
    alert('This alert should not show up!');
});

Perhatikan bahwa alert  harus muncul, jadi addEventListener pendekatan berfungsi dengan benar. Lihat jawaban @ Pointy untuk alasannya.


12
2018-01-25 00:03