AJAX (Asynchronous Javascript And XML)

Apa itu AJAX? AJAX merupakan singkatan dari Asynchronous Javascript And XML.

AJAX berfungsi untuk:

Mengambil data dari server secara background;
Update tampilan web tanpa harus reload browser;
Mengirim data ke server secara background.

Pada dasarnya AJAX hanya menggunakan objek XMLHttpRequest untuk berkomunikasi dengan server.

Kita bisa bisa melihat proses AJAX melalui inspect elemen di web browser, lalu buka tab Network dan aktifkan filter XHR (XML HTTP Request).

Oh iya, meskipun di AJAX ada kata “XML” Bukan berarti hanya mendukung format XML saja.

AJAX juga mendukung format JSON, Plain Text, dan HTML.

Cara Menggunakan Ajax di Javascript

Langkah-langkah menggunakan AJAX seperti ini:

Membuat Objek Ajax

1	let xhr = new XMLHttpRequest();

Menentukan Fungsi Handler untuk Event

xhr.onreadystatechange = function() { ... };
xhr.onload = function() { ... };
xhr.onerror = function() { ... };
xhr.onprogress = function() { ... };

Menentukan Method dan URL

1	xhr.open("GET", url, true);

Mengirim Request

1	xhr.send();

mari mencobanya

Buatlah file HTML dengan isi sebagai berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Belajar Dasar Ajax</title>
</head>
<body>
    <h1>Tutorial Ajax</h1>
    <div id="hasil"></div>
    <button onclick="loadContent()">Load Content</button>

    <script>
        function loadContent(){
            var xhr = new XMLHttpRequest();
            var url = "https://api.github.com/users/petanikode";
            xhr.onreadystatechange = function(){
                if(this.readyState == 4 && this.status == 200){
                    document.getElementById("hasil").innerHTML = this.responseText;
                }
            };
            xhr.open("GET", url, true);
            xhr.send();
        }
    </script>
</body>
</html>

Pada contoh di atas, kita mengambil data dari server Github dengan metode GET. Lalu hasilnya langsung dimasukkan ke dalam elemen

Event yang kita gunakan adalah onreadystatechange, pada event ini kita bisa mengecek state dan status AJAX.

1
2
3

if(this.readyState == 4 && this.status == 200){
    //...
}

Kode state 4 artinya done dan status 200 artinya sukses. Berikut ini daftar kode state AJAX.

Kode	State	Keterangan
0	UNSENT	Objek AJAX sudah dibuat tapi belum memanggil method open().
1	OPENED	Method open() sudah dipanggil.
2	HEADERS_RECEIVED	Method send() sudah dipanggil, dan di sini sudah tersedia header status.
3	LOADING	Downloading; sedang men-download data.
4	DONE	Operasi AJAX selesai.

Sementara untuk status header 200 adalah status HTTP Request. Biasanya kode di atas 200 artinya baik dan di bawah 200 artinya buruk.

Lalu coba perhatikan kode ini:

1	xhr.open("GET", url, true);

Terdapat tiga parameter yang kita berikan kepada method open():

GET adalah metode request yang akan digunakan;
url adalah alamat URL tujuan;
true adalah untuk mengeksekusi AJAX secara asynchronous.

Mari kita lanjutkan dengan contoh yang lainnya. Silakan ubah isi file HTML yang tadi menjadi seperti ini:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Belajar Dasar Ajax</title>
</head>

<body>
    <h1>Tutorial Ajax <button id="btn-clear" onclick="clearResult()">Clear</button></h1>
    <div id="hasil"></div>
    <button id="button" onclick="loadContent()">Load Content</button>

    <script>
        function loadContent() {
            var xhr = new XMLHttpRequest();
            var url = "https://api.github.com/users/petanikode";

            xhr.onloadstart = function () {
                document.getElementById("button").innerHTML = "Loading...";
            }

            xhr.onerror = function () {
                alert("Gagal mengambil data");
            };

            xhr.onloadend = function () {
                if (this.responseText !== "") {
                    var data = JSON.parse(this.responseText);
                    var img = document.createElement("img");
                    img.src = data.avatar_url;
                    var name = document.createElement("h3");
                    name.innerHTML = data.name;

                    document.getElementById("hasil").append(img, name);
                    document.getElementById("button").innerHTML = "Done";

                    setTimeout(function () {
                        document.getElementById("button").innerHTML = "Load Lagi";
                    }, 3000);
                }
            };

            xhr.open("GET", url, true);
            xhr.send();
        }

        function clearResult() {
            document.getElementById("hasil").innerHTML = "";
        }
    </script>
</body>
</html>

Mengirim Data ke Server dengan AJAX

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Belajar Dasar Ajax</title>
</head>

<body>
    <h1>Kirim Data dengan Ajax</h1>
    <form method="POST" onsubmit="return sendData()">
        <p>
            <label>Title</label>
            <input type="text" id="title" placeholder="judul artikel">
        </p>
        <p>
            <label>Isi Artikel</label><br>
            <textarea id="body" placeholder="isi artikel..." cols="50" rows="10"></textarea>
        </p>
        <input type="submit" value="Kirim" />
    </form>

    <script>
        function sendData() {
            var xhr = new XMLHttpRequest();
            var url = "https://jsonplaceholder.typicode.com/posts";

            var data = JSON.stringify({
                title: document.getElementById("title").value,
                body: document.getElementById("body").value,
                userId: 1
            });

            xhr.open("POST", url, true);
            xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
            xhr.onload = function () {               
                console.log (this.responseText);
            };

            xhr.send(data);
            return false;
        }
    </script>
</body>
</html>

Pengiriman data tersebut hanya untuk simulasi. Data tidak benar-benar akan terkirim ke server https://jsonplaceholder.typicode.com/posts.

AJAX Menggunakan JQuery

JQuery adalah library Javascript yang menyederhanakan fungsi-fungsi Javascript. Pada JQuery, AJAX dapat dibuat seperti ini:

// load data ke elemen tertentu via AJAX
$(selector).load(URL,data,callback);

// ambil data dari server
$.get(URL,callback);

// kirim data dari Server
$.post(URL,data,callback);

Mari kita coba

Buatlah file baru bernama ajax-jquery.html lalu 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">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Belajar AJAX dengan JQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>
    <h1>Load Data</h1>
    <pre id="result"></pre>
    
    <script>
        $("#result").load("https://api.github.com/users/petanikode");
    </script>
</body>
</html>

Dengan fungsi $(“#result”).load(), kita bisa mengambil data dengan AJAX dan langsung menampilkannya pada elemen yang dipilih.

Fungsi JQuery load() cocoknya untuk mengambil bagian dari HTML untuk ditampilkan.

Contoh lainnya menggunakan metode GET:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Belajar AJAX dengan JQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>
    <h1>Load Data</h1>
    <img id="avatar" src="" width="100" height="100">
    <br>
    <h3 id="name"></h3>
    <p id="location"></p>
    
    
    <script>
        var url = "https://api.github.com/users/petanikode";
        $.get(url, function(data, status){
            $("#avatar").attr("src", data.avatar_url);
            $("#name").text(data.name);
            $("#location").text(data.location);
        });
    </script>
</body>
</html>

Nah untuk mengirim data dengan AJAX di JQuery, caranya hampir sama seperti mengambil data dengan $.get().

<script>
var url = "https://jsonplaceholder.typicode.com/posts";
var data = {
    title: "Tutorial AJAX dengan JQuery",
    body: "Ini adalah tutorial tentang AJAX",
    userId: 1
};
$.post(url, data, function(data, status){
    // data terkkirim, lakukan sesuatu di sini
});
</script>

AJAX Menggunakan Fetch API

Fetch artinya mengambil. Metode fetch bisa jadi alternatif untuk AJAX.

Method ini mulai hadir pada Javascript versi ES6.

Perbedaannya dengan XMLHttpRequest dan JQuery adalah:

Fetch akan mengembalikan sebuah promise;
Secara bawaan (default), fetch tidak akan mengirim atau menerima cookie dari server.2
Fetch dapat digunakan di web browser dan juga Nodejs dengan modul node-fetch.

Berikut ini sintak dasar penggunaan Fetch.

fetch('http://example.com/movies.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(JSON.stringify(myJson));
  });

Dan untuk pengiriman data dengan metode POST, bentuknya seperti ini:

fetch(url, {
        method: "POST", // *GET, POST, PUT, DELETE, etc.
        mode: "cors", // no-cors, cors, *same-origin
        cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
        credentials: "same-origin", // include, *same-origin, omit
        headers: {
            "Content-Type": "application/json",
            // "Content-Type": "application/x-www-form-urlencoded",
        },
        redirect: "follow", // manual, *follow, error
        referrer: "no-referrer", // no-referrer, *client
        body: JSON.stringify(data), // body data type must match "Content-Type" header
    })
    .then(response => response.json()); // parses JSON response into native Javascript objects

Mari kita coba

Berikut ini contoh pengambilan data menggunakan fetch:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Belajar Dasar Ajax dengan Fetch</title>
</head>
<body>
    <h1>Tutorial Ajax dengan Fetch</h1>
    <button onclick="loadContent()">Load Content</button>
    <div id="hasil"></div>

    <script>
        function loadContent(){
            var url = "https://jsonplaceholder.typicode.com/posts/";
            fetch(url).then(response => response.json())
                .then(function(data){
                    var template = data.map(post => {
                        return `
                        <h3>${post.title}</h3>
                        <p>${post.body}</p>
                        <hr>
                        `;
                    });

                    document.getElementById("hasil").innerHTML = template.join('<br>');
                }).catch(function(e){
                    alert("gagal mengambil data");
                });
        }
    </script>
</body>
</html>

Ajax Menggunakan Axios

Axios hampir sama seperti fetch. Bedanya Axios adalah sebuah library sedangkan fetch adalah API yang tersedia di web browser.

Axios juga sama-sama bisa digunakan di web browser dan Nodejs.

Contoh AJAX dengan Axios:

axios.get('https://jsonplaceholder.typicode.com/posts/')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .then(function () {
    // always executed
  });

Mari kita coba dalam HTML:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Tutorial AJAX dengan AXIOS</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <h1>Tutorial AJAX dengan AXIOS</h1>
    <button id="btn-load" onclick="loadContent()">Load Content</button>
    <div id="result"></div>

    <script>
        function loadContent() {
            document.getElementById("btn-load").innerHTML = "loading...";
            document.getElementById("btn-load").setAttribute("disabled", "true");
            axios.get('https://jsonplaceholder.typicode.com/posts/')
                .then(function (response) {
                    var template = response.data.map(post => {
                        return `
                        <h3>${post.title}</h3>
                        <p>${post.body}</p>
                        <hr>
                        `
                    }).join("");

                    document.getElementById("result").innerHTML = template;
                })
                .catch(function (error) {
                    // handle error
                    console.log(error);
                })
                .then(function () {
                    document.getElementById("btn-load").innerHTML = "Done";
                    document.getElementById("btn-load").removeAttribute("disabled");
                });
        }
    </script>
</body>

</html>

Jadi Cara mana yang paling bagus?

Tidak ada yang paling bagus dan jelek, di sini semuanya sama-sama bagus.

Tinggal kita saja yang menentukan, lebih nyaman pakai yang mana.

Kalau saya, lebih suka menggunakan fetch dari pada XMLHttpReques, JQuery, dan Axios.

Memahami Event Handler pada Javascript

Pada paradigma pemrograman 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 mempelajari 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 button diklik, kita bisa jalankan fungsi untuk melakukan sesuatu.

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.

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.

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 addEventListerner() 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 DOM pada materi sebelumnya.

Nah, untuk meng-handle sebuah event dengan object DOM. Kita harus memanggil method addEventLisnter().

Perhatikan, penulisan nama event ditulis tanpa menggunakan on. Jadi, misalnya kita ingin meng-handle event klik, maka cukup tulis click saja.

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

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

Ouya, parameter e pada fungsi adalah parameter yang merupakan object event. Jadi kita bisa mengambil data dari object yang mengirim event dari parameter e. Pada contoh ini, object pengirimnya adalah button.

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 latihan_event. Folder ini akan kita pakai untuk menyimpan file latihan.

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 alert().

Oh iya, jika kamu belum tahu tentang dialog di Javascript, silakan baca materi sebelumnya tentang dialog-dialog pada javascript.

Oke lanjut ke contoh..

Buatlah file baru dengan nama event-click.html, 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>

Selain event click ada juga event dblclick untuk double klik.

Mari kita coba!

Buatlah file baru dengan nama event-dblclick.html, 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("Terima kasih, kamu sudah klik 2x");
    });
  </script>
</body>
</html>

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

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;

Mari kita coba latihan!

Buatlah file baru dengan nama mouse-event.html, 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>

Secara kasat mata, event mouseenter dan mouseover terlihat sama. Namun, sebenarnya mouseover terjadi setelah mouseenter.

Event Keyboard

Berikut ini 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;

Mari kita coba!

Buatlah file baru dengan nama event-key.html 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>

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 event-change.html, 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 change pada elemen tersebut.

Event pada Form

Ada 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;

Mari kita coba!

Buatlah file baru dengan nama event-form.html 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>

Pada contoh ini kita menggunakan parameter event 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!`;
});

Parameter event sebenarnya bisa kita ganti apa aja, tapi orang biasanya pakai e atau event.

Kemudian di dalam fungsi ini kita menjalankan:

1	event.preventDefault();

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

Nah, biasanya pada event submit form akan mengirim data dan melakukan reload page.

Biar ini tidak dilakukan, maka kita harus menggunakan method preventDefault(). 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 new Event();
Mendengarkan event dengan method addEventListener();
Memicu atau trigger event dengan method dispatchEvent().

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 custom-event.html, 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 Custom Event</title>
</head>

<body>
  <div id="message" style="display: none; background: lightgreen;">
    Pendaftaran berhasil
  </div>
  <button id="btn-submit">Daftar Sekarang</button>
  <script>
    // membuat object custom event
    const eventRegisterComplete = new Event('register-complete');

    // membuat object element dom
    const messageElement = document.getElementById('message');
    const btnSubmit = document.getElementById('btn-submit');

    // handle untuk custom event  
    document.addEventListener('register-complete', function (e) {
      messageElement.style.display = "flex";
    });

    // handle untuk event klik pada button
    btnSubmit.addEventListener('click', function (e) {
      // trigger custom event register-complete
      document.dispatchEvent(eventRegisterComplete);
    });
  </script>
</body>

</html>

Event register-complete terjadi saat kita klik tombol btnSubmit.

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 dispacthEvent(), maka event tersebut akan di-trigger.

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

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

Terima kasih sudah menyimak tutorial ini.

Semoga bermanfaat dan selamat belajar!