jQuery setara dengan metode addEventListener JavaScript

190

Saya mencoba menemukan jQuery yang setara dengan pemanggilan metode JavaScript ini:

document.addEventListener('click', select_element, true);

Saya sudah sampai sejauh:

$(document).click(select_element);

tapi itu tidak mencapai hasil yang sama, sebagai parameter terakhir dari metode JavaScript - boolean yang menunjukkan apakah event handler harus dieksekusi dalam fase menangkap atau menggelegak (sesuai pemahaman saya dari http://www.quirksmode.org /js/events_advanced.html ) - ditinggalkan.

Bagaimana cara menentukan parameter itu, atau mencapai fungsi yang sama, menggunakan jQuery?

javascript jquery events event-handling dom-events Mengerjakan dgn kurang baik
sumber
3
Pengambilan acara tidak didukung oleh jQuery, karena penangkapan acara tidak didukung oleh IE, yang didukung jQuery;) Apakah Anda mencari kompatibilitas IE?
Crescent Fresh
Terima kasih, Crescent Fresh - Saya pikir itu masuk akal sekarang. Saya membutuhkan kompatibilitas IE, jadi saya kira saya perlu melupakan tentang fase penangkapan.
Bungle

Jawaban:

142

Tidak semua browser mendukung penangkapan acara (misalnya, versi Internet Explorer kurang dari 9 tidak), tetapi semua mendukung gelembung acara, itulah sebabnya ini adalah fase yang digunakan untuk mengikat penangan ke acara di semua abstraksi lintas-browser, termasuk jQuery.

Yang terdekat dengan apa yang Anda cari di jQuery adalah menggunakan bind()(digantikan oleh on()di jQuery 1.7+) atau metode jQuery khusus acara (dalam hal ini click(), yang bind()tetap memanggil internal). Semua menggunakan fase gelembung dari peristiwa yang terjadi.

Russ Cam
sumber
6
Sepertinya IE9 akhirnya mendukungnya. blogs.msdn.com/b/ie/archive/2010/03/26/…
beberapa
dan mengapa mereka tidak mendukung acara menangkap? apa kelemahan acara menangkap?
Aakash
2
Untuk lebih jelasnya, Anda mengatakan bahwa apa yang diinginkan OP tidak mungkin - bahwa Anda harus menggunakan gelembung, dan tidak dapat menggunakan penangkapan. Baik?
Noumenon
115

Pada jQuery 1.7, .on()sekarang metode yang disukai untuk acara mengikat, daripada .bind():

Dari http://api.jquery.com/bind/ :

Pada jQuery 1.7, metode .on () adalah metode yang disukai untuk melampirkan penangan acara ke dokumen. Untuk versi sebelumnya, metode .bind () digunakan untuk melampirkan pengendali event secara langsung ke elemen. Handler dilampirkan ke elemen yang saat ini dipilih di objek jQuery, sehingga elemen-elemen itu harus ada pada saat panggilan ke .bind () terjadi. Untuk pengikatan acara yang lebih fleksibel, lihat diskusi delegasi acara di .on () atau .delegate ().

Halaman dokumentasi terletak di http://api.jquery.com/on/


sumber
Jawaban yang diterima telah diedit untuk mengatasi hal ini.
Pengguna yang bukan pengguna
14

Satu hal yang perlu diperhatikan adalah bahwa metode acara jQuery tidak mengaktifkan / menjebak loadpada embedtag yang berisi SVG DOM yang dimuat sebagai dokumen terpisah dalam embedtag. Satu-satunya cara yang saya temukan untuk menjebak suatu loadperistiwa adalah menggunakan JavaScript mentah.

Ini tidak akan berfungsi (Saya sudah mencoba on/ bind/ loadmetode):

$img.on('load', function () {
    console.log('FOO!');
});

Namun, ini berfungsi:

$img[0].addEventListener('load', function () {
    console.log('FOO!');
}, false);
tbjers
sumber
1
harus dicatat bahwa ini adalah cara yang benar jika Anda bermaksud untuk tidak menimpa penangan peristiwa terikat lainnya untuk elemen.
r3wt
apa $img?
anatol
12

Anda sekarang harus menggunakan .on()fungsi untuk mengikat acara.


sumber
2 

$( "button" ).on( "click", function(event) {

    alert( $( this ).html() );
    console.log( event.target );

} );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<button>test 1</button>
<button>test 2</button>
Luaskan cuplikan

antelove
sumber
1

Berikut ini adalah perlakuan yang sangat baik di Mozilla Development Network (MDN) dari masalah ini untuk JavaScript standar (jika Anda tidak ingin bergantung pada jQuery atau memahaminya dengan lebih baik secara umum):

https://developer.mozilla.org/en-US/docs/DOM/element.addEventListener

Berikut ini adalah diskusi tentang aliran acara dari tautan dalam perawatan di atas:

http://www.w3.org/TR/DOM-Level-3-Events/#event-flow

Beberapa poin utama adalah:

  • Ini memungkinkan menambahkan lebih dari satu penangan tunggal untuk suatu acara
  • Ini memberi Anda kontrol fase yang lebih halus ketika pendengar diaktifkan (menangkap vs menggelegak)
  • Ia bekerja pada elemen DOM apa pun, bukan hanya elemen HTML
  • Nilai "ini" yang diteruskan ke acara tersebut bukan objek global (jendela), tetapi elemen dari mana elemen tersebut dipecat. Ini sangat nyaman.
  • Kode untuk legacy IE browser sederhana dan termasuk di bawah judul "Legacy Internet Explorer and attachEvent"
  • Anda dapat memasukkan parameter jika Anda melampirkan pawang dalam fungsi anonim
Xitalogy
sumber