jQuery - Penanganan Acara

Kami memiliki kemampuan untuk membuat halaman web dinamis dengan menggunakan peristiwa. Peristiwa adalah tindakan yang dapat dideteksi oleh Aplikasi Web Anda.

Berikut adalah contoh acara -

  • Sebuah klik mouse
  • Sebuah halaman web sedang memuat
  • Mengarahkan mouse ke sebuah elemen
  • Mengirimkan formulir HTML
  • Penekanan tombol pada keyboard Anda, dll.

Saat peristiwa ini dipicu, Anda kemudian dapat menggunakan fungsi kustom untuk melakukan apa pun yang Anda inginkan dengan acara tersebut. Fungsi khusus ini memanggil Penangan Peristiwa.

Binding Event Handler

Dengan menggunakan Model Peristiwa jQuery, kita dapat membuat penangan peristiwa pada elemen DOM dengan bind() metode sebagai berikut -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $('div').bind('click', function( event ){
               alert('Hi there!');
            });
         });
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on any square below to see the result:</p>
		
      <div class = "div" style = "background-color:blue;">ONE</div>
      <div class = "div" style = "background-color:green;">TWO</div>
      <div class = "div" style = "background-color:red;">THREE</div>
   </body>
</html>

Kode ini akan menyebabkan elemen pembagian merespons ke acara klik; ketika pengguna mengklik di dalam divisi ini setelahnya, peringatan akan ditampilkan.

Ini akan menghasilkan hasil sebagai berikut -

Sintaks lengkap dari perintah bind () adalah sebagai berikut -

selector.bind( eventType[, eventData], handler)

Berikut adalah deskripsi parameter -

  • eventType- String yang berisi jenis peristiwa JavaScript, seperti klik atau kirim. Lihat bagian berikutnya untuk daftar lengkap jenis acara.

  • eventData - Parameter opsional berupa peta data yang akan diteruskan ke event handler.

  • handler - Sebuah fungsi untuk dieksekusi setiap kali event tersebut dipicu.

Menghapus Penangan Acara

Biasanya, setelah pengendali kejadian dibuat, itu tetap berlaku selama sisa umur halaman. Mungkin ada kebutuhan saat Anda ingin menghapus pengendali kejadian.

jQuery menyediakan unbind()perintah untuk menghapus penangan kejadian yang keluar. Sintaks unbind () adalah sebagai berikut -

selector.unbind(eventType, handler)

or 

selector.unbind(eventType)

Berikut adalah deskripsi parameter -

  • eventType- String yang berisi jenis peristiwa JavaScript, seperti klik atau kirim. Lihat bagian berikutnya untuk daftar lengkap jenis acara.

  • handler - Jika disediakan, mengidentifikasi pendengar tertentu yang akan dihapus.

Jenis Acara

Sr.No. Jenis & Deskripsi Acara
1

blur

Terjadi saat elemen kehilangan fokus.
2

change

Terjadi saat elemen berubah.
3

click

Terjadi saat mouse mengklik.
4

dblclick

Terjadi saat mouse mengklik dua kali.
5

error

Terjadi jika ada kesalahan dalam bongkar muat dll.
6

focus

Terjadi saat elemen mendapatkan fokus.
7

keydown

Terjadi saat tombol ditekan.
8

keypress

Terjadi saat tombol ditekan dan dilepaskan.
9

keyup

Terjadi saat kunci dilepaskan.
10

load

Terjadi saat dokumen dimuat.
11

mousedown

Terjadi saat tombol mouse ditekan.
12

mouseenter

Terjadi saat mouse masuk ke dalam wilayah elemen.
13

mouseleave

Terjadi saat mouse meninggalkan wilayah elemen.
14

mousemove

Terjadi saat penunjuk mouse bergerak.
15

mouseout

Terjadi saat penunjuk mouse bergerak keluar dari sebuah elemen.
16

mouseover

Terjadi saat penunjuk mouse bergerak di atas elemen.
17

mouseup

Terjadi saat tombol mouse dilepaskan.
18

resize

Terjadi saat jendela diubah ukurannya.
19

scroll

Terjadi saat jendela di-scroll.
20

select

Terjadi saat teks dipilih.
21

submit

Terjadi saat formulir dikirimkan.
22

unload

Terjadi saat dokumen dibongkar.

Objek Acara

Fungsi callback mengambil satu parameter; ketika handler dipanggil, objek acara JavaScript akan dilewati.

Objek acara sering kali tidak diperlukan dan parameter dihilangkan, karena konteks yang memadai biasanya tersedia saat penangan terikat untuk mengetahui dengan tepat apa yang perlu dilakukan saat penangan dipicu, namun ada atribut tertentu yang Anda perlukan untuk diakses.

Atribut Peristiwa

Sr.No. Deskripsi properti
1

altKey

Setel ke benar jika tombol Alt ditekan saat kejadian dipicu, salah jika tidak. Tombol Alt diberi label Option di sebagian besar keyboard Mac.
2

ctrlKey

Setel ke benar jika tombol Ctrl ditekan saat acara dipicu, salah jika tidak.
3

data

Nilai, jika ada, diteruskan sebagai parameter kedua ke perintah bind () saat penangan dibuat.
4

keyCode

Untuk acara keyup dan keydown, ini mengembalikan tombol yang telah ditekan.
5

metaKey

Setel ke benar jika tombol Meta ditekan saat kejadian dipicu, salah jika tidak. Tombol Meta adalah tombol Ctrl di PC dan tombol Command di Mac.
6

pageX

Untuk acara mouse, tentukan koordinat horizontal acara relatif dari halaman asal.
7

pageY

Untuk acara mouse, tentukan koordinat vertikal acara relatif dari halaman asal.
8

relatedTarget

Untuk beberapa peristiwa mouse, mengidentifikasi elemen yang ditinggalkan atau dimasuki kursor saat peristiwa itu dipicu.
9

screenX

Untuk acara mouse, tentukan koordinat horizontal acara relatif dari asal layar.
10

screenY

Untuk acara mouse, tentukan koordinat vertikal acara relatif dari asal layar.
11

shiftKey

Setel ke benar jika tombol Shift ditekan saat acara dipicu, salah jika tidak.
12

target

Mengidentifikasi elemen yang memicu peristiwa.
13

timeStamp

Stempel waktu (dalam milidetik) saat acara dibuat.
14

type

Untuk semua peristiwa, tentukan jenis peristiwa yang dipicu (misalnya, klik).
15

which

Untuk peristiwa keyboard, tentukan kode numerik untuk tombol yang menyebabkan peristiwa, dan untuk peristiwa mouse, tentukan tombol mana yang ditekan (1 untuk kiri, 2 untuk tengah, 3 untuk kanan).

 
<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $('div').bind('click', function( event ){
               alert('Event type is ' + event.type);
               alert('pageX : ' + event.pageX);
               alert('pageY : ' + event.pageY);
               alert('Target : ' + event.target.innerHTML);
            });
         });
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on any square below to see the result:</p>
		
      <div class = "div" style = "background-color:blue;">ONE</div>
      <div class = "div" style = "background-color:green;">TWO</div>
      <div class = "div" style = "background-color:red;">THREE</div>
   </body>
</html>

Ini akan menghasilkan hasil sebagai berikut -

Metode Acara

Ada daftar metode yang dapat dipanggil di Objek Acara -

Sr.No. Metode & Deskripsi
1 preventDefault ()

Mencegah browser menjalankan tindakan default.
2 isDefaultPrevented ()

Mengembalikan apakah event.preventDefault () pernah dipanggil pada objek acara ini.
3 stopPropagation ()

Menghentikan gelembung acara ke elemen induk, mencegah penangan induk untuk diberi tahu tentang acara tersebut.
4 isPropagationStopped ()

Mengembalikan apakah event.stopPropagation () pernah dipanggil di objek acara ini.
5 stopImmediatePropagation ()

Menghentikan sisa penangan agar tidak dieksekusi.
6 isImmediatePropagationStopped ()

Mengembalikan apakah event.stopImmediatePropagation () pernah dipanggil di objek acara ini.

Metode Manipulasi Peristiwa

Tabel berikut mencantumkan metode penting terkait acara -

Sr.No. Metode & Deskripsi
1 mengikat (jenis, [data], fn)

Mengikat penangan ke satu atau beberapa kejadian (seperti klik) untuk setiap elemen yang cocok. Bisa juga mengikat acara khusus.
2 nonaktif (peristiwa [, selektor] [, penangan (eventObject)])

Ini kebalikan dari siaran langsung, ini menghapus siaran langsung terikat.
3 hover (over, out)

Mensimulasikan hover, misalnya menggerakkan mouse ke atas dan ke luar objek.
4 aktif (peristiwa [, pemilih] [, data], penangan)

Mengikat penangan ke peristiwa (seperti klik) untuk semua elemen yang cocok saat ini - dan masa depan. Bisa juga mengikat acara khusus.
5 satu (jenis, [data], fn)

Mengikat penangan ke satu atau lebih kejadian yang akan dieksekusi sekali untuk setiap elemen yang cocok.
6 siap (fn)

Mengikat fungsi yang akan dijalankan setiap kali DOM siap untuk dilintasi dan dimanipulasi.
7 pemicu (peristiwa, [data])

Memicu acara di setiap elemen yang cocok.
8 triggerHandler (peristiwa, [data])

Memicu semua penangan kejadian terikat pada sebuah elemen.
9 lepaskan ([tipe], [fn])

Ini melakukan kebalikan dari bind, ini menghapus event terikat dari masing-masing elemen yang cocok.

Metode Pembantu Acara

jQuery juga menyediakan satu set fungsi pembantu peristiwa yang dapat digunakan baik untuk memicu peristiwa untuk mengikat semua jenis peristiwa yang disebutkan di atas.

Metode Pemicu

Berikut adalah contoh yang akan memicu peristiwa blur di semua paragraf -

$("p").blur();

Metode Pengikatan

Berikut adalah contoh yang akan mengikat a click acara di semua <div> -

$("div").click( function () { 
   // do something here
});
Sr.No. Metode & Deskripsi
1

blur( )

Memicu peristiwa buram dari setiap elemen yang cocok.
2

blur( fn )

Ikat fungsi ke acara buram dari setiap elemen yang cocok.
3

change( )

Memicu peristiwa perubahan setiap elemen yang cocok.
4

change( fn )

Mengikat fungsi ke acara perubahan setiap elemen yang cocok.
5

click( )

Memicu peristiwa klik dari setiap elemen yang cocok.
6

click( fn )

Mengikat fungsi ke acara klik dari setiap elemen yang cocok.
7

dblclick( )

Memicu peristiwa dblclick dari setiap elemen yang cocok.
8

dblclick( fn )

Mengikat fungsi ke acara dblclick dari setiap elemen yang cocok.
9

error( )

Memicu kejadian kesalahan dari setiap elemen yang cocok.
10

error( fn )

Mengikat fungsi ke acara kesalahan dari setiap elemen yang cocok.
11

focus( )

Memicu acara fokus dari setiap elemen yang cocok.
12

focus( fn )

Mengikat fungsi ke acara fokus dari setiap elemen yang cocok.
13

keydown( )

Memicu peristiwa keydown dari setiap elemen yang cocok.
14

keydown( fn )

Ikat fungsi ke acara keydown dari setiap elemen yang cocok.
15

keypress( )

Memicu peristiwa penekanan tombol dari setiap elemen yang cocok.
16

keypress( fn )

Mengikat fungsi ke acara penekanan tombol dari setiap elemen yang cocok.
17

keyup( )

Memicu peristiwa keyup dari setiap elemen yang cocok.
18

keyup( fn )

Ikat fungsi ke acara keyup dari setiap elemen yang cocok.
19

load( fn )

Mengikat fungsi ke acara pemuatan dari setiap elemen yang cocok.
20

mousedown( fn )

Mengikat fungsi ke acara mousedown dari setiap elemen yang cocok.
21

mouseenter( fn )

Bind sebuah fungsi ke event mouseenter dari setiap elemen yang cocok.
22

mouseleave( fn )

Ikat fungsi ke acara mouseleave dari setiap elemen yang cocok.
23

mousemove( fn )

Ikat fungsi ke acara gerakan mouse dari setiap elemen yang cocok.
24

mouseout( fn )

Bind sebuah fungsi ke event mouseout dari setiap elemen yang cocok.
25

mouseover( fn )

Ikat fungsi ke acara gerakan mouse dari setiap elemen yang cocok.
26

mouseup( fn )

Ikat fungsi ke acara mouseup dari setiap elemen yang cocok.
27

resize( fn )

Ikat fungsi ke acara pengubahan ukuran dari setiap elemen yang cocok.
28

scroll( fn )

Ikat fungsi ke acara gulir dari setiap elemen yang cocok.
29

select( )

Picu acara pemilihan dari setiap elemen yang cocok.
30

select( fn )

Ikat fungsi ke acara pemilihan dari setiap elemen yang cocok.
31

submit( )

Picu acara pengiriman dari setiap elemen yang cocok.
32

submit( fn )

Ikat fungsi ke acara pengiriman setiap elemen yang cocok.
33

unload( fn )

Mengikat fungsi ke acara pembongkaran setiap elemen yang cocok.
ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved