Bagaimana cara mendapatkan penangan acara yang ada di javascript?

Question

Satu atau beberapa jenis peristiwa yang dipisahkan ruang dan ruang nama opsional, seperti "klik" atau "keydown. plugin saya"

Table of Contents Show

Nama acara dan ruang nama
Penangan acara langsung dan didelegasikan
Penangan acara dan lingkungannya
Melewati data ke handler
Performa acara
Catatan tambahan
Bagaimana cara menemukan event handler di JavaScript?
Bagaimana cara mendapatkan semua pendengar acara dalam JavaScript?
Bagaimana saya tahu jika eventListener ditambahkan?
Berapa banyak event handler yang ada di JavaScript?

pemilih

Jenis.

String pemilih untuk memfilter turunan dari elemen terpilih yang memicu kejadian. Jika pemilih


$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});

8 atau dihilangkan, acara selalu dipicu saat mencapai elemen yang dipilih

data

Jenis.

Data yang akan diteruskan ke handler di


$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});

9 saat suatu peristiwa dipicu

pawang

Jenis. ( eventObject [, extraParameter ] [,. ] )

Sebuah fungsi untuk dieksekusi ketika event dipicu. Nilai


function notify() {
  alert( "clicked" );
}
$( "button" ).on( "click", notify );

_0 juga diperbolehkan sebagai singkatan untuk fungsi yang hanya melakukan


function notify() {
  alert( "clicked" );
}
$( "button" ).on( "click", notify );

1

versi ditambahkan. 1. 7

acara
Jenis.
Objek di mana kunci string mewakili satu atau lebih tipe peristiwa yang dipisahkan spasi dan ruang nama opsional, dan nilainya mewakili fungsi penangan yang akan dipanggil untuk peristiwa tersebut
pemilih
Jenis.
String pemilih untuk memfilter turunan dari elemen terpilih yang akan memanggil handler. Jika pemilihnya nol atau dihilangkan, penangan selalu dipanggil saat mencapai elemen yang dipilih

data

Jenis.

Data yang akan diteruskan ke handler di


$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});

9 ketika suatu peristiwa terjadi

Metode


function notify() {
  alert( "clicked" );
}
$( "button" ).on( "click", notify );

_3 menempelkan event handler ke kumpulan elemen yang dipilih saat ini di objek jQuery. Pada jQuery 1. 7, metode


function notify() {
  alert( "clicked" );
}
$( "button" ).on( "click", notify );

3 menyediakan semua fungsionalitas yang diperlukan untuk melampirkan event handler. Untuk bantuan dalam mengonversi dari metode peristiwa jQuery yang lebih lama, lihat


function notify() {
  alert( "clicked" );
}
$( "button" ).on( "click", notify );

5,


function notify() {
  alert( "clicked" );
}
$( "button" ).on( "click", notify );

6, dan


function notify() {
  alert( "clicked" );
}
$( "button" ).on( "click", notify );

7. Untuk menghapus acara yang terikat dengan


function notify() {
  alert( "clicked" );
}
$( "button" ).on( "click", notify );

_3, lihat


function notify() {
  alert( "clicked" );
}
$( "button" ).on( "click", notify );

9. Untuk melampirkan acara yang hanya berjalan sekali lalu menghapusnya sendiri, lihat


function greet( event ) {
  alert( "Hello " + event.data.name );
}
$( "button" ).on( "click", {
  name: "Karl"
}, greet );
$( "button" ).on( "click", {
  name: "Addy"
}, greet );

0

Nama acara dan ruang nama

Nama peristiwa apa pun dapat digunakan untuk argumen ________12______1. jQuery akan melewati jenis peristiwa JavaScript standar browser, memanggil fungsi


function greet( event ) {
  alert( "Hello " + event.data.name );
}
$( "button" ).on( "click", {
  name: "Karl"
}, greet );
$( "button" ).on( "click", {
  name: "Addy"
}, greet );

2 saat browser menghasilkan peristiwa karena tindakan pengguna seperti


function greet( event ) {
  alert( "Hello " + event.data.name );
}
$( "button" ).on( "click", {
  name: "Karl"
}, greet );
$( "button" ).on( "click", {
  name: "Addy"
}, greet );

3. Selain itu, metode


function greet( event ) {
  alert( "Hello " + event.data.name );
}
$( "button" ).on( "click", {
  name: "Karl"
}, greet );
$( "button" ).on( "click", {
  name: "Addy"
}, greet );

_4 dapat memicu nama peristiwa browser standar dan nama peristiwa khusus untuk memanggil penangan terlampir. Nama peristiwa hanya boleh berisi karakter alfanumerik, garis bawah, dan titik dua

Nama peristiwa dapat dikualifikasikan oleh ruang nama peristiwa yang menyederhanakan penghapusan atau pemicu peristiwa. Misalnya,


function greet( event ) {
  alert( "Hello " + event.data.name );
}
$( "button" ).on( "click", {
  name: "Karl"
}, greet );
$( "button" ).on( "click", {
  name: "Addy"
}, greet );

_5 mendefinisikan myPlugin dan ruang nama sederhana untuk kejadian klik khusus ini. Penangan kejadian klik yang dilampirkan melalui string itu dapat dihapus dengan


function greet( event ) {
  alert( "Hello " + event.data.name );
}
$( "button" ).on( "click", {
  name: "Karl"
}, greet );
$( "button" ).on( "click", {
  name: "Addy"
}, greet );

6 atau


function greet( event ) {
  alert( "Hello " + event.data.name );
}
$( "button" ).on( "click", {
  name: "Karl"
}, greet );
$( "button" ).on( "click", {
  name: "Addy"
}, greet );

7 tanpa mengganggu penangan klik lain yang melekat pada elemen. Ruang nama mirip dengan kelas CSS karena tidak hierarkis; . Ruang nama harus berisi huruf besar/kecil dan angka saja

Dalam bentuk kedua dari


function notify() {
  alert( "clicked" );
}
$( "button" ).on( "click", notify );

_3, argumen


function greet( event ) {
  alert( "Hello " + event.data.name );
}
$( "button" ).on( "click", {
  name: "Karl"
}, greet );
$( "button" ).on( "click", {
  name: "Addy"
}, greet );

1 adalah objek biasa. Kuncinya adalah string dalam bentuk yang sama dengan argumen


function greet( event ) {
  alert( "Hello " + event.data.name );
}
$( "button" ).on( "click", {
  name: "Karl"
}, greet );
$( "button" ).on( "click", {
  name: "Addy"
}, greet );

1 dengan nama jenis peristiwa yang dipisahkan spasi dan ruang nama opsional. Nilai untuk setiap kunci adalah fungsi (atau


function notify() {
  alert( "clicked" );
}
$( "button" ).on( "click", notify );

0 nilai) yang digunakan sebagai


function greet( event ) {
  alert( "Hello " + event.data.name );
}
$( "button" ).on( "click", {
  name: "Karl"
}, greet );
$( "button" ).on( "click", {
  name: "Addy"
}, greet );

2 alih-alih argumen terakhir untuk metode. Dalam hal lain, kedua bentuk itu identik dalam perilakunya seperti yang dijelaskan di bawah ini

Penangan acara langsung dan didelegasikan

Sebagian besar gelembung peristiwa browser, atau menyebar, dari elemen terdalam dan terdalam (target peristiwa) dalam dokumen di mana peristiwa itu terjadi sampai ke badan dan elemen


var $test = $( "#test" );
 
function handler1() {
  console.log( "handler1" );
  $test.off( "click", handler2 );
}
 
function handler2() {
  console.log( "handler2" );
}
 
$test.on( "click", handler1 );
$test.on( "click", handler2 );

3. Di Internet Explorer 8 dan yang lebih rendah, beberapa peristiwa seperti


var $test = $( "#test" );
 
function handler1() {
  console.log( "handler1" );
  $test.off( "click", handler2 );
}
 
function handler2() {
  console.log( "handler2" );
}
 
$test.on( "click", handler1 );
$test.on( "click", handler2 );

4 dan


var $test = $( "#test" );
 
function handler1() {
  console.log( "handler1" );
  $test.off( "click", handler2 );
}
 
function handler2() {
  console.log( "handler2" );
}
 
$test.on( "click", handler1 );
$test.on( "click", handler2 );

5 tidak menggelembung secara bawaan tetapi jQuery menambalnya menjadi menggelembung dan membuat perilaku lintas-browser yang konsisten

Jika


var $test = $( "#test" );
 
function handler1() {
  console.log( "handler1" );
  $test.off( "click", handler2 );
}
 
function handler2() {
  console.log( "handler2" );
}
 
$test.on( "click", handler1 );
$test.on( "click", handler2 );

6 dihilangkan atau null, event handler disebut sebagai direct atau direct-bound. Handler dipanggil setiap kali suatu peristiwa terjadi pada elemen yang dipilih, apakah itu terjadi langsung pada elemen atau gelembung dari elemen turunan (dalam)

Ketika


var $test = $( "#test" );
 
function handler1() {
  console.log( "handler1" );
  $test.off( "click", handler2 );
}
 
function handler2() {
  console.log( "handler2" );
}
 
$test.on( "click", handler1 );
$test.on( "click", handler2 );

_6 disediakan, event handler disebut sebagai didelegasikan. Handler tidak dipanggil ketika event terjadi langsung pada elemen terikat, tetapi hanya untuk keturunan (inner element) yang cocok dengan selector. jQuery menggelembungkan acara dari target acara hingga ke elemen tempat penangan terpasang (mis. e. , elemen terdalam ke terluar) dan menjalankan penangan untuk setiap elemen di sepanjang jalur yang cocok dengan pemilih

Penangan acara terikat hanya pada elemen yang dipilih saat ini; . Untuk memastikan elemen ada dan dapat dipilih, tempatkan skrip setelah elemen di markup HTML atau lakukan pengikatan peristiwa di dalam penangan siap dokumen. Alternatifnya, gunakan penangan acara yang didelegasikan untuk melampirkan penangan acara

Penangan acara yang didelegasikan memiliki keuntungan bahwa mereka dapat memproses acara dari elemen turunan yang ditambahkan ke dokumen di lain waktu. Dengan memilih elemen yang dijamin hadir pada saat penangan acara yang didelegasikan dipasang, Anda dapat menggunakan penangan acara yang didelegasikan untuk menghindari kebutuhan untuk sering melampirkan dan menghapus penangan acara. Elemen ini bisa menjadi elemen penampung tampilan dalam desain Model-View-Controller, misalnya, atau


var $test = $( "#test" );
 
function handler1() {
  console.log( "handler1" );
  $test.off( "click", handler2 );
}
 
function handler2() {
  console.log( "handler2" );
}
 
$test.on( "click", handler1 );
$test.on( "click", handler2 );

3 jika event handler ingin memantau semua event yang menggelegak dalam dokumen. Elemen


var $test = $( "#test" );
 
function handler1() {
  console.log( "handler1" );
  $test.off( "click", handler2 );
}
 
function handler2() {
  console.log( "handler2" );
}
 
$test.on( "click", handler1 );
$test.on( "click", handler2 );

_3 tersedia di


$( "p" ).on( "click", function() {
  alert( $( this ).text() );
});

1 dokumen sebelum memuat HTML lainnya, jadi aman untuk melampirkan acara di sana tanpa menunggu dokumen siap

Selain kemampuannya untuk menangani event pada elemen turunan yang belum dibuat, keuntungan lain dari penangan event yang didelegasikan adalah potensi overhead yang jauh lebih rendah ketika banyak elemen harus dipantau. Pada tabel data dengan 1.000 baris di


$( "p" ).on( "click", function() {
  alert( $( this ).text() );
});

2, contoh ini melampirkan handler ke 1.000 elemen

1

2

3


$( "#dataTable tbody tr" ).on( "click", function() {
  console.log( $( this ).text() );
});

Pendekatan pendelegasian acara melampirkan pengendali acara hanya ke satu elemen, tbody, dan acara hanya perlu meluap satu tingkat (dari


$( "p" ).on( "click", function() {
  alert( $( this ).text() );
});

3 yang diklik hingga


$( "p" ).on( "click", function() {
  alert( $( this ).text() );
});

2)

1

2

3


$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});

Catatan. Penangan acara yang didelegasikan tidak berfungsi untuk SVG

Penangan acara dan lingkungannya

Argumen


function greet( event ) {
  alert( "Hello " + event.data.name );
}
$( "button" ).on( "click", {
  name: "Karl"
}, greet );
$( "button" ).on( "click", {
  name: "Addy"
}, greet );

_2 adalah fungsi (atau nilai


function notify() {
  alert( "clicked" );
}
$( "button" ).on( "click", notify );

0, lihat di bawah), dan diperlukan kecuali jika Anda meneruskan objek untuk argumen


function greet( event ) {
  alert( "Hello " + event.data.name );
}
$( "button" ).on( "click", {
  name: "Karl"
}, greet );
$( "button" ).on( "click", {
  name: "Addy"
}, greet );

1. Anda dapat memberikan fungsi penangan anonim pada titik panggilan


function notify() {
  alert( "clicked" );
}
$( "button" ).on( "click", notify );

3, seperti yang telah dilakukan contoh di atas, atau mendeklarasikan fungsi bernama dan meneruskan namanya

1

2

3

4


function notify() {
  alert( "clicked" );
}
$( "button" ).on( "click", notify );

Saat browser memicu suatu peristiwa atau JavaScript lainnya memanggil metode


function greet( event ) {
  alert( "Hello " + event.data.name );
}
$( "button" ).on( "click", {
  name: "Karl"
}, greet );
$( "button" ).on( "click", {
  name: "Addy"
}, greet );

4 jQuery, jQuery meneruskan objek


function myHandler( event ) {
  alert( event.data.foo );
}
$( "p" ).on( "click", { foo: "bar" }, myHandler );

0 yang dapat digunakan oleh handler untuk menganalisis dan mengubah status peristiwa. Objek ini adalah subset data yang dinormalisasi yang disediakan oleh browser; . Misalnya,


function myHandler( event ) {
  alert( event.data.foo );
}
$( "p" ).on( "click", { foo: "bar" }, myHandler );

2 berisi nama acara (mis. g. , "resize") dan


function myHandler( event ) {
  alert( event.data.foo );
}
$( "p" ).on( "click", { foo: "bar" }, myHandler );

_3 menunjukkan elemen terdalam (terdalam) di mana peristiwa itu terjadi

Secara default, sebagian besar peristiwa meluap dari target peristiwa asli ke elemen


var $test = $( "#test" );
 
function handler1() {
  console.log( "handler1" );
  $test.off( "click", handler2 );
}
 
function handler2() {
  console.log( "handler2" );
}
 
$test.on( "click", handler1 );
$test.on( "click", handler2 );

3. Di setiap elemen di sepanjang jalan, jQuery memanggil penangan acara yang cocok yang telah dilampirkan. Handler dapat mencegah event menggelegak lebih jauh ke atas pohon dokumen (dan dengan demikian mencegah handler pada elemen tersebut berjalan) dengan memanggil


function myHandler( event ) {
  alert( event.data.foo );
}
$( "p" ).on( "click", { foo: "bar" }, myHandler );

5. Namun, penangan lain yang terpasang pada elemen saat ini akan berjalan. Untuk mencegahnya, hubungi


function myHandler( event ) {
  alert( event.data.foo );
}
$( "p" ).on( "click", { foo: "bar" }, myHandler );

6. (Event handler yang terikat pada suatu elemen dipanggil dengan urutan yang sama seperti saat terikat. )

Demikian pula, penangan dapat memanggil


function myHandler( event ) {
  alert( event.data.foo );
}
$( "p" ).on( "click", { foo: "bar" }, myHandler );

7 untuk membatalkan tindakan default apa pun yang mungkin dimiliki browser untuk acara ini; . Tidak semua acara browser memiliki tindakan default, dan tidak semua tindakan default dapat dibatalkan. Lihat untuk detailnya

Mengembalikan


function notify() {
  alert( "clicked" );
}
$( "button" ).on( "click", notify );

_0 dari event handler akan secara otomatis memanggil


function myHandler( event ) {
  alert( event.data.foo );
}
$( "p" ).on( "click", { foo: "bar" }, myHandler );

5 dan


function myHandler( event ) {
  alert( event.data.foo );
}
$( "p" ).on( "click", { foo: "bar" }, myHandler );

7. Nilai


function notify() {
  alert( "clicked" );
}
$( "button" ).on( "click", notify );

0 juga dapat diberikan untuk


function greet( event ) {
  alert( "Hello " + event.data.name );
}
$( "button" ).on( "click", {
  name: "Karl"
}, greet );
$( "button" ).on( "click", {
  name: "Addy"
}, greet );

2 sebagai singkatan untuk


$( "form" ).on( "submit", false );

4. Jadi,


$( "form" ).on( "submit", false );

_5 melampirkan event handler ke semua tautan dengan kelas "dinonaktifkan" yang mencegah mereka untuk diikuti saat diklik dan juga menghentikan acara agar tidak menggelegak

Saat jQuery memanggil handler, kata kunci


$( "form" ).on( "submit", false );

6 adalah referensi ke elemen tempat acara dikirimkan; . (Perhatikan bahwa


$( "form" ).on( "submit", false );

_6 mungkin tidak sama dengan


function myHandler( event ) {
  alert( event.data.foo );
}
$( "p" ).on( "click", { foo: "bar" }, myHandler );

3 jika peristiwa tersebut muncul dari elemen turunan. ) Untuk membuat objek jQuery dari elemen sehingga dapat digunakan dengan metode jQuery, gunakan


$( "form" ).on( "submit", function( event ) {
  event.preventDefault();
});

0

Melewati data ke handler

Jika argumen


$( "form" ).on( "submit", function( event ) {
  event.preventDefault();
});

1 diberikan kepada


function notify() {
  alert( "clicked" );
}
$( "button" ).on( "click", notify );

3 dan bukan


$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});

8 atau


$( "form" ).on( "submit", function( event ) {
  event.preventDefault();
});

4, argumen tersebut diteruskan ke handler di properti


$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});

9 setiap kali peristiwa dipicu. Argumen


$( "form" ).on( "submit", function( event ) {
  event.preventDefault();
});

_1 dapat berupa tipe apa pun, tetapi jika sebuah string digunakan,


var $test = $( "#test" );
 
function handler1() {
  console.log( "handler1" );
  $test.off( "click", handler2 );
}
 
function handler2() {
  console.log( "handler2" );
}
 
$test.on( "click", handler1 );
$test.on( "click", handler2 );

6 harus disediakan atau secara eksplisit diteruskan sebagai


$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});

8 sehingga data tidak disalahartikan sebagai pemilih. Praktik terbaik adalah menggunakan objek biasa sehingga beberapa nilai dapat diteruskan sebagai properti

Pada jQuery 1. 4, event handler yang sama dapat diikat ke suatu elemen beberapa kali. Ini sangat berguna ketika fitur


$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});

_9 sedang digunakan, atau ketika data unik lainnya berada dalam penutupan di sekitar fungsi event handler. Sebagai contoh

1

2

3

4

5

6

7

8

9


function greet( event ) {
  alert( "Hello " + event.data.name );
}
$( "button" ).on( "click", {
  name: "Karl"
}, greet );
$( "button" ).on( "click", {
  name: "Addy"
}, greet );

Kode di atas akan menghasilkan dua peringatan berbeda saat tombol diklik

Sebagai alternatif atau tambahan untuk argumen


$( "form" ).on( "submit", function( event ) {
  event.preventDefault();
});

1 yang disediakan untuk metode


function notify() {
  alert( "clicked" );
}
$( "button" ).on( "click", notify );

3, Anda juga dapat meneruskan data ke event handler menggunakan argumen kedua ke


function greet( event ) {
  alert( "Hello " + event.data.name );
}
$( "button" ).on( "click", {
  name: "Karl"
}, greet );
$( "button" ).on( "click", {
  name: "Addy"
}, greet );

4 atau


$( "form" ).on( "submit", function( event ) {
  event.stopPropagation();
});

3. Data yang disediakan dengan cara ini diteruskan ke event handler sebagai parameter lebih lanjut setelah objek


function myHandler( event ) {
  alert( event.data.foo );
}
$( "p" ).on( "click", { foo: "bar" }, myHandler );

0. Jika array diteruskan ke argumen kedua


function greet( event ) {
  alert( "Hello " + event.data.name );
}
$( "button" ).on( "click", {
  name: "Karl"
}, greet );
$( "button" ).on( "click", {
  name: "Addy"
}, greet );

4 atau


$( "form" ).on( "submit", function( event ) {
  event.stopPropagation();
});

3, setiap elemen dalam array akan disajikan ke event handler sebagai parameter individual

Performa acara

Dalam kebanyakan kasus, peristiwa seperti


function greet( event ) {
  alert( "Hello " + event.data.name );
}
$( "button" ).on( "click", {
  name: "Karl"
}, greet );
$( "button" ).on( "click", {
  name: "Addy"
}, greet );

3 jarang terjadi dan kinerja tidak menjadi perhatian yang signifikan. Namun, kejadian berfrekuensi tinggi seperti


$( "form" ).on( "submit", function( event ) {
  event.stopPropagation();
});

8 atau


$( "form" ).on( "submit", function( event ) {
  event.stopPropagation();
});

9 dapat menyala puluhan kali per detik, dan dalam kasus tersebut, menjadi lebih penting untuk menggunakan kejadian dengan bijaksana. Performa dapat ditingkatkan dengan mengurangi jumlah pekerjaan yang dilakukan dalam penangan itu sendiri, menyimpan informasi yang diperlukan oleh penangan daripada menghitungnya kembali, atau dengan membatasi kecepatan jumlah pembaruan halaman aktual menggunakan


$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});

00

Melampirkan banyak penangan acara yang didelegasikan di dekat bagian atas pohon dokumen dapat menurunkan kinerja. Setiap kali peristiwa terjadi, jQuery harus membandingkan semua penyeleksi dari semua peristiwa terlampir dari jenis tersebut ke setiap elemen di jalur dari target peristiwa hingga bagian atas dokumen. Untuk performa terbaik, lampirkan acara yang didelegasikan di lokasi dokumen sedekat mungkin dengan elemen target. Hindari penggunaan berlebihan


var $test = $( "#test" );
 
function handler1() {
  console.log( "handler1" );
  $test.off( "click", handler2 );
}
 
function handler2() {
  console.log( "handler2" );
}
 
$test.on( "click", handler1 );
$test.on( "click", handler2 );

_3 atau


$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});

02 untuk acara yang didelegasikan pada dokumen besar

jQuery dapat memproses pemilih sederhana dari bentuk


$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});

03 dengan sangat cepat saat digunakan untuk memfilter acara yang didelegasikan. Jadi,


$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});

_04,


$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});

05, dan


$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});

06 semuanya adalah pemilih cepat. Acara yang didelegasikan yang menggunakan penyeleksi yang lebih kompleks, terutama yang hierarkis, bisa beberapa kali lebih lambat--walaupun masih cukup cepat untuk sebagian besar aplikasi. Pemilih hierarki seringkali dapat dihindari hanya dengan melampirkan penangan ke titik yang lebih sesuai dalam dokumen. Misalnya, alih-alih


$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});

_07 gunakan


$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});

08

Catatan tambahan

Ada metode singkatan untuk beberapa peristiwa seperti


$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});

09 yang dapat digunakan untuk melampirkan atau memicu event handler. Untuk daftar lengkap metode steno, lihat kategori acara

Tidak digunakan lagi di jQuery 1. 8, dihapus dalam 1. 9. Nama


$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});

_10 digunakan sebagai singkatan untuk string


$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});

11. Itu melampirkan satu event handler untuk dua event tersebut, dan handler harus memeriksa


function myHandler( event ) {
  alert( event.data.foo );
}
$( "p" ).on( "click", { foo: "bar" }, myHandler );

2 untuk menentukan apakah event tersebut


$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});

13 atau


$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});

14. Jangan bingung antara pseudo-event-name "hover" dengan metode


$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});

15, yang menerima satu atau dua fungsi

sistem peristiwa jQuery mengharuskan elemen DOM memungkinkan pelekatan data melalui properti pada elemen, sehingga peristiwa dapat dilacak dan dikirimkan. Elemen


$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});

16,


$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});

17, dan


$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});

18 tidak dapat melampirkan data, dan karena itu tidak dapat memiliki peristiwa jQuery yang terikat padanya

Peristiwa


$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});

19 dan


$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});

20 ditentukan oleh W3C untuk tidak menggelembung, tetapi jQuery mendefinisikan peristiwa lintas-browser


$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});

21 dan


$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});

22 yang melakukan gelembung. Ketika


$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});

19 dan


$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});

20 digunakan untuk melampirkan event handler yang didelegasikan, jQuery memetakan nama dan mengirimkannya masing-masing sebagai


$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});

21 dan


$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});

22. Untuk konsistensi dan kejelasan, gunakan nama jenis peristiwa menggelegak

Di semua browser, peristiwa


$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});

27,


$( "form" ).on( "submit", function( event ) {
  event.stopPropagation();
});

9, dan


$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});

29 (e. g. , pada elemen


$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});

_30) jangan menggelembung. Di Internet Explorer 8 dan lebih rendah, peristiwa


$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});

_31 dan


$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});

32 tidak muncul. Acara semacam itu tidak didukung untuk digunakan dengan delegasi, tetapi dapat digunakan saat penangan acara dilampirkan langsung ke elemen yang menghasilkan acara

Acara


$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});

29 pada objek


$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});

34 menggunakan argumen nonstandar dan konvensi nilai pengembalian, sehingga tidak didukung oleh jQuery. Sebagai gantinya, tetapkan fungsi penangan langsung ke properti


$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});

35

Daftar penangan untuk suatu elemen diatur saat acara pertama kali dikirimkan. Menambahkan atau menghapus penangan acara pada elemen saat ini tidak akan berpengaruh hingga saat berikutnya acara tersebut ditangani. Untuk mencegah event handler lebih lanjut mengeksekusi elemen di dalam event handler, panggil


function myHandler( event ) {
  alert( event.data.foo );
}
$( "p" ).on( "click", { foo: "bar" }, myHandler );

6. Perilaku ini bertentangan dengan. Untuk lebih memahami kasus ini, perhatikan kode berikut

1

2

3

4

5

6

7

8

9

10

11

12

13


var $test = $( "#test" );
 
function handler1() {
  console.log( "handler1" );
  $test.off( "click", handler2 );
}
 
function handler2() {
  console.log( "handler2" );
}
 
$test.on( "click", handler1 );
$test.on( "click", handler2 );

Dalam kode di atas,


$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});

_37 tetap akan dieksekusi pertama kali meskipun dihapus menggunakan


function notify() {
  alert( "clicked" );
}
$( "button" ).on( "click", notify );

9. Namun, penangan tidak akan dieksekusi pada saat peristiwa


function greet( event ) {
  alert( "Hello " + event.data.name );
}
$( "button" ).on( "click", {
  name: "Karl"
}, greet );
$( "button" ).on( "click", {
  name: "Addy"
}, greet );

3 berikut ini dipicu

Contoh

Tampilkan teks paragraf dalam peringatan saat diklik

1

2

3


$( "p" ).on( "click", function() {
  alert( $( this ).text() );
});

Meneruskan data ke event handler, yang ditentukan di sini dengan nama

1

2

3

4


function myHandler( event ) {
  alert( event.data.foo );
}
$( "p" ).on( "click", { foo: "bar" }, myHandler );

Batalkan tindakan pengiriman formulir dan cegah acara meluap dengan mengembalikan


function notify() {
  alert( "clicked" );
}
$( "button" ).on( "click", notify );

0

1


$( "form" ).on( "submit", false );

Batalkan hanya tindakan default dengan menggunakan


$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});

41

1

2

3


$( "form" ).on( "submit", function( event ) {
  event.preventDefault();
});

Hentikan pengiriman acara agar tidak menggelegak tanpa mencegah pengiriman formulir, menggunakan


$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});

42

1

2

3


$( "form" ).on( "submit", function( event ) {
  event.stopPropagation();
});

Teruskan data ke event handler menggunakan argumen kedua ke


function greet( event ) {
  alert( "Hello " + event.data.name );
}
$( "button" ).on( "click", {
  name: "Karl"
}, greet );
$( "button" ).on( "click", {
  name: "Addy"
}, greet );

4

1

2

3

4


$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});

0

Gunakan argumen kedua


function greet( event ) {
  alert( "Hello " + event.data.name );
}
$( "button" ).on( "click", {
  name: "Karl"
}, greet );
$( "button" ).on( "click", {
  name: "Addy"
}, greet );

_4 untuk meneruskan array data ke event handler

1

2

3

4


$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});

_1

Lampirkan dan picu peristiwa khusus (non-browser).

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38


$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});

_2

Demo

Lampirkan beberapa penangan acara secara bersamaan menggunakan objek biasa

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38


$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});

_3

Demo

Klik paragraf mana pun untuk menambahkan yang lain setelahnya. Perhatikan bahwa


function notify() {
  alert( "clicked" );
}
$( "button" ).on( "click", notify );

_3 memungkinkan acara klik pada paragraf apa pun--bahkan yang baru--karena acara ditangani oleh elemen tubuh yang selalu ada setelah muncul di sana

Bagaimana cara menemukan event handler di JavaScript?

Klik kanan pada tombol ikon pencarian dan pilih "periksa" untuk membuka alat pengembang Chrome. Setelah alat dev terbuka, alihkan ke tab "Pendengar Acara" dan Anda akan melihat semua pendengar acara terikat ke elemen. Anda dapat memperluas pendengar acara apa pun dengan mengklik panah kanan

Bagaimana cara mendapatkan semua pendengar acara dalam JavaScript?

Daftar semua event listener dalam JavaScript dapat dilakukan. Tidak sesulit itu; . fungsi reportIn(e){ var a = ini. lastListenerInfo[ini. lastListenerInfo. hack the prototype 's method of the HTML elements (before adding the listeners). function reportIn(e){ var a = this. lastListenerInfo[this. lastListenerInfo.

Bagaimana saya tahu jika eventListener ditambahkan?

Ini bisa dilakukan. .

Di halaman dengan mengklik kanan item di halaman web yang ingin Anda periksa dan pilih "Periksa Elemen" dari menu

Di dalam konsol dengan menggunakan fungsi untuk memilih elemen, seperti dokumen. querySelector, lalu mengklik ikon di samping elemen untuk melihatnya di tab Inspektur