Apa metode dari elemen html yang dapat digunakan untuk menambahkan event handler?

Question

Click the button to remove the DIV's event handler.

Table of Contents Show

Apa itu Event?
Cara Handle Event di Javascript
Cara Pertama: Menggunakan Atribut
Cara Kedua: Method addEventListener()
Latihan: Handle Event di Javascript
1. Event Klik
2. Event Mouse
3. Event Keyboard
4. Event Change
5. Event pada Form
Membuat Custom Event
Apa Selanjutnya?
Apa fungsi dari add event listener?
Event apa yang terjadi ketika pengguna mengklik pada sebuah elemen HTML?
Apa yang dimaksud dengan event OnClick?
Apa yang dimaksud dengan event Website pada javascript?

Pada paradigma permrograman event-driven, kita dituntut untuk membuat alur program berdasarkan event yang sedang terjadi di program.

Javascript sendiri mendukung pemrograman event-driven, karena itulah ada fitur Event pada Javascript.

Nah, pada tutorial ini, kita akan memperlajari tentang Event di Javascript.

Seperti:

Apa itu Event?

Gimana cara membuat event?

dan gimana cara membuat custom event?

Mari kita mulai!

Apa itu Event?

Event secara bahasa artinya kejadian..

Pada Javascript:

Event adalah kejadian yang terjadi di halaman web.

Kejadian yang dimaksud di sini seperti aktivitas yang dikerjakan pada halaman web.

Misalnya seperti:

User melakukan scroll;
User melakukan klik pada elemen tertentu;
Halaman web di-load;
Form di-submit;
dan sebagainya.

Kita bisa melakukan aksi tertentu untuk merespon event tersebut.

Misalnya:

Saat elemen

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Event Klik</title>
</head>
<body>
  <button onclick="hello()">Hello</button>
  <button id="hello-petanikode">Hello Petani Kode</button>

  <script>
    function hello(){
      alert("Hello World");
    }

    const btnLogin = document.getElementById("hello-petanikode");
    btnLogin.addEventListener("click", function(){
      alert("Hello Petani Kode");
    });
  </script>
</body>
</html>

1 diklik, kita bisa jalankan fungsi untuk melakukan sesuatu.

Kasi contoh donk?

Oke, mari kita bahas!

Cara Handle Event di Javascript

Ada dua cara yang biasanya dilakukan untuk handle event di Javascript.

Cara Pertama: Menggunakan Atribut

HTML memiliki atribut event untuk menentukan fungsi yang akan dijalankan saat event terjadi.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Event Klik</title>
</head>
<body>
  <button onclick="hello()">Hello</button>
  <button id="hello-petanikode">Hello Petani Kode</button>

  <script>
    function hello(){
      alert("Hello World");
    }

    const btnLogin = document.getElementById("hello-petanikode");
    btnLogin.addEventListener("click", function(){
      alert("Hello Petani Kode");
    });
  </script>
</body>
</html>

2 adalah atribut HTML untuk menentukan aksi saat event klik pada sebuah elemen. Atribut ini bisa diisi dengan nama fungsi atau ekspresi javascript.

Selain event

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Event Klik</title>
</head>
<body>
  <button onclick="hello()">Hello</button>
  <button id="hello-petanikode">Hello Petani Kode</button>

  <script>
    function hello(){
      alert("Hello World");
    }

    const btnLogin = document.getElementById("hello-petanikode");
    btnLogin.addEventListener("click", function(){
      alert("Hello Petani Kode");
    });
  </script>
</body>
</html>

2 ada juga event lainnya seperti

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Event Klik</title>
</head>
<body>
  <button onclick="hello()">Hello</button>
  <button id="hello-petanikode">Hello Petani Kode</button>

  <script>
    function hello(){
      alert("Hello World");
    }

    const btnLogin = document.getElementById("hello-petanikode");
    btnLogin.addEventListener("click", function(){
      alert("Hello Petani Kode");
    });
  </script>
</body>
</html>

4,

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Event Klik</title>
</head>
<body>
  <button onclick="hello()">Hello</button>
  <button id="hello-petanikode">Hello Petani Kode</button>

  <script>
    function hello(){
      alert("Hello World");
    }

    const btnLogin = document.getElementById("hello-petanikode");
    btnLogin.addEventListener("click", function(){
      alert("Hello Petani Kode");
    });
  </script>
</body>
</html>

5,

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Event Klik</title>
</head>
<body>
  <button onclick="hello()">Hello</button>
  <button id="hello-petanikode">Hello Petani Kode</button>

  <script>
    function hello(){
      alert("Hello World");
    }

    const btnLogin = document.getElementById("hello-petanikode");
    btnLogin.addEventListener("click", function(){
      alert("Hello Petani Kode");
    });
  </script>
</body>
</html>

6,

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Event Klik</title>
</head>
<body>
  <button onclick="hello()">Hello</button>
  <button id="hello-petanikode">Hello Petani Kode</button>

  <script>
    function hello(){
      alert("Hello World");
    }

    const btnLogin = document.getElementById("hello-petanikode");
    btnLogin.addEventListener("click", function(){
      alert("Hello Petani Kode");
    });
  </script>
</body>
</html>

7, dll.

Nama-nama atribut event ini tidak perlu kamu hapal, karena jumlahnya cukup banyak. Kalau lupa tinggal lihat saja referensi yang ada pada MDN Web Docs.

Cara Kedua: Method addEventListener()

Method

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Event Klik</title>
</head>
<body>
  <button onclick="hello()">Hello</button>
  <button id="hello-petanikode">Hello Petani Kode</button>

  <script>
    function hello(){
      alert("Hello World");
    }

    const btnLogin = document.getElementById("hello-petanikode");
    btnLogin.addEventListener("click", function(){
      alert("Hello Petani Kode");
    });
  </script>
</body>
</html>

8 merupakan method yang terdapat pada object DOM. Object ini mewakili sebuah elemen HTML di Javascript.

Jika kamu belum tau apa itu DOM, saya sarankan untuk membaca dulu:

Apa itu DOM di Javascript?

Nah, untuk menghandle sebuah event dengan object DOM. Kita harus memanggil method

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Event Klik</title>
</head>
<body>
  <button onclick="hello()">Hello</button>
  <button id="hello-petanikode">Hello Petani Kode</button>

  <script>
    function hello(){
      alert("Hello World");
    }

    const btnLogin = document.getElementById("hello-petanikode");
    btnLogin.addEventListener("click", function(){
      alert("Hello Petani Kode");
    });
  </script>
</body>
</html>

9.

Perhatikan, penulisan nama event ditulis tanpa menggunakan

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Event Klik</title>
</head>
<body>
  <button id="btn-double">Klik 2x</button>

  <script>
    const btnLogin = document.getElementById("btn-double");
    btnLogin.addEventListener("dblclick", function(){
      alert("Terimakasih, kamu sudah klik 2x");
    });
  </script>
</body>
</html>

0. Jadi, misalnya kita ingin menghandle event klik, maka cukup tulis

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Event Klik</title>
</head>
<body>
  <button id="btn-double">Klik 2x</button>

  <script>
    const btnLogin = document.getElementById("btn-double");
    btnLogin.addEventListener("dblclick", function(){
      alert("Terimakasih, kamu sudah klik 2x");
    });
  </script>
</body>
</html>

1 saja.

// salah ❌
button.addEventListener('onclick', function(e) {
  
});

// benar ✅
button.addEventListener('click', function(e){
  
});

Ouya, parameter

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Event Klik</title>
</head>
<body>
  <button id="btn-double">Klik 2x</button>

  <script>
    const btnLogin = document.getElementById("btn-double");
    btnLogin.addEventListener("dblclick", function(){
      alert("Terimakasih, kamu sudah klik 2x");
    });
  </script>
</body>
</html>

2 pada fungsi adalah parameter yang merupakan object event. Jadi kita bisa mengambil data dari object yang mengirim event dari parameter

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Event Klik</title>
</head>
<body>
  <button id="btn-double">Klik 2x</button>

  <script>
    const btnLogin = document.getElementById("btn-double");
    btnLogin.addEventListener("dblclick", function(){
      alert("Terimakasih, kamu sudah klik 2x");
    });
  </script>
</body>
</html>

2. Pada contoh ini, object pengirimnya adalah

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Event Klik</title>
</head>
<body>
  <button id="btn-double">Klik 2x</button>

  <script>
    const btnLogin = document.getElementById("btn-double");
    btnLogin.addEventListener("dblclick", function(){
      alert("Terimakasih, kamu sudah klik 2x");
    });
  </script>
</body>
</html>

4.

Parameter ini bersifat opsional, boleh kita berikan, boleh juga tidak.

Sampai di sini sudah paham?

Biar makin paham, mari kita coba praktik.

Latihan: Handle Event di Javascript

Kita akan coba beberapa event yang umum dipakai, seperti click, hover, keyup, keydown, change, dll.

Buatlah folder baru dengan nama

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Event Klik</title>
</head>
<body>
  <button id="btn-double">Klik 2x</button>

  <script>
    const btnLogin = document.getElementById("btn-double");
    btnLogin.addEventListener("dblclick", function(){
      alert("Terimakasih, kamu sudah klik 2x");
    });
  </script>
</body>
</html>

5. Folder ini akan kita pakai untuk menyimpan file latihan.

1. Event Klik

Event klik termasuk dalam Mouse Event, karena pemicunya adalah aktivitas klik dari mouse atau tap (jika di HP).

Kita bisa memberikan aksi tertentu saat terjadi klik, misalnya menampilkan dialog

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Event Klik</title>
</head>
<body>
  <button id="btn-double">Klik 2x</button>

  <script>
    const btnLogin = document.getElementById("btn-double");
    btnLogin.addEventListener("dblclick", function(){
      alert("Terimakasih, kamu sudah klik 2x");
    });
  </script>
</body>
</html>

6.

Oh iya, jika kamu belum tahu tentang dialog di Javascript, silahkan baca:

Jenis-jenis Dialog di Javascript yang wajib diketahui

Oke lanjut ke contoh..

Buatlah file baru dengan nama

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Event Klik</title>
</head>
<body>
  <button id="btn-double">Klik 2x</button>

  <script>
    const btnLogin = document.getElementById("btn-double");
    btnLogin.addEventListener("dblclick", function(){
      alert("Terimakasih, kamu sudah klik 2x");
    });
  </script>
</body>
</html>

7, kemudian isi dengan kode berikut:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Event Klik</title>
</head>
<body>
  <button onclick="hello()">Hello</button>
  <button id="hello-petanikode">Hello Petani Kode</button>

  <script>
    function hello(){
      alert("Hello World");
    }

    const btnLogin = document.getElementById("hello-petanikode");
    btnLogin.addEventListener("click", function(){
      alert("Hello Petani Kode");
    });
  </script>
</body>
</html>

Hasilnya:

Selain event

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Event Klik</title>
</head>
<body>
  <button id="btn-double">Klik 2x</button>

  <script>
    const btnLogin = document.getElementById("btn-double");
    btnLogin.addEventListener("dblclick", function(){
      alert("Terimakasih, kamu sudah klik 2x");
    });
  </script>
</body>
</html>

1 ada juga event

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Event Klik</title>
</head>
<body>
  <button id="btn-double">Klik 2x</button>

  <script>
    const btnLogin = document.getElementById("btn-double");
    btnLogin.addEventListener("dblclick", function(){
      alert("Terimakasih, kamu sudah klik 2x");
    });
  </script>
</body>
</html>

9 untuk double klik.

Mari kita coba!

Buatlah file baru dengan nama

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Event Mouse</title>
</head>
<body>
  <button id="btn-enter">Mouse Enter</button>
  <button id="btn-hover">Hover</button>
  <button id="btn-out">Mouse Out</button>

  <script>
    const btnEnter = document.getElementById("btn-enter");
    const btnHover = document.getElementById("btn-hover");
    const btnOut = document.getElementById("btn-out");

    btnEnter.addEventListener("mouseenter", function(event) {
      event.target.innerText = "Mouse sudah masuk";
    });

    btnOut.addEventListener("mouseout", function(event) {
      event.target.innerText = "Mouse sudah keluar";
    });

    btnHover.addEventListener("mouseover", function(event){
      event.target.innerText = "Mouse sudah di atas elemen";
    });
  </script>
</body>
</html>

0, kemudian isi dengan kode ini:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Event Klik</title>
</head>
<body>
  <button id="btn-double">Klik 2x</button>

  <script>
    const btnLogin = document.getElementById("btn-double");
    btnLogin.addEventListener("dblclick", function(){
      alert("Terimakasih, kamu sudah klik 2x");
    });
  </script>
</body>
</html>

Hasilnya:

Saat kita klik satu kali, event tidak akan terjadi. Tapi saat kita melakukan double klik, maka event terjadi dan fungsi pun dijalankan.

2. Event Mouse

Selain diklik, berikut ini event yang bisa terjadi karena mouse:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Event Mouse</title>
</head>
<body>
  <button id="btn-enter">Mouse Enter</button>
  <button id="btn-hover">Hover</button>
  <button id="btn-out">Mouse Out</button>

  <script>
    const btnEnter = document.getElementById("btn-enter");
    const btnHover = document.getElementById("btn-hover");
    const btnOut = document.getElementById("btn-out");

    btnEnter.addEventListener("mouseenter", function(event) {
      event.target.innerText = "Mouse sudah masuk";
    });

    btnOut.addEventListener("mouseout", function(event) {
      event.target.innerText = "Mouse sudah keluar";
    });

    btnHover.addEventListener("mouseover", function(event){
      event.target.innerText = "Mouse sudah di atas elemen";
    });
  </script>
</body>
</html>

1 (hover) saat pointer berada di atas element;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Event Mouse</title>
</head>
<body>
  <button id="btn-enter">Mouse Enter</button>
  <button id="btn-hover">Hover</button>
  <button id="btn-out">Mouse Out</button>

  <script>
    const btnEnter = document.getElementById("btn-enter");
    const btnHover = document.getElementById("btn-hover");
    const btnOut = document.getElementById("btn-out");

    btnEnter.addEventListener("mouseenter", function(event) {
      event.target.innerText = "Mouse sudah masuk";
    });

    btnOut.addEventListener("mouseout", function(event) {
      event.target.innerText = "Mouse sudah keluar";
    });

    btnHover.addEventListener("mouseover", function(event){
      event.target.innerText = "Mouse sudah di atas elemen";
    });
  </script>
</body>
</html>

2 saat pointer mendekat pada elemen;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Event Mouse</title>
</head>
<body>
  <button id="btn-enter">Mouse Enter</button>
  <button id="btn-hover">Hover</button>
  <button id="btn-out">Mouse Out</button>

  <script>
    const btnEnter = document.getElementById("btn-enter");
    const btnHover = document.getElementById("btn-hover");
    const btnOut = document.getElementById("btn-out");

    btnEnter.addEventListener("mouseenter", function(event) {
      event.target.innerText = "Mouse sudah masuk";
    });

    btnOut.addEventListener("mouseout", function(event) {
      event.target.innerText = "Mouse sudah keluar";
    });

    btnHover.addEventListener("mouseover", function(event){
      event.target.innerText = "Mouse sudah di atas elemen";
    });
  </script>
</body>
</html>

3 saat pointer menjauh dari elemen;

Mari kita coba latihan!

Buatlah file baru dengan nama

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Event Mouse</title>
</head>
<body>
  <button id="btn-enter">Mouse Enter</button>
  <button id="btn-hover">Hover</button>
  <button id="btn-out">Mouse Out</button>

  <script>
    const btnEnter = document.getElementById("btn-enter");
    const btnHover = document.getElementById("btn-hover");
    const btnOut = document.getElementById("btn-out");

    btnEnter.addEventListener("mouseenter", function(event) {
      event.target.innerText = "Mouse sudah masuk";
    });

    btnOut.addEventListener("mouseout", function(event) {
      event.target.innerText = "Mouse sudah keluar";
    });

    btnHover.addEventListener("mouseover", function(event){
      event.target.innerText = "Mouse sudah di atas elemen";
    });
  </script>
</body>
</html>

4, kemudian isi dengan kode berikut:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Event Mouse</title>
</head>
<body>
  <button id="btn-enter">Mouse Enter</button>
  <button id="btn-hover">Hover</button>
  <button id="btn-out">Mouse Out</button>

  <script>
    const btnEnter = document.getElementById("btn-enter");
    const btnHover = document.getElementById("btn-hover");
    const btnOut = document.getElementById("btn-out");

    btnEnter.addEventListener("mouseenter", function(event) {
      event.target.innerText = "Mouse sudah masuk";
    });

    btnOut.addEventListener("mouseout", function(event) {
      event.target.innerText = "Mouse sudah keluar";
    });

    btnHover.addEventListener("mouseover", function(event){
      event.target.innerText = "Mouse sudah di atas elemen";
    });
  </script>
</body>
</html>

Hasilnya:

Secara kasat mata, event

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Event Mouse</title>
</head>
<body>
  <button id="btn-enter">Mouse Enter</button>
  <button id="btn-hover">Hover</button>
  <button id="btn-out">Mouse Out</button>

  <script>
    const btnEnter = document.getElementById("btn-enter");
    const btnHover = document.getElementById("btn-hover");
    const btnOut = document.getElementById("btn-out");

    btnEnter.addEventListener("mouseenter", function(event) {
      event.target.innerText = "Mouse sudah masuk";
    });

    btnOut.addEventListener("mouseout", function(event) {
      event.target.innerText = "Mouse sudah keluar";
    });

    btnHover.addEventListener("mouseover", function(event){
      event.target.innerText = "Mouse sudah di atas elemen";
    });
  </script>
</body>
</html>

2 dan

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Event Mouse</title>
</head>
<body>
  <button id="btn-enter">Mouse Enter</button>
  <button id="btn-hover">Hover</button>
  <button id="btn-out">Mouse Out</button>

  <script>
    const btnEnter = document.getElementById("btn-enter");
    const btnHover = document.getElementById("btn-hover");
    const btnOut = document.getElementById("btn-out");

    btnEnter.addEventListener("mouseenter", function(event) {
      event.target.innerText = "Mouse sudah masuk";
    });

    btnOut.addEventListener("mouseout", function(event) {
      event.target.innerText = "Mouse sudah keluar";
    });

    btnHover.addEventListener("mouseover", function(event){
      event.target.innerText = "Mouse sudah di atas elemen";
    });
  </script>
</body>
</html>

1 terlihat sama. Namun, sebenarnya

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Event Mouse</title>
</head>
<body>
  <button id="btn-enter">Mouse Enter</button>
  <button id="btn-hover">Hover</button>
  <button id="btn-out">Mouse Out</button>

  <script>
    const btnEnter = document.getElementById("btn-enter");
    const btnHover = document.getElementById("btn-hover");
    const btnOut = document.getElementById("btn-out");

    btnEnter.addEventListener("mouseenter", function(event) {
      event.target.innerText = "Mouse sudah masuk";
    });

    btnOut.addEventListener("mouseout", function(event) {
      event.target.innerText = "Mouse sudah keluar";
    });

    btnHover.addEventListener("mouseover", function(event){
      event.target.innerText = "Mouse sudah di atas elemen";
    });
  </script>
</body>
</html>

1 terjadi setelah

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Event Mouse</title>
</head>
<body>
  <button id="btn-enter">Mouse Enter</button>
  <button id="btn-hover">Hover</button>
  <button id="btn-out">Mouse Out</button>

  <script>
    const btnEnter = document.getElementById("btn-enter");
    const btnHover = document.getElementById("btn-hover");
    const btnOut = document.getElementById("btn-out");

    btnEnter.addEventListener("mouseenter", function(event) {
      event.target.innerText = "Mouse sudah masuk";
    });

    btnOut.addEventListener("mouseout", function(event) {
      event.target.innerText = "Mouse sudah keluar";
    });

    btnHover.addEventListener("mouseover", function(event){
      event.target.innerText = "Mouse sudah di atas elemen";
    });
  </script>
</body>
</html>

2.

3. Event Keyboard

Berikut ini beberapa event yang bisa terjadi saat kita menekan keyboard:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Event Mouse</title>
</head>
<body>
  <button id="btn-enter">Mouse Enter</button>
  <button id="btn-hover">Hover</button>
  <button id="btn-out">Mouse Out</button>

  <script>
    const btnEnter = document.getElementById("btn-enter");
    const btnHover = document.getElementById("btn-hover");
    const btnOut = document.getElementById("btn-out");

    btnEnter.addEventListener("mouseenter", function(event) {
      event.target.innerText = "Mouse sudah masuk";
    });

    btnOut.addEventListener("mouseout", function(event) {
      event.target.innerText = "Mouse sudah keluar";
    });

    btnHover.addEventListener("mouseover", function(event){
      event.target.innerText = "Mouse sudah di atas elemen";
    });
  </script>
</body>
</html>

9: kejadian saat kita menekan dan menahan tombol tertentu;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Event Key</title>
</head>

<body>
  <h1 id="keydown"></h1>
  <h1 id="pressed"></h1>
  <h1 id="keyup"></h1>

  <script>
    const keydown = document.getElementById("keydown");
    const pressed = document.getElementById("pressed");
    const keyup = document.getElementById("keyup");

    document.addEventListener("keydown", function (event) {
      keydown.innerText = `menekan: ${event.key}`;
    });
    
    document.addEventListener("keypress", function (event) {
      pressed.innerText = `menahan: ${event.key}`;
    });

    document.addEventListener("keyup", function (event) {
      keyup.innerText = `melepas: ${event.key}`;
    });
  </script>
</body>

</html>

0: kejadian saat kita berhenti menekan (melepas) tombol tertentu;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Event Key</title>
</head>

<body>
  <h1 id="keydown"></h1>
  <h1 id="pressed"></h1>
  <h1 id="keyup"></h1>

  <script>
    const keydown = document.getElementById("keydown");
    const pressed = document.getElementById("pressed");
    const keyup = document.getElementById("keyup");

    document.addEventListener("keydown", function (event) {
      keydown.innerText = `menekan: ${event.key}`;
    });
    
    document.addEventListener("keypress", function (event) {
      pressed.innerText = `menahan: ${event.key}`;
    });

    document.addEventListener("keyup", function (event) {
      keyup.innerText = `melepas: ${event.key}`;
    });
  </script>
</body>

</html>

1: kejadian saat kita mulai menekan tombol tertentu;

Mari kita coba!

Buatlah file baru dengan nama

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Event Key</title>
</head>

<body>
  <h1 id="keydown"></h1>
  <h1 id="pressed"></h1>
  <h1 id="keyup"></h1>

  <script>
    const keydown = document.getElementById("keydown");
    const pressed = document.getElementById("pressed");
    const keyup = document.getElementById("keyup");

    document.addEventListener("keydown", function (event) {
      keydown.innerText = `menekan: ${event.key}`;
    });
    
    document.addEventListener("keypress", function (event) {
      pressed.innerText = `menahan: ${event.key}`;
    });

    document.addEventListener("keyup", function (event) {
      keyup.innerText = `melepas: ${event.key}`;
    });
  </script>
</body>

</html>

2 kemudian isi dengan kode berikut:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Event Key</title>
</head>

<body>
  <h1 id="keydown"></h1>
  <h1 id="pressed"></h1>
  <h1 id="keyup"></h1>

  <script>
    const keydown = document.getElementById("keydown");
    const pressed = document.getElementById("pressed");
    const keyup = document.getElementById("keyup");

    document.addEventListener("keydown", function (event) {
      keydown.innerText = `menekan: ${event.key}`;
    });
    
    document.addEventListener("keypress", function (event) {
      pressed.innerText = `menahan: ${event.key}`;
    });

    document.addEventListener("keyup", function (event) {
      keyup.innerText = `melepas: ${event.key}`;
    });
  </script>
</body>

</html>

Hasilnya:

4. Event Change

Event change biasanya terjadi pada elemen input seperti input text, radio, checkbox, select-option, dll. Event change akan terjadi saat nilai pada elemen tersebut berubah.

Mari kita coba!

Buatlah file baru dengan nama

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Event Key</title>
</head>

<body>
  <h1 id="keydown"></h1>
  <h1 id="pressed"></h1>
  <h1 id="keyup"></h1>

  <script>
    const keydown = document.getElementById("keydown");
    const pressed = document.getElementById("pressed");
    const keyup = document.getElementById("keyup");

    document.addEventListener("keydown", function (event) {
      keydown.innerText = `menekan: ${event.key}`;
    });
    
    document.addEventListener("keypress", function (event) {
      pressed.innerText = `menahan: ${event.key}`;
    });

    document.addEventListener("keyup", function (event) {
      keyup.innerText = `melepas: ${event.key}`;
    });
  </script>
</body>

</html>

3, kemudian isi dengan kode berikut:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Event on Change</title>
</head>
<body>
  <div id="info"></div>
  <label for="buah">Pilih Buah</label>
  <select name="buah" id="buah">
    <option>Apel</option>
    <option>Mangga</option>
    <option>Jeruk</option>
  </select>
  
  <script>
  const buah = document.getElementById('buah');
  const info = document.getElementById('info');

  buah.addEventListener('change', function(e){
    info.innerText = `Anda memilih: ${e.target.value}`;
  });
  </script>
</body>
</html>

Pada contoh ini, kita membuat elemen select-option, kemudian kita mendengarkan event

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Event Key</title>
</head>

<body>
  <h1 id="keydown"></h1>
  <h1 id="pressed"></h1>
  <h1 id="keyup"></h1>

  <script>
    const keydown = document.getElementById("keydown");
    const pressed = document.getElementById("pressed");
    const keyup = document.getElementById("keyup");

    document.addEventListener("keydown", function (event) {
      keydown.innerText = `menekan: ${event.key}`;
    });
    
    document.addEventListener("keypress", function (event) {
      pressed.innerText = `menahan: ${event.key}`;
    });

    document.addEventListener("keyup", function (event) {
      keyup.innerText = `melepas: ${event.key}`;
    });
  </script>
</body>

</html>

4 pada elemen tersebut.

Maka hasilnya:

5. Event pada Form

Ada beberapa event yang biasanya terjadi pada form:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Event Key</title>
</head>

<body>
  <h1 id="keydown"></h1>
  <h1 id="pressed"></h1>
  <h1 id="keyup"></h1>

  <script>
    const keydown = document.getElementById("keydown");
    const pressed = document.getElementById("pressed");
    const keyup = document.getElementById("keyup");

    document.addEventListener("keydown", function (event) {
      keydown.innerText = `menekan: ${event.key}`;
    });
    
    document.addEventListener("keypress", function (event) {
      pressed.innerText = `menahan: ${event.key}`;
    });

    document.addEventListener("keyup", function (event) {
      keyup.innerText = `melepas: ${event.key}`;
    });
  </script>
</body>

</html>

5: saat kita melakukan submision atau mengirim data pada form;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Event Key</title>
</head>

<body>
  <h1 id="keydown"></h1>
  <h1 id="pressed"></h1>
  <h1 id="keyup"></h1>

  <script>
    const keydown = document.getElementById("keydown");
    const pressed = document.getElementById("pressed");
    const keyup = document.getElementById("keyup");

    document.addEventListener("keydown", function (event) {
      keydown.innerText = `menekan: ${event.key}`;
    });
    
    document.addEventListener("keypress", function (event) {
      pressed.innerText = `menahan: ${event.key}`;
    });

    document.addEventListener("keyup", function (event) {
      keyup.innerText = `melepas: ${event.key}`;
    });
  </script>
</body>

</html>

6: saat kita melakukan clear data pada form;

Mari kita coba!

Buatlah file baru dengan nama

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Event Key</title>
</head>

<body>
  <h1 id="keydown"></h1>
  <h1 id="pressed"></h1>
  <h1 id="keyup"></h1>

  <script>
    const keydown = document.getElementById("keydown");
    const pressed = document.getElementById("pressed");
    const keyup = document.getElementById("keyup");

    document.addEventListener("keydown", function (event) {
      keydown.innerText = `menekan: ${event.key}`;
    });
    
    document.addEventListener("keypress", function (event) {
      pressed.innerText = `menahan: ${event.key}`;
    });

    document.addEventListener("keyup", function (event) {
      keyup.innerText = `melepas: ${event.key}`;
    });
  </script>
</body>

</html>

7 kemudian isi dengan kode berikut:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Latihan Form Event</title>
</head>
<body>
  <form action="" method="post" id="form-login">
    <fieldset>
      <legend>Login</legend>
      <div>
        <label for="username">username</label>
        <input type="text" name="username" placeholder="username" />
      </div>
      <div>
        <label for="password">password</label>
        <input type="password" name="password" placeholder="password" />
      </div>
      <div>
        <p id="feedback"></p>
        <button type="submit">Login</button>
        <button type="reset">Celar</button>
      </div>
    </fieldset>
  </form>

  <script>
    const formLogin = document.getElementById("form-login");
    const feedbackMessage = document.getElementById("feedback");
    
    // mendengarkan event submit pada form
    formLogin.addEventListener("submit", function(event){
      event.preventDefault();
      const data = new FormData(event.target);
      feedbackMessage.innerHTML = `Login dengan username <code>${data.get("username")}</code> dikirim!`;
    });

    // mendengarkan event reset pada form
    formLogin.addEventListener("reset", function(){
      feedbackMessage.textContent = "Form dibersihkan!";
    });
  </script>
</body>
</html>

Hasilnya:

Pada contoh ini kita menggunakan parameter

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Event Key</title>
</head>

<body>
  <h1 id="keydown"></h1>
  <h1 id="pressed"></h1>
  <h1 id="keyup"></h1>

  <script>
    const keydown = document.getElementById("keydown");
    const pressed = document.getElementById("pressed");
    const keyup = document.getElementById("keyup");

    document.addEventListener("keydown", function (event) {
      keydown.innerText = `menekan: ${event.key}`;
    });
    
    document.addEventListener("keypress", function (event) {
      pressed.innerText = `menahan: ${event.key}`;
    });

    document.addEventListener("keyup", function (event) {
      keyup.innerText = `melepas: ${event.key}`;
    });
  </script>
</body>

</html>

8 untuk mengambil data dari object pengirim event, yakni

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Event Key</title>
</head>

<body>
  <h1 id="keydown"></h1>
  <h1 id="pressed"></h1>
  <h1 id="keyup"></h1>

  <script>
    const keydown = document.getElementById("keydown");
    const pressed = document.getElementById("pressed");
    const keyup = document.getElementById("keyup");

    document.addEventListener("keydown", function (event) {
      keydown.innerText = `menekan: ${event.key}`;
    });
    
    document.addEventListener("keypress", function (event) {
      pressed.innerText = `menahan: ${event.key}`;
    });

    document.addEventListener("keyup", function (event) {
      keyup.innerText = `melepas: ${event.key}`;
    });
  </script>
</body>

</html>

9.

formLogin.addEventListener("submit", function(event){
      event.preventDefault();
      const data = new FormData(event.target);
      feedbackMessage.innerHTML = `Login dengan username <code>${data.get("username")}</code> dikirim!`;
});

Parameter

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Event Key</title>
</head>

<body>
  <h1 id="keydown"></h1>
  <h1 id="pressed"></h1>
  <h1 id="keyup"></h1>

  <script>
    const keydown = document.getElementById("keydown");
    const pressed = document.getElementById("pressed");
    const keyup = document.getElementById("keyup");

    document.addEventListener("keydown", function (event) {
      keydown.innerText = `menekan: ${event.key}`;
    });
    
    document.addEventListener("keypress", function (event) {
      pressed.innerText = `menahan: ${event.key}`;
    });

    document.addEventListener("keyup", function (event) {
      keyup.innerText = `melepas: ${event.key}`;
    });
  </script>
</body>

</html>

8 sebenarnya bisa kita ganti apa aja, tapi orang biasanya pakai

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Event Klik</title>
</head>
<body>
  <button id="btn-double">Klik 2x</button>

  <script>
    const btnLogin = document.getElementById("btn-double");
    btnLogin.addEventListener("dblclick", function(){
      alert("Terimakasih, kamu sudah klik 2x");
    });
  </script>
</body>
</html>

2 atau

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Event Key</title>
</head>

<body>
  <h1 id="keydown"></h1>
  <h1 id="pressed"></h1>
  <h1 id="keyup"></h1>

  <script>
    const keydown = document.getElementById("keydown");
    const pressed = document.getElementById("pressed");
    const keyup = document.getElementById("keyup");

    document.addEventListener("keydown", function (event) {
      keydown.innerText = `menekan: ${event.key}`;
    });
    
    document.addEventListener("keypress", function (event) {
      pressed.innerText = `menahan: ${event.key}`;
    });

    document.addEventListener("keyup", function (event) {
      keyup.innerText = `melepas: ${event.key}`;
    });
  </script>
</body>

</html>

8.

Kemudian di dalam fungsi ini kita menjalankan:

event.preventDefault();

Ini berfungsi untuk mencegah aksi default yang dilakukan pada event sebuah event. Pada contoh ini, kita mendengarkan event

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Event Key</title>
</head>

<body>
  <h1 id="keydown"></h1>
  <h1 id="pressed"></h1>
  <h1 id="keyup"></h1>

  <script>
    const keydown = document.getElementById("keydown");
    const pressed = document.getElementById("pressed");
    const keyup = document.getElementById("keyup");

    document.addEventListener("keydown", function (event) {
      keydown.innerText = `menekan: ${event.key}`;
    });
    
    document.addEventListener("keypress", function (event) {
      pressed.innerText = `menahan: ${event.key}`;
    });

    document.addEventListener("keyup", function (event) {
      keyup.innerText = `melepas: ${event.key}`;
    });
  </script>
</body>

</html>

5.

Nah, biasanya pada event

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Event Key</title>
</head>

<body>
  <h1 id="keydown"></h1>
  <h1 id="pressed"></h1>
  <h1 id="keyup"></h1>

  <script>
    const keydown = document.getElementById("keydown");
    const pressed = document.getElementById("pressed");
    const keyup = document.getElementById("keyup");

    document.addEventListener("keydown", function (event) {
      keydown.innerText = `menekan: ${event.key}`;
    });
    
    document.addEventListener("keypress", function (event) {
      pressed.innerText = `menahan: ${event.key}`;
    });

    document.addEventListener("keyup", function (event) {
      keyup.innerText = `melepas: ${event.key}`;
    });
  </script>
</body>

</html>

5 form akan mengirim data dan melakukan reload page.

Biar ini tidak dilakukan, maka kita harus menggunakan method

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Event on Change</title>
</head>
<body>
  <div id="info"></div>
  <label for="buah">Pilih Buah</label>
  <select name="buah" id="buah">
    <option>Apel</option>
    <option>Mangga</option>
    <option>Jeruk</option>
  </select>
  
  <script>
  const buah = document.getElementById('buah');
  const info = document.getElementById('info');

  buah.addEventListener('change', function(e){
    info.innerText = `Anda memilih: ${e.target.value}`;
  });
  </script>
</body>
</html>

5. Kemudian setelah itu, barulah kita membuat aksi yang kita inginkan.

Nah, begitulah beberapa contoh latihan event di Javascript.

Berikutnya kita akan belajar tentang cara membuat custom event.

Membuat Custom Event

Selain mendengarkan (listen) event yang sudah ada, kita juga bisa menciptakan event sendiri.

Ada tiga langkah yang harus dilakukan saat membuat custom event:

Membuat object baru dengan

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Event on Change</title>
</head>
<body>
  <div id="info"></div>
  <label for="buah">Pilih Buah</label>
  <select name="buah" id="buah">
    <option>Apel</option>
    <option>Mangga</option>
    <option>Jeruk</option>
  </select>
  
  <script>
  const buah = document.getElementById('buah');
  const info = document.getElementById('info');

  buah.addEventListener('change', function(e){
    info.innerText = `Anda memilih: ${e.target.value}`;
  });
  </script>
</body>
</html>

6;

Mendengarkan event dengan method

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Event on Change</title>
</head>
<body>
  <div id="info"></div>
  <label for="buah">Pilih Buah</label>
  <select name="buah" id="buah">
    <option>Apel</option>
    <option>Mangga</option>
    <option>Jeruk</option>
  </select>
  
  <script>
  const buah = document.getElementById('buah');
  const info = document.getElementById('info');

  buah.addEventListener('change', function(e){
    info.innerText = `Anda memilih: ${e.target.value}`;
  });
  </script>
</body>
</html>

7;

Memicu atau trigger event dengan method

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Event on Change</title>
</head>
<body>
  <div id="info"></div>
  <label for="buah">Pilih Buah</label>
  <select name="buah" id="buah">
    <option>Apel</option>
    <option>Mangga</option>
    <option>Jeruk</option>
  </select>
  
  <script>
  const buah = document.getElementById('buah');
  const info = document.getElementById('info');

  buah.addEventListener('change', function(e){
    info.innerText = `Anda memilih: ${e.target.value}`;
  });
  </script>
</body>
</html>

8.

Berikut ini contoh sintaksnya:

// membuat object untuk custom event
const namaObjectEvent = new Event('nama-event');

// mendengarkan event
domObject.addEventListener('nama-event', function(){ ... })

// memicu atau trigger event
domObject.dispatchEvent(namaObjectEvent);
                                                    
// atau bisa juga di-trigger pada object window dan document
window.dispatchEvent(namaObjectEvent);
document.dispatchEvent(namaObjectEvent);

Supaya semakin paham, mari kita coba latihan.

Buatlah file HTML baru dengan nama

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Event on Change</title>
</head>
<body>
  <div id="info"></div>
  <label for="buah">Pilih Buah</label>
  <select name="buah" id="buah">
    <option>Apel</option>
    <option>Mangga</option>
    <option>Jeruk</option>
  </select>
  
  <script>
  const buah = document.getElementById('buah');
  const info = document.getElementById('info');

  buah.addEventListener('change', function(e){
    info.innerText = `Anda memilih: ${e.target.value}`;
  });
  </script>
</body>
</html>

9, kemudian isi dengan kode berikut:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contoh Event Klik</title>
</head>
<body>
  <button onclick="hello()">Hello</button>
  <button id="hello-petanikode">Hello Petani Kode</button>

  <script>
    function hello(){
      alert("Hello World");
    }

    const btnLogin = document.getElementById("hello-petanikode");
    btnLogin.addEventListener("click", function(){
      alert("Hello Petani Kode");
    });
  </script>
</body>
</html>

0

Hasilnya:

Event

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Latihan Form Event</title>
</head>
<body>
  <form action="" method="post" id="form-login">
    <fieldset>
      <legend>Login</legend>
      <div>
        <label for="username">username</label>
        <input type="text" name="username" placeholder="username" />
      </div>
      <div>
        <label for="password">password</label>
        <input type="password" name="password" placeholder="password" />
      </div>
      <div>
        <p id="feedback"></p>
        <button type="submit">Login</button>
        <button type="reset">Celar</button>
      </div>
    </fieldset>
  </form>

  <script>
    const formLogin = document.getElementById("form-login");
    const feedbackMessage = document.getElementById("feedback");
    
    // mendengarkan event submit pada form
    formLogin.addEventListener("submit", function(event){
      event.preventDefault();
      const data = new FormData(event.target);
      feedbackMessage.innerHTML = `Login dengan username <code>${data.get("username")}</code> dikirim!`;
    });

    // mendengarkan event reset pada form
    formLogin.addEventListener("reset", function(){
      feedbackMessage.textContent = "Form dibersihkan!";
    });
  </script>
</body>
</html>

0 terjadi saat kita klik tombol

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Latihan Form Event</title>
</head>
<body>
  <form action="" method="post" id="form-login">
    <fieldset>
      <legend>Login</legend>
      <div>
        <label for="username">username</label>
        <input type="text" name="username" placeholder="username" />
      </div>
      <div>
        <label for="password">password</label>
        <input type="password" name="password" placeholder="password" />
      </div>
      <div>
        <p id="feedback"></p>
        <button type="submit">Login</button>
        <button type="reset">Celar</button>
      </div>
    </fieldset>
  </form>

  <script>
    const formLogin = document.getElementById("form-login");
    const feedbackMessage = document.getElementById("feedback");
    
    // mendengarkan event submit pada form
    formLogin.addEventListener("submit", function(event){
      event.preventDefault();
      const data = new FormData(event.target);
      feedbackMessage.innerHTML = `Login dengan username <code>${data.get("username")}</code> dikirim!`;
    });

    // mendengarkan event reset pada form
    formLogin.addEventListener("reset", function(){
      feedbackMessage.textContent = "Form dibersihkan!";
    });
  </script>
</body>
</html>

1.

Mengapa begitu?

Ini karena kita memicu atau trigger event-nya di sana. Selain klik, kita juga memicu event-nya di mana pun kita mau.

Yang penting kita memanggil method

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Latihan Form Event</title>
</head>
<body>
  <form action="" method="post" id="form-login">
    <fieldset>
      <legend>Login</legend>
      <div>
        <label for="username">username</label>
        <input type="text" name="username" placeholder="username" />
      </div>
      <div>
        <label for="password">password</label>
        <input type="password" name="password" placeholder="password" />
      </div>
      <div>
        <p id="feedback"></p>
        <button type="submit">Login</button>
        <button type="reset">Celar</button>
      </div>
    </fieldset>
  </form>

  <script>
    const formLogin = document.getElementById("form-login");
    const feedbackMessage = document.getElementById("feedback");
    
    // mendengarkan event submit pada form
    formLogin.addEventListener("submit", function(event){
      event.preventDefault();
      const data = new FormData(event.target);
      feedbackMessage.innerHTML = `Login dengan username <code>${data.get("username")}</code> dikirim!`;
    });

    // mendengarkan event reset pada form
    formLogin.addEventListener("reset", function(){
      feedbackMessage.textContent = "Form dibersihkan!";
    });
  </script>
</body>
</html>

2, maka event tersebut akan di-trigger.

Apa Selanjutnya?

Event akan sering kamu gunakan dalam membuat aplikasi dengan Javascript. Selain di browser, event juga ada di Nodejs.

Selanjutnya silahkan latihan lebih banyak lagi menggunakan event lainnya dan coba juga untuk belajar Event di Nodejs.

Apa fungsi dari add event listener?

AddEventListener adalah method yang sangat penting dalam JavaScript. Merupakan method yang berfungsi untuk membuat event (click, change, mouseout, dll) untuk keperluan manipulasi DOM. Dalam artikel kali ini, saya akan menunjukan bagaimana cara menggunakannya.

Event apa yang terjadi ketika pengguna mengklik pada sebuah elemen HTML?

OnClick. OnClick adalah suatu kerjadian yang terjadi ketika sebuah elemen html di klik.

Apa yang dimaksud dengan event OnClick?

onclick adalah atribut HTML untuk menentukan aksi saat event klik pada sebuah elemen. Atribut ini bisa diisi dengan nama fungsi atau ekspresi javascript. Selain event onclick ada juga event lainnya seperti onchange , onmouseover , onkeyup , onload , dll.

Apa yang dimaksud dengan event Website pada javascript?

Pengertian Event di Javascript Event adalah sesuatu yang terjadi ketika ada aksi yang dilakukan oleh pengguna atau sistem pada halaman web. Contoh misalnya ketika browser selesai menampilkan halaman dokumen html maka event onload bisa digunakan.

kode html