การจัดการเหตุการณ์ใน JavaScript

Articles

บทความนี้อธิบายการจัดการเหตุการณ์ใน 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>

การจัดการเหตุการณ์ใน JavaScript

การจัดการเหตุการณ์ใน JavaScript เป็นกลไกในการดำเนินการเฉพาะเมื่อมีปฏิบัติการของผู้ใช้ (เช่น คลิกและป้อนข้อมูลจากคีย์บอร์ด) หรือการกระทำของเบราว์เซอร์ ด้วยการตั้งค่าตัวฟังเหตุการณ์ คุณสามารถสร้างเว็บเพจแบบไดนามิกและมีการโต้ตอบได้

พื้นฐานของเหตุการณ์

เหตุการณ์จะเกิดขึ้นเมื่อมีการปฏิบัติของผู้ใช้หรือการกระทำของเบราว์เซอร์ เมื่อเกิดเหตุการณ์ขึ้น ตัวจัดการเหตุการณ์ (ฟังก์ชัน) ที่เกี่ยวข้องจะถูกเรียกใช้งาน ตัวอย่างเช่น มีเหตุการณ์ดังต่อไปนี้:

คลิก (click)
การป้อนข้อมูลจากคีย์บอร์ด (keydown, keyup)
การเคลื่อนที่ของเมาส์ (mousemove, mouseover)
การส่งฟอร์ม (submit)
การโหลดหน้าเว็บเสร็จสมบูรณ์ (DOMContentLoaded)
การเลื่อน (scroll)

การเพิ่มตัวฟังเหตุการณ์

ตัวฟังเหตุการณ์สามารถตั้งค่าได้โดยใช้เมธอด addEventListener() เมธอดนี้จะเรียกฟังก์ชันเฉพาะเมื่อเหตุการณ์ที่กำหนดเกิดขึ้น

ไวยากรณ์พื้นฐานของ `addEventListener()`

1element.addEventListener(event, handler);

element คือองค์ประกอบ HTML ที่ตรวจสอบเหตุการณ์
event คือชื่อของเหตุการณ์ (เช่น click)
handler คือฟังก์ชันที่จะถูกเรียกใช้เมื่อเหตุการณ์เกิดขึ้น

ออบเจกต์เหตุการณ์

เมื่อเกิดเหตุการณ์ JavaScript จะส่ง อ็อบเจกต์เหตุการณ์ (event object) ที่มีรายละเอียดของเหตุการณ์ไปยังตัวจัดการเหตุการณ์ อ็อบเจกต์นี้มีข้อมูล เช่น อิลิเมนต์ใดที่ทำให้เกิดเหตุการณ์ และปุ่มใดที่ถูกกด

ตัวอย่าง: การใช้อ็อบเจกต์เหตุการณ์

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

โค้ดนี้ใช้วัตถุ event เพื่อแสดงข้อมูลโดยละเอียดและองค์ประกอบที่ถูกคลิกในคอนโซลเมื่อปุ่มถูกคลิก

เหตุการณ์ทั่วไป

เหตุการณ์การคลิก

เหตุการณ์ click เกิดขึ้นเมื่อผู้ใช้คลิกที่อิลิเมนต์

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

โค้ดนี้จะแสดงข้อความในคอนโซลเมื่อองค์ประกอบถูกคลิก

เหตุการณ์คีย์บอร์ด

เหตุการณ์ keydown และ keyup เกิดขึ้นเมื่อผู้ใช้กดหรือปล่อยปุ่มคีย์บอร์ด คุณสามารถใช้ event.key เพื่อดูว่าปุ่มใดที่ถูกกด

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

โค้ดนี้จะแสดงชื่อปุ่มกดในคอนโซลเมื่อผู้ใช้กดปุ่มบนแป้นพิมพ์

เหตุการณ์เมาส์

เหตุการณ์ mousemove และ mouseover เกิดขึ้นเมื่อมีการเคลื่อนที่ของเมาส์หรือการเลื่อนผ่าน

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

โค้ดนี้จะแสดงตำแหน่ง (ค่าพิกัด X และ Y) ในคอนโซลทุกครั้งที่เคลื่อนเมาส์

เหตุการณ์แบบฟอร์ม

เหตุการณ์ที่เกี่ยวข้องกับแบบฟอร์มประกอบด้วย submit และ input เหตุการณ์ submit เกิดขึ้นเมื่อมีการส่งแบบฟอร์มและมักทำให้หน้าโหลดซ้ำ แต่โดยทั่วไปจะใช้ event.preventDefault() เพื่อป้องกันเหตุการณ์นี้

ตัวอย่าง: การป้องกันการโหลดหน้าซ้ำเมื่อส่งแบบฟอร์ม

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

โค้ดนี้จะป้องกันไม่ให้หน้าถูกโหลดซ้ำเมื่อส่งแบบฟอร์ม และจะแสดงข้อความในคอนโซลแทน

การกระจายเหตุการณ์ (Bubbling และ Capturing)

เหตุการณ์จะกระจายผ่านสองขั้นตอน: ขั้นตอนการจับ (capturing) ที่กระจายจากอิลิเมนต์แม่ไปยังอิลิเมนต์ลูก และขั้นตอนการฟอง (bubbling) ที่กระจายจากอิลิเมนต์ลูกไปยังอิลิเมนต์แม่

การฟองของเหตุการณ์

โดยค่าเริ่มต้น เหตุการณ์จะเกิดที่อิลิเมนต์ที่ลึกที่สุดและกระจายออกสู่ด้านนอก สิ่งนี้เรียกว่า 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});

ในตัวอย่างนี้ เมื่อคุณคลิกปุ่ม เหตุการณ์ของปุ่มจะเกิดขึ้นก่อน ตามด้วยเหตุการณ์ของอิลิเมนต์แม่

การจับเหตุการณ์

โดยการระบุ true เป็นอาร์กิวเมนต์ที่สามใน addEventListener() คุณสามารถจัดการเหตุการณ์ในขั้นตอนการจับได้

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

โค้ดนี้จัดการเหตุการณ์คลิกขององค์ประกอบหลักในช่วง capturing และแสดงข้อความในคอนโซล

การป้องกันการกระจายด้วย `stopPropagation()`

คุณสามารถหยุดเหตุการณ์จากการแพร่กระจายโดยใช้ event.stopPropagation()

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

โค้ดนี้ป้องกันเหตุการณ์ไม่ให้แพร่กระจายเมื่อปุ่มถูกคลิก และแสดงข้อความในคอนโซล

การลบเหตุการณ์

คุณสามารถลบตัวฟังเหตุการณ์ได้โดยใช้ removeEventListener() ในการลบตัวฟังเหตุการณ์ คุณจำเป็นต้องอ้างอิงถึงฟังก์ชันที่ระบุใน 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

โค้ดนี้จะลบตัวฟังเหตุการณ์คลิกออกจากปุ่ม ทำให้การคลิกปุ่มจะไม่ได้รับการจัดการอีกต่อไป

เหตุการณ์ที่กำหนดเอง

ใน JavaScript คุณสามารถสร้างและกระตุ้นเหตุการณ์ที่กำหนดเองเพิ่มเติมจากเหตุการณ์มาตรฐาน ใช้คอนสตรัคเตอร์ 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);

โค้ดนี้จะสร้างและส่งเหตุการณ์ที่กำหนดเอง myCustomEvent และแสดงรายละเอียดในคอนโซล

สรุป

การจัดการเหตุการณ์เป็นส่วนสำคัญในการเพิ่มความสามารถในการโต้ตอบของเว็บแอปพลิเคชัน โดยการใช้ส่วนประกอบต่างๆ ของการจัดการเหตุการณ์ คุณสามารถมอบประสบการณ์ผู้ใช้ที่ยืดหยุ่นและซับซ้อนยิ่งขึ้นได้

ตัวฟังเหตุการณ์: ใช้ addEventListener() เพื่อกำหนดตัวจัดการเหตุการณ์บนองค์ประกอบ
ออบเจ็กต์ของเหตุการณ์: เมื่อมีเหตุการณ์เกิดขึ้น ออบเจ็กต์ของเหตุการณ์จะถูกส่งผ่าน ซึ่งคุณสามารถใช้เพื่อรับข้อมูลรายละเอียดได้
การแพร่กระจายของเหตุการณ์: เหตุการณ์จะแพร่กระจายในสองขั้นตอนคือ bubbling และ capturing
เหตุการณ์ของฟอร์มและเหตุการณ์ที่กำหนดเอง: คุณสามารถจัดการการส่งฟอร์มและเหตุการณ์ที่กำหนดเองของคุณได้

คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย

YouTube Video

Shadow DOM ในภาษา JavaScript

การจัดการเหตุการณ์ใน JavaScript

YouTube Video

การจัดการเหตุการณ์ใน JavaScript

พื้นฐานของเหตุการณ์

การเพิ่มตัวฟังเหตุการณ์

ไวยากรณ์พื้นฐานของ addEventListener()

ออบเจกต์เหตุการณ์

ตัวอย่าง: การใช้อ็อบเจกต์เหตุการณ์

เหตุการณ์ทั่วไป

เหตุการณ์การคลิก

เหตุการณ์คีย์บอร์ด

เหตุการณ์เมาส์

เหตุการณ์แบบฟอร์ม

ตัวอย่าง: การป้องกันการโหลดหน้าซ้ำเมื่อส่งแบบฟอร์ม

การกระจายเหตุการณ์ (Bubbling และ Capturing)

การฟองของเหตุการณ์

ตัวอย่าง: ตัวอย่างการฟอง

การจับเหตุการณ์

การป้องกันการกระจายด้วย stopPropagation()

การลบเหตุการณ์

เหตุการณ์ที่กำหนดเอง

สรุป

YouTube Video

ไวยากรณ์พื้นฐานของ `addEventListener()`

การป้องกันการกระจายด้วย `stopPropagation()`