EVENT JAVA SCRIPT

A. Event Javascript

Events dalam JavaScript merupakan interaksi antara pengguna dan sistem atau kejadian yang terjadi dalam browser yang dipantau oleh JavaScript, seperti klik mouse, penekanan tombol keyboard, perubahan halaman web, atau keluar dari halaman web.

Dapat juga dikatakan bahwa Event adalah kejadian yang terjadi di halaman web, Misalnya seperti:

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

Jenis events yang paling sering digunakan:

a. Mouse Events, Mouse events dipicu oleh aksi pengguna menggunakan mouse, seperti:

  • mouseleave: Ketika kursor mouse meninggalkan elemen
  • click: Ketika pengguna mengklik elemen
  • dblclick: Ketika pengguna mengklik dua kali pada elemen
  • mouseenter: Ketika kursor mouse masuk ke dalam elemen

b. Keyboard Events, Keyboard events dipicu oleh aksi pengguna menggunakan keyboard, seperti:

  • keypress: Ketika pengguna menekan dan melepas tombol keyboard
  • keydown: Ketika pengguna menekan tombol keyboard
  • keyup: Ketika pengguna melepas tombol keyboard

c.  Event lainnya : form events, window events, dan lain sebagainya.

B. Menggunakan Event Javascript

  • Cara Pertama: Menggunakan Atribut
    HTML memiliki atribut event untuk menentukan fungsi yang akan dijalankan saat event terjadi.
<button onclick="myFunction()">Click me</button>

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 onchangeonmouseoveronkeyuponload, dll.

  • Cara kedua: menggunakan Method addEventListener()
    Method addEventListerner() merupakan method yang terdapat pada object DOM. Object ini mewakili sebuah elemen HTML di Javascript.
button.addEventListener('click', function(e){
  });

Penulisan nama event ditulis tanpa menggunakan on. Misalnya kita ingin meng-handle event klik, maka cukup tulis click saja

C. Contoh Menggunakan Handle Event di Javascript

  • Event Klik, Event klik termasuk dalam Mouse Event, karena pemicunya adalah aktivitas klik dari mouse, dapat diberikan aksi tertentu saat terjadi klik, misalnya menampilkan dialog alert()
<!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>

event dblclick untuk double klik.

<!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("Terima kasih, kamu sudah klik 2x");
    });
  </script>
</body>
</html>
  • Event Mouse, Selain diklik, berikut ini event yang bisa terjadi karena mouse:
    • mouseover (hover) saat pointer berada di atas element;
    • mouseenter saat pointer mendekat pada elemen;
    • mouseout saat pointer menjauh dari 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>
  • Event Keyboard, beberapa event yang bisa terjadi saat kita menekan keyboard:
    • keypress: kejadian saat kita menekan dan menahan tombol tertentu;
    • keyup: kejadian saat kita berhenti menekan (melepas) tombol tertentu;
    • keydown: kejadian saat kita mulai menekan 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>
    • 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.
    <!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>
    • Event pada Form,  beberapa event yang biasanya terjadi pada form:
      • submit: saat kita melakukan submit atau mengirim data pada form;
      • reset: saat kita melakukan clear data pada form;
    <!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> 

    untuk mengambil data dari object pengirim event, yakni formLogin.

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

    Be the first to comment

    Leave a Reply

    Your email address will not be published.


    *