Cara menggunakan addeventlistener javascript adalah

penangan untuk acara "klik" (mengklik kiri pada elemen), yang, menggunakan properti target dari objek Acara, memeriksa nama tag elemen, dan jika nilai itu cocok dengan nilai "LI", kemudian mengubah warna teks gaya untuk hijau ketika dipicu. Harap dicatat bahwa seringkali lebih mudah untuk menginstal satu penangan pada elemen induk, dan tidak untuk setiap elemen secara terpisah, ini terutama benar ketika jumlah elemen berubah secara dinamis, dalam hal ini tidak perlu memperbarui penangan untuk elemen .

Jika boolean true ditentukan, maka fungsi yang ditentukan oleh listener tidak akan pernah membatalkan tindakan default acara (panggil metode preventDefault()). Jika event handler memang memanggil metode preventDefault(), browser pengguna akan mengabaikannya dan membuat peringatan di konsol. Boolean false menunjukkan bahwa fungsi handler dapat membatalkan tindakan default acara (mungkin memanggil metode preventDefault()).

Menurut spesifikasi, nilai default untuk parameter pasif selalu salah . Namun, ini memungkinkan pendengar peristiwa yang menangani peristiwa sentuh tertentu untuk memblokir utas utama browser saat mencoba menangani pengguliran, yang dapat mengakibatkan penurunan kinerja yang signifikan selama pemrosesan pengguliran.

Untuk mencegah masalah ini, beberapa browser (terutama dan ) mengubah nilai default parameter pasif menjadi true untuk peristiwa touchstart dan touchmove pada node tingkat dokumen Window , Document , dan Document .body. Ini mencegah pendengar acara dipanggil sehingga tidak dapat memblokir rendering halaman saat menggulir.

Anda tidak perlu khawatir tentang nilai pasif untuk peristiwa scroll yang mendasarinya (scroll ), karena tidak dapat dibatalkan, pendengar acara tidak akan dapat memblokir rendering halaman.

Nuansa menggunakan ini di event handler

Sebagai aturan, elemen tempat event handler diaktifkan, hal ini terutama berlaku saat menggunakan event handler generik untuk elemen dengan tipe yang sama, harus melewati elemen. Jika Anda menambahkan fungsi event handler normal ke elemen menggunakan tambahkanEventListener(), maka nilai this di dalam handler tersebut akan menjadi referensi ke elemen tersebut. Nilai this akan menjadi nilai properti currentTarget dari argumen event objek Event yang diteruskan ke event handler, misalnya:

elemen.addEventListener("klik", fungsi ( e) ( console .log(ini .className); // mencetak nilai properti className dari elemen elemen ke konsol konsol .log( e.currentTarget === ini); // BENAR ) )

Perhatikan poin penting, nilai this dapat berubah, misalnya, fungsi panah tidak memiliki konteks ini sendiri, dalam hal ini ini tidak akan merujuk ke elemen:

elemen.addEventListener("klik", ( e) => ( console .log(ini .className); // ini tidak akan merujuk ke elemen konsol .log( e.currentTarget === ini); // Salah)

Mari kita lihat lagi situasi di mana event handler ditetapkan sebagai atribut dari event pada HTML elemen. Kode JavaScript dalam nilai atribut secara efektif dikemas dalam fungsi handler yang mengikat nilai this dengan cara yang sesuai dengan metode tambahkanEventListener()(ini dalam kode mewakili referensi ke elemen):

id = "btn" type = "button" onclick = "console.log(this.id)" > // mencetak nilai properti id elemen ke konsol

Saat mengklik elemen

id="btn" type="button" onclick="myFunc()"> <-- добавляем атрибут событий onclick -->

Perhatikan poin penting, nilai ini di dalam fungsi fungsiku() akan menjadi referensi ke objek Window global, atau tidak akan ditentukan jika mode ketat ditentukan ( mode ketat).

Untuk meneruskan konteks yang diperlukan, Anda dapat menggunakan metode call() dari objek Function, yang memungkinkan Anda untuk memanggil (mengeksekusi) fungsi sebagai metode objek, menyetel konteks eksekusinya (this ) ke nilai yang ditentukan, melewati argumen yang diperlukan:

id="btn" type="button" onclick="myFunc.call( ini )"> <-- добавляем атрибут событий onclick -->

Dalam hal ini, saat peristiwa dipicu, nilai atribut global dari elemen yang memicu peristiwa tersebut akan ditampilkan di konsol.

Lampirkan acara klik ke

Cara mendaftarkan event handler ini didukung di semua browser untuk semua jenis event yang umum digunakan. Secara umum, semua API yang didukung secara luas yang menentukan peristiwanya sendiri memungkinkan Anda untuk mendaftarkan pengendali dengan menyetel properti pengendali peristiwa.

Kerugian menggunakan properti event handler adalah mereka dirancang dengan asumsi bahwa target event akan memiliki paling banyak satu handler per tipe event. Saat membuat pustaka untuk digunakan dalam dokumen kustom, sebaiknya gunakan trik untuk mendaftarkan penangan (seperti memanggil metode addEventListener()) yang tidak mengubah atau menimpa penangan yang terdaftar sebelumnya.

Menyetel atribut pengendali acara

Properti event handler pada elemen dokumen juga dapat diatur dengan mendefinisikan nilai atribut dalam tag HTML yang sesuai. Dalam hal ini, nilai atribut harus berupa baris kode JavaScript. Kode ini tidak boleh berupa deklarasi lengkap dari fungsi event handler, tetapi hanya tubuhnya. Artinya, implementasi event handler dalam markup HTML tidak boleh diapit kurung kurawal dan didahului oleh kata kunci fungsi. Sebagai contoh:

Jika nilai atribut HTML pengendali peristiwa terdiri dari beberapa pernyataan JavaScript, mereka harus dipisahkan dengan titik koma, atau nilai atribut harus mencakup beberapa baris.

Beberapa jenis acara ditujukan untuk browser secara keseluruhan, dan bukan untuk elemen dokumen tertentu. Penangan untuk kejadian seperti itu di JavaScript terdaftar di objek Window. Dalam markup HTML, mereka harus ditempatkan di tag , tetapi browser akan mendaftarkannya di objek Window. Berikut adalah daftar lengkap event handler seperti yang didefinisikan oleh spesifikasi draf HTML5:

setelah cetak fokus on online ubah ukuran sebelum cetak di hash ubah di halaman sembunyikan penyimpanan di sebelum bongkar muat di halaman tampilkan urungkan on blur pada pesan di pop status saat bongkar on error saat offline on ulang

Saat mengembangkan skrip sisi klien, biasanya memisahkan markup HTML dari kode JavaScript. Pemrogram yang mengikuti aturan ini menghindari (atau setidaknya mencoba menghindari) penggunaan atribut event handler HTML untuk menghindari pencampuran kode JavaScript dan markup HTML.

tambahkanEventListener()

Dalam model acara standar, didukung oleh semua browser kecuali IE versi 8 dan di bawahnya, objek apa pun dapat menjadi target peristiwa - termasuk objek Jendela dan Dokumen dan semua objek Elemen elemen dokumen - metode pendefinisian bernama tambahkanEventListener(), yang dengannya Anda dapat mendaftarkan event handler untuk tujuan ini.

Metode addEventListener() membutuhkan tiga argumen. Yang pertama adalah tipe event dimana handler didaftarkan. Jenis peristiwa (atau nama) harus berupa string dan tidak boleh menyertakan awalan "on" yang digunakan saat menyetel properti pengendali peristiwa. Argumen kedua untuk metode addEventListener() adalah fungsi yang harus dipanggil saat kejadian dengan tipe yang ditentukan terjadi. Argumen terakhir untuk metode addEventListener() adalah nilai boolean. Biasanya, argumen ini diberikan nilai false. Jika Anda benar, fungsi tersebut akan didaftarkan sebagai pengendali intersepsi dan akan dipanggil di fase lain dari propagasi acara.

Spesifikasi dapat berubah dari waktu ke waktu untuk memungkinkannya menghilangkan argumen ketiga alih-alih secara eksplisit meneruskannya salah, tetapi pada saat penulisan ini, tidak adanya argumen ketiga di beberapa browser saat ini mengakibatkan kesalahan.

Cuplikan berikut mendaftarkan dua event handler "klik" pada sebuah elemen

Memanggil metode addEventListener() dengan string "klik" sebagai argumen pertama tidak memengaruhi nilai properti onclick dengan cara apa pun. Dalam cuplikan di atas, mengklik tombol akan memunculkan dua kotak dialog alert(). Tetapi yang lebih penting, metode addEventListener() dapat dipanggil beberapa kali dan dapat digunakan untuk mendaftarkan beberapa fungsi pengendali untuk jenis peristiwa yang sama pada objek yang sama. Ketika suatu peristiwa terjadi di suatu objek, semua penangan yang terdaftar untuk jenis peristiwa itu akan dipanggil dalam urutan di mana mereka terdaftar.

Memanggil metode addEventListener() beberapa kali pada objek yang sama dengan argumen yang sama tidak berpengaruh - fungsi handler didaftarkan hanya sekali, dan panggilan berulang tidak memengaruhi urutan pemanggilan handler.

Dipasangkan dengan metode addEventListener() adalah metode hapusEventListener(), yang mengambil tiga argumen yang sama, tetapi tidak menambahkan, tetapi menghapus fungsi handler dari objek. Ini sering berguna ketika Anda perlu mendaftarkan event handler sementara dan kemudian menghapusnya di beberapa titik.

Versi Internet Explorer di bawah IE9 tidak mendukung metode addEventListener() dan removeEventListener(). Metode serupa didefinisikan dalam IE5 dan di atasnya, lampirkanAcara() dan lepaskanAcara(). Karena model kejadian IE tidak mendukung fase penangkapan, metode attachEvent() dan detachEvent() hanya mengambil dua argumen: jenis kejadian dan fungsi handler, dengan metode IE meneruskan nama properti handler yang diawali dengan " on" sebagai argumen pertama, bukan tipe. peristiwa tanpa awalan ini.

Memanggil event handler

Setelah mendaftarkan event handler, web browser akan memanggilnya secara otomatis ketika sebuah event dari tipe yang ditentukan terjadi pada objek yang ditentukan. Bagian ini merinci urutan pemanggilan event handler, argumen ke handler, konteks panggilan (nilai this), dan tujuan nilai kembalian handler. Sayangnya, beberapa detail ini berbeda antara IE 8 dan di bawahnya dan browser lainnya.

Argumen Penangan Acara

Ketika event handler dipanggil, biasanya (dengan satu pengecualian dibahas di bawah) dilewatkan objek event sebagai argumen tunggal. Properti dari objek acara berisi informasi tambahan tentang acara tersebut. Properti jenis, misalnya, menentukan jenis peristiwa yang terjadi.

Di IE versi 8 dan di bawahnya, event handler yang didaftarkan dengan menyetel properti tidak melewati objek event saat dipanggil. Sebagai gantinya, objek acara disimpan di variabel global window.event. Untuk portabilitas, event handler dapat ditata seperti yang ditunjukkan di bawah ini sehingga mereka menggunakan variabel window.event saat dipanggil tanpa argumen:

Objek event diteruskan ke event handler yang terdaftar dengan metode attachEvent(), tetapi mereka juga dapat menggunakan variabel window.event.

Saat Anda mendaftarkan event handler dengan atribut HTML, browser mengonversi string JavaScript menjadi fungsi. Browser selain IE membuat fungsi dengan argumen acara tunggal. IE membuat fungsi yang tidak membutuhkan argumen. Jika Anda menggunakan pengenal acara dalam fungsi tersebut, itu akan merujuk ke window.event. Dalam kedua kasus tersebut, event handler yang didefinisikan dalam markup HTML dapat merujuk ke objek event menggunakan pengenal event.

Konteks pengendali acara

Saat event handler didaftarkan dengan menyetel properti, sepertinya mendefinisikan metode elemen dokumen baru:

E.onclick = function() ( /* implementasi handler */ );

Oleh karena itu, tidak mengherankan jika event handler dipanggil (dengan satu pengecualian IE, yang dijelaskan di bawah) sebagai metode objek di mana mereka didefinisikan. Artinya, di badan event handler, kata kunci this mengacu pada target event.

Dalam penangan, kata kunci this merujuk ke objek target, bahkan ketika mereka telah didaftarkan dengan metode addEventListener(). Sayangnya, bagaimanapun, ini tidak berlaku untuk metode attachEvent(): penangan yang terdaftar dengan metode attachEvent() dipanggil sebagai fungsi, dan di dalamnya kata kunci this merujuk ke objek global (Jendela). Masalah ini dapat diselesaikan dengan cara berikut:

/* Mendaftarkan fungsi yang ditentukan sebagai event handler dari tipe yang ditentukan dalam objek yang ditentukan. Memastikan bahwa handler akan selalu dipanggil sebagai metode pada objek target. */ function addEvent(target, type, handler) ( if (target.addEventListener) target.addEventListener(type, handler, false); else target.attachEvent("on" + type, function(event) ( // Memanggil handler sebagai metode target, // dan berikan objek acara ke sana return handler.call(target, event); )); )

Perhatikan bahwa event handler yang terdaftar dengan cara ini tidak dapat dihapus karena referensi fungsi pembungkus yang diteruskan ke metode attachEvent() tidak disimpan di mana pun untuk diteruskan ke metode detachEvent().

Handler mengembalikan nilai

Nilai yang dikembalikan oleh event handler yang didaftarkan dengan menyetel properti objek atau dengan menggunakan atribut HTML harus dipertimbangkan. Biasanya, nilai kembalian false memberi tahu browser bahwa browser tidak boleh melakukan tindakan default untuk peristiwa ini.

Misalnya, pengendali onclick dari tombol kirim formulir mungkin mengembalikan false untuk mencegah browser mengirimkan formulir. (Ini dapat berguna jika input pengguna gagal validasi sisi klien.) Demikian pula, event handler onkeypress bidang input dapat memfilter input keyboard, mengembalikan false jika karakter yang dimasukkan tidak valid.

Juga penting adalah nilai yang dikembalikan oleh handler onbeforeunload dari objek Window. Peristiwa ini dipicu saat browser menavigasi ke halaman lain. Jika handler ini mengembalikan string, itu akan ditampilkan dalam dialog modal yang meminta pengguna untuk mengonfirmasi keinginan mereka untuk meninggalkan halaman.

Penting untuk dipahami bahwa nilai yang dikembalikan oleh event handler diperhitungkan hanya jika handler didaftarkan dengan mengatur properti. Handler yang terdaftar dengan addEventListener() atau attachEvent() seharusnya memanggil metode preventDefault() atau menyetel properti returnValue dari objek event.

Pembatalan acara

Nilai yang dikembalikan oleh pengendali peristiwa yang terdaftar sebagai properti dapat digunakan untuk mengganti perilaku default browser saat peristiwa ini terjadi. Di browser yang mendukung metode addEventListener(), Anda juga dapat mengganti perilaku default dengan memanggil mencegahDefault() objek acara. Namun, di IE versi 8 dan di bawahnya, efek yang sama dicapai dengan mengatur properti nilai kembalian objek acara menjadi salah.

Cuplikan berikut menunjukkan pengendali peristiwa klik hyperlink yang menggunakan ketiga metode pembatalan acara (memblokir pengguna agar tidak mengeklik tautan):

Window.onload = function() ( // Temukan semua tautan var a_href = document.getElementsByTagName("a"); // Tambahkan event handler klik (bukan untuk IE

Proyek modul DOM Events 3 saat ini mendefinisikan properti pada objek Event bernama defaultDicegah. Ini belum didukung oleh semua browser, tetapi intinya adalah bahwa dalam kondisi normal itu salah dan hanya benar jika metode preventDefault() dipanggil.

Membatalkan tindakan default yang terkait dengan acara hanyalah salah satu dari banyak cara untuk membatalkan acara. Ada juga opsi untuk menghentikan penyebaran acara. Di browser yang mendukung metode addEventListener(), objek acara memiliki metode berhentiPropagasi(), yang panggilannya mengganggu propagasi lebih lanjut dari acara tersebut. Jika penangan lain untuk peristiwa ini terdaftar pada objek target yang sama, penangan lain akan tetap dipanggil, tetapi tidak ada pengendali peristiwa lain pada objek lain yang akan dipanggil setelah metode stopPropagation() dipanggil.

Di IE versi 8 dan di bawahnya, metode stopPropagation() tidak didukung. Sebagai gantinya, objek acara di IE memiliki properti batalkan Gelembung. Menyetel properti ini ke true mencegah acara menyebar.

Spesifikasi draft DOM Events 3 saat ini mendefinisikan metode lain pada objek Event, sebuah metode bernama hentikanPropagasi Segera(). Seperti metode stopPropagation() , ini mencegah acara menyebar ke objek lain. Namun selain itu, ini juga mencegah penangan kejadian lain yang terdaftar pada objek yang sama untuk dipanggil.

Komentar

Dengan mengklik tombol, Anda setuju untuk Kebijakan pribadi dan aturan situs yang ditetapkan dalam perjanjian pengguna

addEventListener Javascript untuk apa?

Apa yang dimaksud dengan event listener?

Apa metode dari elemen HTML yang dapat digunakan untuk menambahkan event handler?