Belajar JQuery : Events Handling

posted in: Tutorial Pemrograman | 0

JQuery memiliki kemampuan untuk membuat web dinamis dengan menggunakan event. Event adalah aksi yang dideteksi oleh aplikasi web.

Berikut adalah contoh event  −

  • Klik Mouse
  • Halaman web dimuat
  • Membawa mouse ke elemen tertentu
  • Mengirimkan form HTML
  • Menekan tombol keyboard

Ketika event ini dipicu, Anda kemudian dapat menggunakan fungsi tertentu (custom) untuk melakukan apa pun yang Anda inginkan. Misalnya, fungsi kustom ini memanggil Event Handler.

Binding event handlers

Menggunakan jQuery Event Model, kita dapat menggunakan event handlers pada elemen DOM dengan method bind() seperti contoh berikut −


<html>

<head>
<title>Contoh JQuery</title>
<script type = "text/javascript"
src = "http://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 division me-respon terhadap even click.

Syntax lengkap perintah bind() adalah sebagai berikut −

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

Berikut adalah penjelasan dari parameter  −

  • eventType – String yang mengandung JavaScript event type, seperti click atau submit.
  • eventData – Ini adalah parameter optional, yaitu peta data yang akan dilewatkan ke event hanlder.
  • handler – Fungsi yang dieksekusi pada saat event di picu.

Removing event handlers

Biasanya, setelah event hander dibuat, ia akan tetap ada aktif terus, sampai akhir hidup dari page tersebut. Tapi ada kalanya dibutuhkan dimana event handler harus dihapus dengan kondisi tertentu/event tertentu.

jQuery menyediakan method unbind() untuk menghilangkan event handler yang telah ada. Syntaks unbind() adalah sebagai berkut  −

selector.unbind(eventType, handler)

or

selector.unbind(eventType)

Following is the description of the parameters −

  • eventType – String yang mengandung JavaScript event type, seperti click atau submit.
  • handler – Jika ditambahkan, mengidentifikasi listener tertentu yang ingin dihilangkan.

Contoh


<html>

<head>
<title>Contoh JQuery</title>
<script type = "text/javascript"
src = "http://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>

The Event Methods

There is a list of methods which can be called on an Event Object −

S.N. Method & Description
1 preventDefault()

Prevents the browser from executing the default action.

2 isDefaultPrevented()

Returns whether event.preventDefault() was ever called on this event object.

3 stopPropagation()

Stops the bubbling of an event to parent elements, preventing any parent handlers from being notified of the event.

4 isPropagationStopped()

Returns whether event.stopPropagation() was ever called on this event object.

5 stopImmediatePropagation()

Stops the rest of the handlers from being executed.

6  isImmediatePropagationStopped()
Returns whether event.stopImmediatePropagation() was ever called on this event object.

Event Manipulation Methods

Berikut adalah tabel daftar method terkait event yang penting −

S.N. Method & Description
1 bind( type, [data], fn )

Binds handler pada satu atau lebih event (seperti click) untuk setiap elemen yang cocok.

2 off( events [, selector ] [, handler(eventObject) ] )

Kebalikan dari method live, ia akan menghilangkan bound ke event yang ada.

3 hover( over, out )

Mensimulasi hovering seperti memindahkan mouse on-off dari obyek.

4 on( events [, selector ] [, data ], handler )

Binds handler pada event (seperti click) untuk seluruh event, baik yang sekarang telah ada maupun yang akan dating (dinamis).

5 one( type, [data], fn )

Binds handler pada satu atau lebih event untuk dieksekusi satu kali pada setiap elemen yang cocok.

6 ready( fn )

Binds sebuah fungsi untuk dieksekusi jika DOM telah siap untuk dimanipulasi atau di-traversed.

7 trigger( event, [data] )

Memicu event untuk setiap elemen yang cocok.

8 triggerHandler( event, [data] )

Memicu seluruh event handler yang bound pada sebuah elemen.

9 unbind( [type], [fn] )

Method ini adalah kebalikan dari bind, ia akan menghilangkan bound event pada setiap elemen yang cocok.

Leave a Reply