Ringkasan Pembelajaran Acara Javascript (II) JS Event Handler

Bacaan terkait:

JavaScript Event Learning Ringkasan (V) Jenis acara tikus di JS

//www.vevb.com/article/86259.htm

JavaScript Ringkasan Pembelajaran Acara (i) Aliran Acara

//www.vevb.com/article/86261.htm

Ringkasan Pembelajaran Acara Javascript (IV) Anggota Umum Acara (Properti dan Metode)

//www.vevb.com/article/86262.htm

Ringkasan Pembelajaran Acara Javascript (II) JS Event Handler

//www.vevb.com/article/86264.htm

Ringkasan Pembelajaran Acara Javascript (III) Objek Acara JS

1. Event Handler

Seperti disebutkan sebelumnya, acara adalah beberapa tindakan yang dilakukan oleh pengguna atau browser sendiri, seperti klik, muat dan mouseover adalah semua nama peristiwa. Fungsi yang menanggapi acara tertentu disebut penangan acara (juga disebut event handler, event handler). Nama event handler dimulai dengan "ON", jadi event handler dari acara klik adalah OnClick, dan event handler dari acara Load adalah onload.

Ada tiga cara utama untuk menentukan penangan acara untuk acara.

1. HTML Event Handler

Pertama -tama, pendekatan ini sudah ketinggalan zaman. Karena tindakan (kode JavaScript) dan konten (kode HTML) digabungkan dengan ketat. Tapi itu masih bisa digunakan saat menulis demo kecil.

Ada dua cara untuk melakukan ini, yang keduanya sangat sederhana:

Tipe pertama: Langsung mendefinisikan event handler dan tindakan yang disertakan dalam HTML.

Salinan kode adalah sebagai berikut: <input type = "tombol" value = "klik saya!"/>

Tipe kedua: mendefinisikan event handler di HTML, dan tindakan yang dieksekusi memanggil skrip yang ditentukan di tempat lain.

Salinan kode adalah sebagai berikut: <input type = "tombol" value = "klik saya!"/> <script> function showmessage () {waspada ("klik!");} </script>

catatan:

1) Melalui variabel acara, Anda dapat secara langsung mengakses acara itu sendiri. Misalnya, OnClick = "Alert (Event.Type)" akan memunculkan acara klik.

2) Nilai ini sama dengan elemen target dari peristiwa tersebut, di mana elemen target adalah input. Misalnya, OnClick = "Alert (This.Value)" bisa mendapatkan nilai nilai elemen input.

2. Penangan Acara Level DOM0

Metode ini sederhana dan silang-browser, tetapi hanya dapat menambahkan event handler ke satu elemen.

Karena metode ini menambahkan beberapa penangan acara ke elemen, berikut ini akan mengesampingkan yang sebelumnya.

Tambahkan Event Handler:

 <input type = "tombol" value = "Klik saya!" OnClick = "showmessage ()"/> <script> function showMessage () {waspada ("diklik!");} </script>

Hapus pawang acara:

Salinan kode adalah sebagai berikut: mybtn.onClick = null;

3. Penangan Acara Level DOM2

Penangan acara tingkat DOM2 dapat menambahkan beberapa penangan acara ke satu elemen. Ini mendefinisikan dua metode untuk menambah dan menghapus penangan acara: AddEventListener () dan RemestEventListener ().

Kedua metode membutuhkan 3 parameter: nama acara, fungsi event handler, dan nilai boolean.

Nilai boolean ini benar, dan acara diproses dalam tahap penangkapan, salah, dan acara diproses dalam tahap gelembung, yang default menjadi false.

Tambahkan Event Handler: Sekarang tambahkan dua penangan acara untuk tombol, satu muncul "Hello" dan yang lainnya muncul "dunia".

 <input id = "mybtn" type = "tombol" value = "klik saya!"/> <script> var mybtn = document.geteLementById ("mybtn"); mybtn.addeventListener ("klik", function () {alert ("hello");}, false); mybtn.addeventListener ("klik", function () {alert ("world");}, false); </script>

Hapus Event Handler: Event Handler yang ditambahkan melalui AddEventListener harus dihapus melalui RemestEventListener, dan parameternya konsisten.

Catatan: Fungsi anonim yang ditambahkan melalui AddEventListener tidak akan dihapus. Kode berikut tidak akan berfungsi!

Salinan kode adalah sebagai berikut: mybtn.removeEventListener ("klik", function () {alert ("world");}, false);

Tampaknya RemestEventListener konsisten dengan parameter AddEventListener di atas, tetapi pada kenyataannya, fungsi anonim dalam parameter kedua sama sekali berbeda.

Jadi untuk menghapus event handler, kode dapat ditulis seperti ini:

 <input id = "mybtn" type = "tombol" value = "klik saya!"/> <script> var mybtn = document.geteLementById ("mybtn"); var handler = function () {alert ("hello"); } mybtn.addeventListener ("klik", handler, false); mybtn.removeeventlistener ("klik", pawang, false); </script>

2. IE Event Handler

1. Skenario Aplikasi Praktis

IE8 dan di bawah browser tidak mendukung AddEventListener. Jika Anda ingin kompatibel dengan IE8 dan di bawah browser dalam pengembangan aktual. Jika Anda menggunakan acara pengikatan asli dan perlu diproses kompatibel, Anda dapat menggunakan jQuery Bind sebagai gantinya.

2. IE8 Event Binding

IE8 dan browser berikut mengimplementasikan dua metode serupa seperti di DOM: attachEvent () dan detachevent ().

Kedua metode memerlukan dua parameter: nama penangan acara dan fungsi event handler.

catatan:

IE11 hanya mendukung AddEventListener!

IE9 dan IE10 Dukungan AttachEvent dan AddEventListener!

TE8 dan di bawahnya hanya mendukung lampiran!

Anda dapat menggunakan kode berikut untuk mengujinya di berbagai browser versi IE.

 <input id = "mybtn" type = "tombol" value = "klik saya!"/> <script> var mybtn = document.geteLementById ("mybtn"); var handlerie = function () {alert ("helloie"); } var handlerdom = function () {alert ("helloDom"); } mybtn.addeventListener ("klik", handlerdom, false); mybtn.attachevent ("onClick", handlerie); </script>

Tambahkan Event Handler: Sekarang tambahkan dua penangan acara untuk tombol, satu muncul "halo" dan yang lainnya muncul "dunia"

 <script> var mybtn = document.getElementById ("mybtn"); mybtn.attachevent ("ontClick", function () {alert ("hello");}); mybtn.attachevent ("ontClick", function () {alert ("world");}); </script>

Catatan: Efek operasi di sini patut dicatat:

"Dunia" muncul lebih dulu di browser di bawah IE8, dan kemudian "Hello". Urutan peristiwa yang memicu di DOM berlawanan.

IE9 dan di atas browser pertama muncul "halo" dan kemudian muncul "dunia". Urutan yang sama dengan peristiwa yang memicu di DOM.

Dapat dilihat bahwa IE Browser secara bertahap berada di jalur yang benar. . .

Delete Event Handler: Event Handler yang ditambahkan melalui AttachEvent harus dihapus melalui metode detachevent, dan parameternya konsisten.

Seperti acara DOM, fungsi anonim yang ditambahkan tidak akan dihapus.

Jadi untuk menghapus event handler, kode dapat ditulis seperti ini:

 <input id = "mybtn" type = "tombol" value = "klik saya!"/> <script> var mybtn = document.geteLementById ("mybtn"); var handler = function () {alert ("hello"); } mybtn.attachevent ("onClick", handler); mybtn.detachevent ("onClick", handler); </script>

CATATAN : Ada tempat lain untuk memperhatikan di IE Event Handler: SCOPE.

Menggunakan metode attachEvent (), event handler berjalan dalam ruang lingkup global, jadi ini sama dengan jendela.

Lingkup metode pada level DOM2 atau DOM0 berada di dalam elemen, dan nilai ini adalah elemen target.

Contoh berikut akan muncul benar.

 <input id = "mybtn" type = "tombol" value = "klik saya!"/> <script> var mybtn = document.geteLementById ("mybtn"); mybtn.attachevent ("ontClick", function () {alert (this === jendela);}); </script>

Ini adalah sesuatu yang perlu diingat saat menulis kode lintas-browser.

Deteksi IE7/8:

 // Hakim IE7/8 Deteksi Kompatibilitas Var ISIE = !! Window.ActivexObject; var isie6 = isie &&! window.xmlHttpRequest; var isie8 = isie && !! document.documentmode; var isie7 = isie &&! iSie6 &&! iSie8; if (isie8 || iSie7) {li.attachevent ("ontClick", function () {_marker.openinfowindow (_iw);})} else {li.addeventListener ("klik", fungsi () {_marker.openinfowindow (_ii);

Di atas adalah pengetahuan yang relevan dari ringkasan pembelajaran acara JavaScript (ii) dari pawang acara JS yang diperkenalkan oleh editor kepada Anda. Saya harap ini akan membantu semua orang!