Pengendalian Acara dalam JavaScript

Articles

Artikel ini menerangkan pengendalian acara dalam 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>

Pengendalian Acara dalam JavaScript

Pengendalian acara dalam JavaScript adalah satu mekanisme untuk melaksanakan tindakan tertentu sebagai tindak balas kepada operasi pengguna (seperti klik dan input papan kekunci) atau tindakan pelayar. Dengan menetapkan pendengar acara, anda boleh mencipta laman web yang dinamik dan interaktif.

Asas-asas Acara

Acara berlaku sebagai tindak balas kepada operasi pengguna dan tindakan pelayar. Apabila acara berlaku, pengendali acara yang berkaitan (fungsi) akan dilaksanakan. Sebagai contoh, terdapat acara seperti berikut:.

Klik (click)
Input Papan Kekunci (keydown, keyup)
Pergerakan Tetikus (mousemove, mouseover)
Penghantaran Borang (submit)
Halaman Selesai Dimuatkan (DOMContentLoaded)
Tatal (scroll)

Menambah Pendengar Acara

Pendengar acara ditetapkan menggunakan kaedah addEventListener(). Kaedah ini memanggil fungsi tertentu apabila acara yang ditentukan berlaku.

Sintaks Asas `addEventListener()`

1element.addEventListener(event, handler);

element ialah elemen HTML yang memantau peristiwa tersebut.
event ialah nama peristiwa (contohnya, click).
handler ialah fungsi yang akan dilaksanakan apabila peristiwa tersebut berlaku.

Objek Acara

Apabila sesuatu acara berlaku, JavaScript akan menghantar objek acara yang mengandungi butiran acara kepada pengendali acara. Objek ini mengandungi maklumat seperti elemen mana yang mencetuskan acara dan kekunci mana yang ditekan.

Contoh: Menggunakan Objek Acara

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});

Kod ini menggunakan objek peristiwa untuk memaparkan maklumat terperinci dan elemen yang diklik di konsol apabila butang ditekan.

Acara Tipikal

Acara Klik

Acara click berlaku apabila pengguna mengklik pada elemen.

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

Kod ini memaparkan mesej di konsol apabila elemen diklik.

Acara Papan Kekunci

Acara keydown dan keyup berlaku apabila pengguna menekan atau melepaskan kekunci. Anda boleh menggunakan event.key untuk melihat kekunci mana yang ditekan.

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

Kod ini memaparkan nama kekunci di konsol apabila pengguna menekan sesuatu kekunci.

Acara Tetikus

Acara mousemove dan mouseover berlaku pada pergerakan tetikus dan apabila melayang.

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

Kod ini memaparkan kedudukan (koordinat X dan Y) di konsol setiap kali tetikus digerakkan.

Acara Borang

Acara yang berkaitan dengan borang termasuk submit dan input. Acara submit berlaku apabila borang dihantar dan biasanya menyebabkan halaman dimuat semula, namun event.preventDefault() sering digunakan untuk mengelakkannya.

Contoh: Mengelakkan pemuatan semula halaman pada penghantaran borang

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});

Kod ini menghalang halaman daripada dimuat semula apabila borang dihantar dan memaparkan mesej di konsol sebagai ganti.

Perambatan Acara (Bubbling dan Capturing)

Acara merebak melalui dua peringkat: fasa capturing, yang bergerak dari elemen induk ke elemen anak, dan fasa bubbling, yang bergerak dari elemen anak ke elemen induk.

Bubbling Acara

Secara lalai, acara berlaku pada elemen yang paling dalam dan merebak ke luar. Ini dipanggil 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, apabila anda mengklik butang, acara butang berlaku dahulu, diikuti acara elemen induk.

Capturing Acara

Dengan menyatakan true sebagai argumen ketiga dalam addEventListener(), anda boleh mengendalikan acara dalam fasa capturing.

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

Kod ini mengendalikan peristiwa klik pada elemen induk dalam fasa penangkapan dan memaparkan mesej di konsol.

Mengelakkan Perambatan dengan `stopPropagation()`

Anda boleh menghentikan peristiwa daripada merebak menggunakan event.stopPropagation().

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

Kod ini menghalang peristiwa daripada tersebar apabila butang diklik dan memaparkan mesej di konsol.

Menghapuskan Peristiwa

Anda boleh menghapuskan pendengar peristiwa menggunakan removeEventListener(). Untuk menghapuskan pendengar peristiwa, anda memerlukan rujukan kepada 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

Kod ini membuang pendengar acara klik pada butang supaya ia tidak lagi dikendalikan apabila diklik.

Peristiwa Tersuai

Dalam JavaScript, anda boleh mencipta dan mencetuskan peristiwa tersuai selain peristiwa standard. Gunakan pembina 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);

Kod ini mencipta dan menghantar acara tersuai myCustomEvent, dan memaparkan maklumatnya di konsol.

Ringkasan

Pengendalian acara ialah elemen penting untuk meningkatkan interaktiviti aplikasi web. Dengan memanfaatkan komponen pengendalian acara, anda boleh menyediakan pengalaman pengguna yang lebih fleksibel dan canggih.

Pendengar Peristiwa: Gunakan addEventListener() untuk menetapkan pengendali peristiwa pada elemen.
Objek Peristiwa: Apabila satu peristiwa berlaku, satu objek peristiwa akan diteruskan yang boleh digunakan untuk mendapatkan maklumat terperinci.
Penyebaran Peristiwa: Peristiwa merebak dalam dua fasa: bubbling dan capturing.
Peristiwa Borang dan Peristiwa Tersuai: Anda boleh mengendalikan pengajuan borang dan peristiwa tersuai anda sendiri.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video

Shadow DOM dalam JavaScript

Pengendalian Acara dalam JavaScript

YouTube Video

Pengendalian Acara dalam JavaScript

Asas-asas Acara

Menambah Pendengar Acara

Sintaks Asas addEventListener()

Objek Acara

Contoh: Menggunakan Objek Acara

Acara Tipikal

Acara Klik

Acara Papan Kekunci

Acara Tetikus

Acara Borang

Contoh: Mengelakkan pemuatan semula halaman pada penghantaran borang

Perambatan Acara (Bubbling dan Capturing)

Bubbling Acara

Contoh: Contoh Bubbling

Capturing Acara

Mengelakkan Perambatan dengan stopPropagation()

Menghapuskan Peristiwa

Peristiwa Tersuai

Ringkasan

YouTube Video

Sintaks Asas `addEventListener()`

Mengelakkan Perambatan dengan `stopPropagation()`