Tutorial jQuery #3 : Event pada jQuery

Tutorial jQuery #3 : Event pada jQuery

HobbyTekno - Pada postingan sebelumnya kita telah belajar mengenai Selector pada jQuery. nah kali ini kita bahas Event pada jQuery. Event adalah sebuah method atau aksi yang dilakukan jQuery. Event merupakan aksi lanjutan setelah menetapkan selector. Sebagai contoh, sebuah tombol yang di klik akan berubah warna saat di click, tombol yang menampilkan teks saat di click, Dropdown, dan lain sebagainya. ada banyak jenis Event pada jQuery yang bisa kita gunakan.

1. .bind()
2. .blur()
3. .change()
4. .click()
5. .contextmenu()
6. .dblclick()
7. .delegate()
8. .die()
9. .unload()
10. .undelegate()
11. .error()
12. .event.currentTarget
13. .event.data
14. .event.delegateTarget
15. .event.isDefaultPrevent
16. .event.isImmediateProgationStopped
17. .event.isPropagationStopped
18. .event.metaKey
19. .event.namespace
dst..

Untuk lebih lengkapnya cek saja di situs jQuery pada bagian API Documentation

Langsung saja kita buat contoh projectnya.

Tutorial jQuery #3 : Event pada jQuery

1. Buat Folder Project2, Pastikan sudah ada file jQuerynya atau terhubung ke file jQuery Online.

2. Buat file HTML baru dengan nama index.html.
<!DOCTYPE html>
<html lang="en">
<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script src="script.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Belajar jQuery #3 - HobbyTekno</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>
3. Buat file baru dengan nama script.js

4. Selanjutnya kita buat sebuah Button dengan id Click, ketik didalam file script.js
<button id="click">Event Click</button>
5. Lalu pada script.js kita masukkan tag awal jQuery, lalu kita buat Action ketika button ini di click, akan menampilkan Alert Javascript, kodenya seperti berikut.
$(document).ready(function () {
    $('#click').click(function () {
        alert('Saya sedang belajar jQuery di HobbyTekno');
    });
})
Hasilnya akan jadi seperti berikut :

Tutorial jQuery #3 : Event pada jQuery

Sekian Tutorial jQuery #3 : Event pada jQuery, semoga postingan Admin kali ini bermanfaat untuk anda. Jika ada kendala tanyakan saja pada komentar

No comments for "Tutorial jQuery #3 : Event pada jQuery"