Prototipe - Penanganan Acara

Manajemen acara adalah salah satu tantangan terbesar untuk mencapai pembuatan skrip lintas browser. Setiap browser memiliki pendekatan berbeda untuk menangani penekanan tombol.

Prototipe Framework menangani semua masalah kompatibilitas lintas browser dan membuat Anda bebas dari semua masalah yang terkait dengan manajemen acara.

Kerangka kerja Prototipe menyediakan ruang nama Peristiwa , yang penuh dengan metode, yang semuanya mengambil objek peristiwa saat ini sebagai argumen, dan dengan senang hati menghasilkan informasi yang Anda minta, di semua browser utama.

Ruang nama acara juga menyediakan daftar standar kode kunci yang dapat Anda gunakan dengan acara terkait keyboard. Konstanta berikut ditentukan di namespace -

S.No. Konstanta & Deskripsi Kunci
1.

KEY_BACKSPACE

Mewakili kunci spasi belakang.

2.

KEY_TAB

Mewakili tombol tab.

3.

KEY_RETURN

Mewakili kunci pengembalian.

4.

KEY_ESC

Mewakili kunci esc.

5.

KEY_LEFT

Mewakili kunci kiri.

6.

KEY_UP

Mewakili kunci.

7.

KEY_RIGHT

Mewakili kunci yang benar.

8.

KEY_DOWN

Mewakili kunci bawah.

9.

KEY_DELETE

Mewakili kunci hapus.

10.

KEY_HOME

Mewakili kunci rumah.

11.

KEY_END

Mewakili kunci putus.

12.

KEY_PAGEUP

Mewakili kunci halaman ke atas.

13.

KEY_PAGEDOWN

Mewakili kunci halaman bawah.

Bagaimana Menangani Acara

Sebelum kita mulai, mari kita lihat contoh penggunaan metode event. Contoh ini menunjukkan cara menangkap elemen DOM tempat peristiwa terjadi.

Contoh

<html>
   <head>
      <title>Prototype examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      
      <script>
         // Register event 'click' and associated call back.
         Event.observe(document, 'click', respondToClick);
  
         // Callback function to handle the event.
         function respondToClick(event) {
            var element = event.element();
            alert("Tag Name : " + element.tagName );
         }
      </script>
   </head>

   <body>
      <p id = "note"> Click on any part to see the result.</p>
      <p id = "para">This is paragraph</p>
      <div id = "division">This is divsion.</div>
   </body>
</html>

Keluaran

Berikut adalah daftar lengkap dari semua metode yang terkait Event. Fungsi yang paling sering Anda gunakan adalah mengamati , elemen , dan berhenti .

Metode Peristiwa Prototipe

NOTE - Pastikan Anda setidaknya memiliki prototype.js versi 1.6.

S.No. Metode & Deskripsi
1. elemen()

Mengembalikan elemen DOM tempat kejadian terjadi.

2. memperpanjang()

Memperluas acara dengan semua metode yang terdapat dalam Event.Methods.

3. findElement ()

Mengembalikan elemen DOM pertama dengan nama tag tertentu, lebih tinggi dari yang mana peristiwa terjadi.

4. isLeftClick ()

Menentukan apakah peristiwa mouse terkait tombol adalah tentang tombol "kiri" (utama, sebenarnya).

5. mengamati()

Mendaftarkan penangan kejadian pada elemen DOM.

6. pointerX ()

Mengembalikan posisi horizontal absolut untuk acara mouse.

7. pointerY ()

Mengembalikan posisi vertikal absolut untuk acara mouse.

8. berhenti()

Menghentikan penyebaran acara dan mencegah tindakan default dipicu pada akhirnya.

9. stopObserving ()

Membatalkan pendaftaran penangan acara.

10. unloadCache ()

Batalkan pendaftaran semua penangan acara yang terdaftar melalui observasi. Kabel otomatis untuk Anda. Tidak tersedia sejak 1.6.