Event adalah sesuatu yang terjadi ketika pengguna berinteraksi dengan halaman web, seperti ketika dia mengklik tautan atau tombol, memasukkan teks ke dalam kotak input atau textarea, membuat pilihan dalam select box, menekan tombol pada keyboard, memindahkan pointer mouse, memasukkan formulir, dll. Dalam beberapa kasus, Browser itu sendiri dapat men-trigger event, seperti memuat halaman dan membongkar event.<\/p>\n\n\n\n
Ketika suatu event terjadi, kalian dapat menggunakan JavaScript event handler (atau bahkan event listener) untuk mendeteksi event tersebut dan melakukan tugas atau serangkaian tugas tertentu. Secara universal, nama-nama untuk event handler selalu dimulai dengan kata \u201con<\/em><\/strong>\u201c, jadi event handler untuk event klik disebut onclick<\/em><\/strong>, sama halnya event handler untuk event load disebut onload<\/em><\/strong>, event handler untuk event blur disebut onblur,<\/em><\/strong> dan seterusnya.<\/p>\n\n\n\n Ada beberapa cara untuk menetapkan event handler. Cara paling sederhana adalah menambahkannya langsung ke tag awal elemen HTML menggunakan atribut khusus event-handler. Misalnya, untuk menetapkan click handler untuk elemen tombol, kita dapat menggunakan atribut onclick<\/em><\/strong>, seperti ini:<\/p>\n\n\n Namun, agar JavaScript tetap terpisah dari HTML, kalian dapat mengatur event handler dalam file JavaScript eksternal atau di dalam tag <script> dan <\/script>, seperti ini:<\/p>\n\n\n Secara umum, event dapat dikategorikan ke dalam empat kelompok utama yaitu mouse events<\/a>, keyboard events<\/a>, form events<\/a> dan document\/window events<\/a>.<\/p>\n\n\n\n Mouse event bekerja ketika pengguna mengklik beberapa elemen, memindahkan pointer mouse ke atas elemen, dll. Berikut ini ada beberapa peristiwa mouse yang paling penting dan event handler mereka.<\/p>\n\n\n\n Click Event terjadi ketika pengguna mengklik elemen di halaman web. Seringkali, ini adalah elemen form dan tautan. Kalian dapat menangani click event dengan onclick<\/em><\/strong> event handler.<\/p>\n\n\n\n Contoh berikut akan menampilkan pesan alert kepada kalian ketika kalian mengklik elemen tersebut.<\/p>\n\n\n Contextmenu event terjadi ketika pengguna mengklik tombol mouse kanan pada suatu elemen untuk membuka menu konteks. Kalian dapat menangani contextmenu event dengan Contoh berikut akan menampilkan pesan peringatan ketika kalian mengklik kanan pada elemen tersebut.<\/p>\n\n\n Mouseover event terjadi ketika pengguna menggerakkan mouse pointer ke suatu elemen.<\/p>\n\n\n\n Kalian dapat menangani event mouseover dengan onmouseover<\/em><\/strong> event handler. Contoh berikut akan menampilkan pesan alert ketika kalian mengarahkan mouse ke suatu elemen.<\/p>\n\n\n Event mouseout terjadi ketika pengguna memindahkan pointer mouse ke luar elemen.<\/p>\n\n\n\n Kalian dapat menangani event mouseout dengan onmouseout<\/em><\/strong> event handler. Contoh berikut akan menampilkan pesan alert ketika event mouseout terjadi.<\/p>\n\n\n Event keyboard akan bekerja ketika pengguna menekan atau melepaskan tombol pada keyboard. Berikut adalah beberapa event keyboard yang paling penting dan event handler mereka.<\/p>\n\n\n\n Event keydown terjadi ketika pengguna menekan tombol pada keyboard.<\/p>\n\n\n\n Kalian dapat menangani event keydown dengan onkeydown<\/em><\/strong> event handler. Contoh berikut akan menampilkan pesan alert ketika event keydown terjadi.<\/p>\n\n\n Event keyup terjadi ketika pengguna melepaskan tombol pada keyboard.<\/p>\n\n\n\n Kalian dapat menangani event keyup dengan onkeyup event handler. Contoh berikut akan menampilkan pesan alert ketika event keyup terjadi.<\/p>\n\n\n Event keypress terjadi ketika pengguna menekan tombol pada keyboard yang memiliki nilai karakter yang terkait dengannya. Misalnya, tombol seperti Ctrl, Shift, Alt, Esc, tombol panah, dll. Tidak akan menghasilkan event keypress, tetapi akan menghasilkan event keydown dan keyup.<\/p>\n\n\n\n Kalian dapat menangani event keypress dengan onkeypress event handler. Contoh berikut akan menampilkan pesan alert kepada kalian ketika event keypress terjadi.<\/p>\n\n\n Event form terjadi ketika form kontrol menerima atau kehilangan fokus atau ketika pengguna mengubah nilai kontrol formulir seperti dengan mengetikkan teks pada input teks, pilih opsi apa pun pada select box dll. Berikut ini beberapa event form paling penting dan event handler mereka.<\/p>\n\n\n\n Event fokus terjadi ketika pengguna memberikan fokus ke suatu elemen di halaman web.<\/p>\n\n\n\n Kalian dapat menangani event focus dengan onfocus<\/em><\/strong> event handler. Contoh berikut akan membuat background input teks menjadi warna kuning ketika menerima fokus.<\/p>\n\n\n Peristiwa blur terjadi ketika pengguna mengambil fokus dari elemen form atau window.<\/p>\n\n\n\n Kalian dapat menangani event blur dengan onblur event handler. Contoh berikut akan menampilkan pesan alert ketika elemen input teks kehilangan fokus-nya.<\/p>\n\n\n Untuk menghilangkan fokus dari elemen form, pertama click di dalamnya, lalu tekan tombol tab pada keyboard, fokuskan kepada sesuatu yang lain, atau klik di luarnya.<\/p>\n\n\n\n Event change terjadi ketika pengguna mengubah nilai elemen form.<\/p>\n\n\n\n Kalian dapat menangani event change dengan onchange event handler. Contoh berikut akan menampilkan pesan alert ketika kalian mengubah opsi di select box.<\/p>\n\n\n Submit event hanya terjadi ketika pengguna mengirimkan formulir di halaman web.<\/p>\n\n\n\n Kalian dapat menangani submit event dengan onsubmit event handler. Contoh berikut akan menampilkan pesan alert kepada kalian saat submit form ke server.<\/p>\n\n\n <\/p>\n","protected":false},"excerpt":{"rendered":" Memahami event dan event handler Event adalah sesuatu yang terjadi ketika pengguna berinteraksi dengan halaman web, seperti ketika dia mengklik tautan atau tombol, memasukkan teks<\/p>\n","protected":false},"author":1,"featured_media":11445,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-11494","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-belajar-web-design"],"yoast_head":"\n\n<button type="button" onclick="alert('Hello World!')">Click Me<\/button>\n<\/pre><\/div>\n\n\n\n<button type="button" id="myBtn">Click Me<\/button>\n<script>\n function sayHello() {\n alert('Hello World!');\n }\n document.getElementById("myBtn").onclick = sayHello;\n<\/script>\n<\/pre><\/div>\n\n\nMouse Event<\/h5>\n\n\n\n
Click Event (Onclick)<\/h5>\n\n\n\n
\n<button type="button" onclick="alert('You have clicked a button!');">Click Me<\/button>\n<a href="#" onclick="alert('You have clicked a link!');">Click Me<\/a>\n<\/pre><\/div>\n\n\nContextmenu Event (oncontextmenu)<\/h5>\n\n\n\n
oncontextmenu<\/em><\/strong><\/code> event handler.<\/p>\n\n\n\n\n<button type="button" oncontextmenu="alert('You have right-clicked a button!');">Right Click on Me<\/button>\n<a href="#" oncontextmenu="alert('You have right-clicked a link!');">Right Click on Me<\/a>\n<\/pre><\/div>\n\n\nEvent Mouseover (onmouseover)<\/h5>\n\n\n\n
\n<button type="button" onmouseover="alert('You have placed mouse pointer over a button!');">Place Mouse Over Me<\/button>\n<a href="#" onmouseover="alert('You have placed mouse pointer over a link!');">Place Mouse Over Me<\/a>\n<\/pre><\/div>\n\n\nEvent Mouseout (onmouseout)<\/h5>\n\n\n\n
\n<button type="button" onmouseout="alert('You have moved out of the button!');">Place Mouse Inside Me and Move Out<\/button>\n<a href="#" onmouseout="alert('You have moved out of the link!');">Place Mouse Inside Me and Move Out<\/a>\n<\/pre><\/div>\n\n\nEvent Keyboard<\/h5>\n\n\n\n
Event Keydown (onkeydown)<\/h5>\n\n\n\n
\n<input type="text" onkeydown="alert('You have pressed a key inside text input!')">\n<textarea onkeydown="alert('You have pressed a key inside textarea!')"><\/textarea>\n<\/pre><\/div>\n\n\nEvent Keyup (onkeyup)<\/h5>\n\n\n\n
\n<input type="text" onkeyup="alert('You have released a key inside text input!')">\n<textarea onkeyup="alert('You have released a key inside textarea!')"><\/textarea>\n<\/pre><\/div>\n\n\nEvent Keypress (onkeypress)<\/h5>\n\n\n\n
\n<input type="text" onkeypress="alert('You have pressed a key inside text input!')">\n<textarea onkeypress="alert('You have pressed a key inside textarea!')"><\/textarea>\n<\/pre><\/div>\n\n\nEvents Form<\/h5>\n\n\n\n
Event Focus (onfocus)<\/h2>\n\n\n\n
\n<script>\n function highlightInput(elm){\n elm.style.background = "yellow";\n } \n<\/script>\n<input type="text" onfocus="highlightInput(this)">\n<button type="button">Button<\/button>\n<\/pre><\/div>\n\n\nEvent Blur (onblur)<\/h5>\n\n\n\n
\n<input type="text" onblur="alert('Text input loses focus!')">\n<button type="button">Submit<\/button>\n<\/pre><\/div>\n\n\nEvent Change (onchange)<\/h5>\n\n\n\n
\n<select onchange="alert('You have changed the selection!');">\n <option>Select<\/option>\n <option>Male<\/option>\n <option>Female<\/option>\n<\/select>\n<\/pre><\/div>\n\n\nEvent Submit (onsubmit)<\/h5>\n\n\n\n
\n<form action="action.php" method="post" onsubmit="alert('Form data will be submitted to the server!');">\n <label>First Name:<\/label>\n <input type="text" name="first-name" required>\n <input type="submit" value="Submit">\n<\/form>\n<\/pre><\/div>\n\n\n