Cara menggunakan WINDOW.DOJOREQUIRE pada JavaScript

Question

Banyak situs Web Internet berisi JavaScript, bahasa pemrograman scripting yang berjalan di browser web untuk membuat fitur tertentu pada halaman web berfungsi. Jika JavaScript telah dinonaktifkan dalam browser Anda, konten atau fungsionalitas halaman web dapat dibatasi atau tidak tersedia. Artikel ini menjelaskan langkah-langkah untuk mengaktifkan JavaScript di browser web

Informasi lebih lanjut

Internet Explorer

Untuk mengizinkan semua situs web dalam zona Internet menjalankan skrip dalam Internet Explorer

Pada menu browser web, klik Alat atau ikon "Alat" (yang terlihat seperti roda gigi), dan pilih Opsi Internet
Saat jendela "Opsi Internet" terbuka, pilih tab Keamanan
Pada tab "Keamanan", pastikan zona Internet dipilih, lalu klik "Level Kustom". tombol
Di kotak dialog Pengaturan Keamanan – Zona Internet, klik Aktifkan untuk Skrip Aktif di bagian Skrip.
Ketika "Peringatan. jendela terbuka dan bertanya, "Apakah Anda yakin ingin mengubah pengaturan untuk zona ini?" pilih Ya
Klik OK di bagian bawah jendela Opsi Internet untuk menutup dialog
Klik tombol Segarkan untuk menyegarkan halaman dan menjalankan skrip

Untuk mengizinkan skrip di situs web tertentu, sambil membiarkan skrip dinonaktifkan di zona Internet, tambahkan situs Web tertentu ke zona Situs tepercaya

Pada menu browser web, klik Alat, atau ikon "Alat" (yang terlihat seperti roda gigi) dan pilih Opsi Internet
Saat jendela "Opsi Internet" terbuka, pilih tab Keamanan
Pada tab "Keamanan", pilih zona Situs Tepercaya, lalu klik tombol Situs
Untuk situs web yang ingin Anda izinkan pembuatan skrip, masukkan alamat di dalam kotak teks Tambahkan situs web ini ke zona dan klik Tambahkan. Catatan. Jika alamat tidak dimulai dengan "https. ", Anda harus menghapus centang "Memerlukan verifikasi server (https. ) untuk semua situs di zona ini".
Klik Tutup lalu klik OK di bagian bawah jendela Opsi Internet untuk menutup dialog
Klik tombol Segarkan untuk menyegarkan halaman dan menjalankan skrip

Google Chrome

Untuk mengaktifkan JavaScript di Google Chrome, tinjau dan ikuti petunjuk yang diberikan di Aktifkan JavaScript di browser Anda untuk melihat iklan di situs Anda

Firefox Mozilla Corporation

Untuk mengaktifkan JavaScript di Firefox, tinjau dan ikuti petunjuk yang diberikan di pengaturan JavaScript untuk halaman web interaktif

Dalam paradigma event-driven programming, kita dituntut untuk membuat alur program berdasarkan event-event yang sedang terjadi di dalam program

Javascript sendiri mendukung pemrograman berbasis peristiwa, itulah sebabnya ada fitur Acara di Javascript

Nah pada tutorial kali ini kita akan belajar tentang Event di Javascript

Suka

Apa itu Acara?

Bagaimana cara membuat acara?

dan bagaimana cara membuat acara khusus?

Mari kita mulai

Apa itu Acara?

Acara secara harfiah berarti acara

Di Javascript

Event adalah kejadian yang terjadi pada halaman web

Peristiwa yang dimaksud di sini adalah aktivitas yang dilakukan di halaman web

Contohnya seperti

Pengguna menggulir;
Pengguna mengklik elemen tertentu;
Halaman web dimuat;
Formulir dikirimkan;
dll.

Kami dapat melakukan tindakan tertentu untuk menanggapi acara tersebut

Sebagai contoh

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 dapat menjalankan fungsi untuk melakukan sesuatu

Bisakah Anda memberi saya contoh?

Oke, mari kita bicara

Cara Menangani Acara di Javascript

Ada dua cara yang biasa dilakukan untuk menangani 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 tindakan saat acara mengklik suatu elemen. Atribut ini dapat 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 hafalkan, karena jumlahnya cukup banyak. Kalau lupa, lihat saja referensinya di MDN Web Docs

Cara Kedua. Metode addEventListener()

Metode

<!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 adalah metode yang ditemukan pada objek DOM. Objek ini mewakili elemen HTML dalam Javascript

Jika Anda belum mengetahui apa itu DOM, saya sarankan untuk membacanya terlebih dahulu

Apa itu DOM dalam Javascript?

Nah, untuk menangani event dengan objek DOM. Kita harus memanggil metode

<!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 menangani event click, maka tulis saja

<!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

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

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

Ya, 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 objek event. Jadi kita bisa mengambil data dari objek yang mengirimkan 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. Dalam contoh ini, objek pengirim 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 opsional, kami bisa memberikannya, kami tidak bisa

Sudahkah Anda mengerti sejauh ini?

Untuk lebih memahami, mari kita coba praktekkan

Latihan. Menangani Acara di Javascript

Kita akan mencoba beberapa event yang biasa digunakan, seperti click, hover, keyup, keydown, change, dll

Buat 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. Kami akan menggunakan folder ini untuk menyimpan file pelatihan

1. Klik Acara

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

Kami dapat memberikan tindakan 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 ya, kalau belum tahu tentang dialog di Javascript, silahkan baca

Jenis-jenis Dialog dalam Javascript yang wajib diketahui

Oke langsung ke contohnya

Buat 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, 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">
  <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>

Hasil

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 click

Mari mencoba

Buat 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, lalu 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>

_

Hasil

Saat kita klik sekali, event tidak akan terjadi. Tapi saat kita klik dua kali, event terjadi dan fungsi dijalankan

2. Tikus Acara

Selain diklik, berikut adalah kejadian yang bisa terjadi akibat 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 (mengarahkan) saat penunjuk berada di atas 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>

2 saat penunjuk mendekati 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 detik pointer menjauh dari elemen;

Mari kita coba latihannya

Buat 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, 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">
  <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>

Hasil

Secara visual, peristiwa

<!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 ________21______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. Papan Ketik Acara

Berikut beberapa kejadian 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. peristiwa 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 ketika kita berhenti menekan (melepaskan) 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. peristiwa saat kita mulai menekan tombol tertentu;

Mari mencoba

Buat 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 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">
  <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>

Hasil

4. Perubahan Acara

Perubahan acara biasanya terjadi pada elemen input seperti teks input, radio, kotak centang, opsi pilih, dll. Perubahan acara akan terjadi ketika nilai elemen berubah

Mari mencoba

Buat 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, lalu 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>

Dalam contoh ini, kami membuat elemen pilihan-pilihan, lalu kami mendengarkan acara

<!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

Jadi hasilnya

5. Acara di Formulir

Ada beberapa kejadian yang biasanya terjadi pada form tersebut

<!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 kami mengirimkan atau mengirim data pada formulir;

<!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 kami menghapus data di formulir;

Mari mencoba

Buat 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 lalu 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>

Hasil

Dalam contoh ini, kami 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 objek pengirim acara, yaitu

<!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 diganti dengan apa saja, tapi orang biasanya 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>

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 dalam fungsi ini kita jalankan

event.preventDefault();

Ini berfungsi untuk mencegah tindakan default dilakukan pada acara acara. Dalam contoh ini, kami mendengarkan acara

<!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 mengirimkan data dan memuat ulang halaman

Biarlah ini tidak dilakukan, maka kita harus menggunakan metode

<!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 melakukan tindakan yang kita inginkan

Nah itulah beberapa contoh event training di Javascript

Selanjutnya kita akan belajar tentang cara membuat custom event

Buat Acara Khusus

Selain mendengarkan event yang ada, kita juga bisa membuat event sendiri

Ada tiga langkah yang harus dilakukan saat membuat custom event.

Buat objek 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 peristiwa dengan metode

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

Pemicu atau pemicu peristiwa dengan metode ________38______8

Berikut adalah 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);

Untuk lebih memahami, mari kita coba latihan

Buat 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, 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">
  <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

Hasil

Peristiwa

<!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 mengklik 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 demikian?

Ini karena kami memicu acara di sana. Selain mengklik, kami juga memicu acara di mana pun kami mau

Yang penting kita memanggil metode

<!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 akan terpicu

Apa berikutnya?

Event akan sering digunakan dalam pembuatan aplikasi dengan Javascript. Selain browser, acara juga tersedia di Nodejs

Selanjutnya silahkan lebih banyak berlatih menggunakan event lain dan coba juga pelajari Event di Nodejs

Bagaimana cara membuat JavaScript berfungsi?

Browser Android .

Buka browser bawaan Android

Pilih Menu

Pilih Lainnya lalu Pengaturan

Pilih opsi Aktifkan JavaScript

Apa cara yang benar untuk menggunakan file JavaScript dalam HTML?

Anda dapat langsung menambahkan JavaScript di HTML dengan menggunakan tag yang menyertakan semua kode JS yang Anda tulis yang menyertakan semua kode JS yang Anda tulis . Kode JS yang dapat ditambahkan. antara tag

Bagaimana JavaScript berjalan di browser web?

Aktifkan JavaScript di browser Anda .

Buka Chrome di komputer Anda

Klik. Pengaturan

Klik Keamanan dan Privasi

Klik Setelan situs

Klik JavaScript

Pilih Situs dapat menggunakan JavaScript

Bagaimana cara mendeklarasikan variabel dalam JavaScript?

Cara membuat variabel yang biasa digunakan dalam javascript adalah menggunakan kata kunci var diikuti dengan nama variabel dan nilainya . Contoh. var title = "Pelajari Pemrograman Javascript"; . "Pelajari Pemrograman Javascript".

kode javascript