Ikhtisar: In this article we will discuss about the browser events in JavaScript. Java peristiwa naskah yang sangat penting karena mereka melakukan sebagian besar tugas. Titik penting lainnya adalah kompatibilitas browser. Sebagai java script tertanam dalam file html, eksekusi java script tergantung browser yang. Java script juga cukup matang untuk menangani peristiwa browser.
Pengantar:
Sebuah peristiwa browser sinyal dari browser ke aplikasi dalam kasus suatu tindakan dilakukan. Peristiwa ini dari jenis berikut
- DOM Acara: Ini diprakarsai oleh elemen DOM mis. acara klik dipicu ketika unsur diklik atau mouse event dipicu ketika pointer mouse melayang pada sebuah elemen. Peristiwa ini menghubungkan kode java script dengan dokumen.
- jendela Acara: Ini dimulai ketika jendela browser adalah ukurannya.
Apa peristiwa?
Sebuah acara dapat didefinisikan sebagai suatu tindakan / kerja yang mengirim sinyal ke java script. Sekarang java script mengeksekusi dalam menanggapi beberapa acara. Tapi acara harus terdaftar untuk mengirim sinyal ke komponen java script masing. Berikut ini adalah beberapa peristiwa.
peristiwa jendela: Peristiwa ini dimulai ketika jendela browser diubah ukurannya.
peristiwa DOM: Ini dimulai ketika elemen DOM melakukan beberapa tindakan.
acara lainnya: Peristiwa ini mempertimbangkan semua jenis lain dari peristiwa selain di atas dua.
event handler: Kita perlu memahami bahwa ada perbedaan besar antara java dan java script. Dalam java, multi-threading mungkin tapi peristiwa java script yang single threaded. Jadi event handler dijalankan secara berurutan. Untuk memperjelas itu, mari kita asumsikan satu pengguna telah dilakukan dua peristiwa, mouseover dan kemudian mousemove. Jadi acara mouseover akan dieksekusi pertama. Setelah acara pertama selesai, acara mousemove akan dijalankan.
Jika script harus melakukan tindakan terhadap suatu peristiwa, itu harus memiliki fungsi yang terkait untuk itu. Fungsi ini disebut sebagai event handler. Biasanya fungsi ini diberi nama dalam format - pada EVENT_NAME mis. onclick dll. penangan event di java script yang single threaded dan dieksekusi secara berurutan. Oleh karena itu jika dua peristiwa terjadi pada saat yang sama, penangan mereka akan dieksekusi satu demi lainnya. Ada banyak cara di mana event handler ditugaskan. These are.
Menggunakan tag HTML: Event handler dapat dikaitkan langsung ke markup menggunakan atribut on-acara.
Listing 1: Event handler using html tag
[Code]
<input id = “b1” value = “Klik Saya” onclick = “waspada('Terima kasih! Saya diklik. ‘); ” type = “tombol” />
[/Code]
Ketika kode ini dijalankan, kita melihat tombol dengan label – 'Klik Saya'. Jika pengguna menekan tombol ini jendela peringatan dengan pesan – Thanks! Saya diklik. Kami juga dapat memanggil fungsi untuk penanganan event. Perhatikan kode berikut
Listing 2: event handler menggunakan fungsi
[Code]
| <!DOCTYPE HTML> | |||||||||||||||
| <html> | |||||||||||||||
| <kepala> | |||||||||||||||
| <script type =”text / javascript”> | |||||||||||||||
| function count_rabbits() { | |||||||||||||||
| untuk(var i = 1; i <= 3; i ) { | |||||||||||||||
| waspada( “kelinci “+i ” dari topi!” ) | |||||||||||||||
| } | |||||||||||||||
| } | |||||||||||||||
| </naskah> | |||||||||||||||
| </kepala> | |||||||||||||||
| <tubuh> | |||||||||||||||
| <input type = “tombol” onclick = “count_rabbits()” value = “menghitung kelinci!”/> | |||||||||||||||
| </tubuh> | |||||||||||||||
| </html>[/Code]Pendekatan lain untuk mengikat acara ini menggunakan this.innerHTML mana ini mengacu pada elemen saat. Kode berikut menggambarkan iniListing 3: event handler menggunakan this.innerHTML
[Code] <tombol onclick = “waspada ( this.innerHTML )”> Klik saya untuk melihat saya </tombol> [/Code] Menggunakan DOM Obyek Properti: Berikut tugas dibuat menggunakan properti – OnEvent. Dalam hal ini kita perlu mendapatkan elemen pertama dan kemudian menetapkan handler kepada OnEvent properti. The following code is an example of setting a click handler to the element with id ‘myId’ Listing 4: event handler menggunakan DOM Obyek Properti [Code] <input id = “myId” type = “tombol” value = “tekan me”/> <naskah> document.getElementById( ‘ myId ‘ ).onclick = function() { waspada('Terima kasih') } </naskah> [/Code] Berikut dua hal berikut harus diperhatikan untuk menggunakan ini – · It is a property, bukan merupakan atribut dan namanya adalah OnEvent yang adalah kasus sensitif dan harus dalam huruf kecil. · The handler should be a function not a String. Ketika browser menemukan atribut OnEvent di markup HTML, menciptakan fungsi menggunakan isinya dan memberikan ke properti. Jadi dua kode berikut melakukan hal yang sama Listing 5: event handler hanya menggunakan HTML [Code] <input type = “tombol” onclick = “waspada( 'Klik!’ )” value = “Tombol”/> [/Code] Listing 6: event handler menggunakan HTML & JS. [Code] <input type = “tombol” id = “tombol” value = “Tombol”/> <naskah> document.getElementById('tombol').onclick = function() { waspada('Klik!’) } </naskah> [/Code] JavaScript menimpa penangan diatur dalam markup. Potongan berikut menggantikan penangan markup dengan yang baru Listing 7: Timpa satu set handler. <input type =”tombol” onclick =”waspada('Sebelum')” value=”tekan me”/> <naskah> document.getElementsByTagName('memasukkan')[0].onclick = function() { waspada('Setelah') } </naskah> [/Code] Menggunakan metode khusus: Dalam aplikasi JavaScript yang kompleks, di mana metode antarmuka yang berbeda menangani metode kustom peristiwa yang umum digunakan untuk menetapkan penangan. Microsoft menyediakan solusi yang hanya bekerja dengan versi IE kurang dari 9 dan juga dengan Opera. Penangan ditugaskan dan terpisah seperti di bawah Listing 8: Melampirkan dan menghapus penangan element.attachEvent( “on” + peristiwa, handler) [/Code] Menghapus Handler – [Code] element.detachEvent( “on” + peristiwa, handler) [/Code] Menggunakan melampirkan acara, kita dapat menetapkan beberapa penangan untuk elemen yang sama. Potongan kode berikut menunjukkan ini Listing 9: Menugaskan beberapa penangan untuk satu elemen. [Code] <input id = “myElement” type = “tombol” value = “tekan me” /> <naskah> var myElement = document.getElementById( “myElement” ) bertindak = function() { waspada( 'Terima kasih!’ ) } yang perdagangan 2. = function() { waspada( 'Terima kasih lagi!’ ) } myElement.attachEvent( “onclick”, handler) myElement.attachEvent( “onclick”, handler2) </naskah> [/Code] Melampirkan peristiwa tidak lulus parameter 'ini'. Sesuai standar W3C penangan tugas berikut bekerja di hampir semua browser yang digunakan saat ini. Melampirkan Handler Listing 10: Melampirkan dan menghapus penangan sesuai W3C element.addEventListener ( peristiwa, handler, tahap ) [/Code] elemen. removeEventListener ( peristiwa, handler, tahap ) [/Code]
tindakan acara terkait: Kami harus berhati-hati dari empat tindakan berikut saat menangani tindakan acara terkait · Mendaftarkan event handler: Hal ini dapat dilakukan dengan menetapkan elemen properti OnEvent mis. onclick atau onkeypress dll. Ini bekerja dengan seluruh browser namun memiliki keterbatasan yang kita dapat melampirkan satu event handler untuk elemen. Peristiwa terlampir dapat dihapus dengan cara yang sama menggunakan detachEvent atau removeEventListener. · Dapatkan objek acara: Sebagian dari browser lulus objek acara sebagai argumen untuk pawang. Tiga event yang dihasilkan ketika pengguna mengklik mouse-nya. o mousedown: menunjukkan bahwa mouse ditekan. o mouseup: menunjukkan bahwa mouse dilepaskan. o Klik: menunjukkan bahwa mouse diklik. Jika hal ini terjadi berturut-turut, ini menunjukkan bahwa klik ganda telah terjadi. · Extract information from the object – Langkah ketiga adalah informasi yang berkaitan ekstrak tindakan dari objek dan melakukan tindakan. · Inform about the completion of the event – Ini adalah langkah terakhir. Setelah acara ini dilelang berhasil selesainya acara ditandai. Summary: Untuk menyimpulkan diskusi kita dapat menjaga hal berikut dalam pikiran · Used to initiate an action which should be performed as per the customers need. · Events are of two types – DOM events and Window events. · Event handlers are functions associated to events. · Event handlers are assigned in the following way o Using HTML tag o Using DOM object property o Using special methods |
||||
READ MORE JAVA SCRIPT ARTICLES
Pola Java Script Desain
CSS3 & JavaScript
Java Script and CSS3 properties
