Penanganan Peristiwa di JavaScript

Articles

Artikel ini menjelaskan penanganan peristiwa di JavaScript.

YouTube Video

javascript-html-event.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4  <meta charset="UTF-8">
  5  <title>JavaScript &amp; HTML</title>
  6  <style>
  7    * {
  8        box-sizing: border-box;
  9    }
 10
 11    body {
 12        margin: 0;
 13        padding: 1em;
 14        padding-bottom: 10em;
 15        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 16        background-color: #f7f9fc;
 17        color: #333;
 18        line-height: 1.6;
 19    }
 20
 21    .container {
 22        max-width: 800px;
 23        margin: 0 auto;
 24        padding: 1em;
 25        background-color: #ffffff;
 26        border: 1px solid #ccc;
 27        border-radius: 10px;
 28        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 29    }
 30
 31    .container-flex {
 32        display: flex;
 33        flex-wrap: wrap;
 34        gap: 2em;
 35        max-width: 1000px;
 36        margin: 0 auto;
 37        padding: 1em;
 38        background-color: #ffffff;
 39        border: 1px solid #ccc;
 40        border-radius: 10px;
 41        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 42    }
 43
 44    .left-column, .right-column {
 45        flex: 1 1 200px;
 46        min-width: 200px;
 47    }
 48
 49    h1, h2 {
 50        font-size: 1.2rem;
 51        color: #007bff;
 52        margin-top: 0.5em;
 53        margin-bottom: 0.5em;
 54        border-left: 5px solid #007bff;
 55        padding-left: 0.6em;
 56        background-color: #e9f2ff;
 57    }
 58
 59    button {
 60        display: block;
 61        margin: 1em auto;
 62        padding: 0.75em 1.5em;
 63        font-size: 1rem;
 64        background-color: #007bff;
 65        color: white;
 66        border: none;
 67        border-radius: 6px;
 68        cursor: pointer;
 69        transition: background-color 0.3s ease;
 70    }
 71
 72    button:hover {
 73        background-color: #0056b3;
 74    }
 75
 76    #output {
 77        margin-top: 1em;
 78        background-color: #1e1e1e;
 79        color: #0f0;
 80        padding: 1em;
 81        border-radius: 8px;
 82        min-height: 200px;
 83        font-family: Consolas, monospace;
 84        font-size: 0.95rem;
 85        overflow-y: auto;
 86        white-space: pre-wrap;
 87    }
 88
 89    .highlight {
 90        outline: 3px solid #ffc107; /* yellow border */
 91        background-color: #fff8e1;  /* soft yellow background */
 92        transition: background-color 0.3s ease, outline 0.3s ease;
 93    }
 94
 95    .active {
 96        background-color: #28a745; /* green background */
 97        color: #fff;
 98        box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
 99        transition: background-color 0.3s ease, box-shadow 0.3s ease;
100    }
101  </style>
102</head>
103<body>
104    <div class="container-flex">
105        <div class="left-column">
106            <h2>HTML Sample</h2>
107            <div id="parentDiv">
108                <button id="myButton">Click me</button>
109            </div>
110        </div>
111
112        <div class="right-column">
113            <h2>Form Sample</h2>
114            <form id="myForm">
115                <input type="text" name="username">
116                <button type="submit">Submit</button>
117            </form>
118        </div>
119    </div>
120
121    <div class="container">
122        <h1>JavaScript Console</h1>
123        <button id="executeBtn">Execute</button>
124        <div id="output"></div>
125    </div>
126
127    <script>
128        // Override console.log to display messages in the #output element
129        (function () {
130            const originalLog = console.log;
131            console.log = function (...args) {
132                originalLog.apply(console, args);
133                const output = document.getElementById('output');
134                output.textContent += args.map(String).join(' ') + '\n';
135            };
136        })();
137
138        document.getElementById('executeBtn').addEventListener('click', () => {
139            // Prevent multiple loads
140            if (document.getElementById('externalScript')) return;
141
142            const script = document.createElement('script');
143            script.src = 'javascript-html-event.js';
144            script.id = 'externalScript';
145            //script.onload = () => console.log('javascript-html-event.js loaded and executed.');
146            //script.onerror = () => console.log('Failed to load javascript-html-event.js.');
147            document.body.appendChild(script);
148        });
149    </script>
150</body>
151</html>

Penanganan Peristiwa di JavaScript

Penanganan peristiwa di JavaScript adalah mekanisme untuk menjalankan tindakan tertentu dalam menanggapi operasi pengguna (seperti klik dan input keyboard) atau tindakan browser. Dengan menyiapkan pendengar peristiwa, Anda dapat membuat halaman web yang dinamis dan interaktif.

Dasar-dasar Peristiwa

Peristiwa terjadi sebagai respons terhadap operasi pengguna dan tindakan browser. Ketika suatu peristiwa terjadi, penangan peristiwa (fungsi) yang terkait akan dijalankan. Sebagai contoh, terdapat peristiwa seperti berikut:.

Klik (click)
Input Keyboard (keydown, keyup)
Gerakan Mouse (mousemove, mouseover)
Pengiriman Formulir (submit)
Halaman Selesai Dimuat (DOMContentLoaded)
Gulir (scroll)

Menambahkan Pendengar Peristiwa

Pendengar peristiwa diatur menggunakan metode addEventListener(). Metode ini memanggil fungsi tertentu saat peristiwa yang ditentukan terjadi.

Sintaks Dasar `addEventListener()`

1element.addEventListener(event, handler);

element adalah elemen HTML yang memantau peristiwa (event).
event adalah nama peristiwa (misalnya, click).
handler adalah fungsi yang dijalankan ketika peristiwa terjadi.

Objek Peristiwa

Ketika sebuah peristiwa terjadi, JavaScript memberikan sebuah objek peristiwa yang berisi detail peristiwa ke pengendali peristiwa. Objek ini mencakup informasi seperti elemen mana yang memicu peristiwa dan tombol mana yang ditekan.

Contoh: Menggunakan Objek Peristiwa

1<button id="myButton">Click me</button>

1const button = document.getElementById('myButton');
2
3button.addEventListener('click', (event) => {
4    console.log(event);  // Display event details in the console
5    console.log('Clicked element:', event.target);  // Display the clicked element
6});

Kode ini menggunakan objek event untuk menampilkan informasi detail dan elemen yang diklik di konsol saat tombol diklik.

Peristiwa Umum

Peristiwa Klik

Peristiwa click terjadi ketika pengguna mengklik sebuah elemen.

1element.addEventListener('click', () => {
2    console.log('Clicked');
3});

Kode ini menampilkan pesan di konsol saat elemen diklik.

Peristiwa Keyboard

Peristiwa keydown dan keyup terjadi ketika pengguna menekan atau melepaskan sebuah tombol. Anda dapat menggunakan event.key untuk melihat tombol mana yang ditekan.

1document.addEventListener('keydown', (event) => {
2    console.log(`Key pressed: ${event.key}`);
3});

Kode ini menampilkan nama tombol di konsol saat pengguna menekan tombol.

Peristiwa Mouse

Peristiwa mousemove dan mouseover terjadi saat gerakan mouse dan hover.

1document.addEventListener('mousemove', (event) => {
2    console.log(`Mouse position: X=${event.clientX}, Y=${event.clientY}`);
3});

Kode ini menampilkan posisi (koordinat X dan Y) di konsol setiap kali mouse bergerak.

Peristiwa Formulir

Peristiwa terkait formulir mencakup submit dan input. Peristiwa submit terjadi ketika sebuah formulir dikirim dan biasanya menyebabkan muat ulang halaman, tetapi event.preventDefault() sering digunakan untuk mencegah ini.

Contoh: Mencegah muat ulang halaman saat pengiriman formulir

1<form id="myForm">
2    <input type="text" name="username">
3    <button type="submit">Submit</button>
4</form>

1const form = document.getElementById('myForm');
2
3form.addEventListener('submit', (event) => {
4    event.preventDefault();  // Prevent page reload
5    console.log('Form has been submitted');
6});

Kode ini mencegah halaman dimuat ulang saat formulir dikirimkan dan menampilkan pesan di konsol sebagai gantinya.

Propagasi Peristiwa (Bubbling dan Capturing)

Peristiwa dipropagasi melalui dua tahap: fase capturing, yang berjalan dari elemen induk ke elemen anak, dan fase bubbling, yang berjalan dari elemen anak ke elemen induk.

Peristiwa Bubbling

Secara default, peristiwa terjadi pada elemen terdalam dan dipropagasi keluar. Ini disebut bubbling.

Contoh: Contoh Bubbling

1<div id="parentDiv">
2    <button id="myButton">Click me</button>
3</div>

 1const parent = document.getElementById('parentDiv');
 2const button = document.getElementById('myButton');
 3
 4parent.addEventListener('click', () => {
 5    console.log('Parent element was clicked');
 6});
 7
 8button.addEventListener('click', () => {
 9    console.log('Button was clicked');
10});

Dalam contoh ini, ketika Anda mengklik sebuah tombol, peristiwa tombol terjadi terlebih dahulu, lalu diikuti peristiwa elemen induk.

Peristiwa Capturing

Dengan menentukan true sebagai argumen ketiga dalam addEventListener(), Anda dapat menangani peristiwa pada fase capturing.

1parent.addEventListener('click', () => {
2    console.log('Capturing: Parent element was clicked');
3}, true);

Kode ini menangani peristiwa klik elemen induk pada fase capturing dan menampilkan pesan di konsol.

Mencegah Propagasi dengan `stopPropagation()`

Anda dapat menghentikan perambatan event menggunakan event.stopPropagation().

1button.addEventListener('click', (event) => {
2    event.stopPropagation();  // Stop the event propagation
3    console.log('Button was clicked (no propagation)');
4});

Kode ini mencegah peristiwa menyebar saat tombol diklik dan menampilkan pesan di konsol.

Menghapus Event

Anda dapat menghapus pendengar event menggunakan removeEventListener(). Untuk menghapus pendengar event, Anda memerlukan referensi ke fungsi yang ditentukan dalam addEventListener().

1function handleClick() {
2    console.log('Clicked');
3}
4
5const button = document.getElementById('myButton');
6button.addEventListener('click', handleClick);
7button.removeEventListener('click', handleClick);  // Remove the event listener

Kode ini menghapus pendengar peristiwa klik dari tombol sehingga tidak akan ditangani lagi saat diklik.

Event Kustom

Dalam JavaScript, Anda dapat membuat dan memicu event kustom selain event standar. Gunakan konstruktor CustomEvent.

 1document.addEventListener('myCustomEvent', (event) => {
 2    console.log(event.detail.message);  // Displays "Hello!"
 3});
 4
 5const event = new CustomEvent('myCustomEvent', {
 6    detail: {
 7        message: 'Hello!'
 8    }
 9});
10document.dispatchEvent(event);

Kode ini membuat dan mengirimkan peristiwa kustom myCustomEvent, serta menampilkan detailnya di konsol.

Ringkasan

Penanganan peristiwa merupakan elemen penting untuk meningkatkan interaktivitas aplikasi web. Dengan memanfaatkan komponen penanganan peristiwa, Anda dapat memberikan pengalaman pengguna yang lebih fleksibel dan canggih.

Pendengar Event: Gunakan addEventListener() untuk menetapkan pengendali event pada elemen.
Objek Event: Ketika sebuah event terjadi, sebuah objek event diteruskan yang dapat digunakan untuk memperoleh informasi terperinci.
Perambatan Event: Event merambat dalam dua fase: bubbling dan capturing.
Event Form dan Event Kustom: Anda dapat menangani pengiriman form dan event kustom Anda sendiri.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video

Shadow DOM dalam JavaScript

Penanganan Peristiwa di JavaScript

YouTube Video

Penanganan Peristiwa di JavaScript

Dasar-dasar Peristiwa

Menambahkan Pendengar Peristiwa

Sintaks Dasar addEventListener()

Objek Peristiwa

Contoh: Menggunakan Objek Peristiwa

Peristiwa Umum

Peristiwa Klik

Peristiwa Keyboard

Peristiwa Mouse

Peristiwa Formulir

Contoh: Mencegah muat ulang halaman saat pengiriman formulir

Propagasi Peristiwa (Bubbling dan Capturing)

Peristiwa Bubbling

Contoh: Contoh Bubbling

Peristiwa Capturing

Mencegah Propagasi dengan stopPropagation()

Menghapus Event

Event Kustom

Ringkasan

YouTube Video

Sintaks Dasar `addEventListener()`

Mencegah Propagasi dengan `stopPropagation()`