JS

JS Event คืออะไร

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

JS

การเปรียบเทียบ Event Listener vs. On-Event Handler (on...)

JavaScript มี 2 วิธีหลักในการจัดการ Event คือ:

**Event Listener (`.addEventListener()`):** วิธีที่ทันสมัยและยืดหยุ่นกว่า สามารถกำหนดฟังก์ชันตอบสนองได้หลายตัวต่อ 1 Event บน Element เดียวกัน.
**On-Event Handler (Attributes เช่น `onclick`):** วิธีแบบเก่า กำหนดฟังก์ชันตอบสนองได้เพียงตัวเดียว หากกำหนดซ้ำจะแทนที่ตัวเดิม.

1️⃣ Event: click — คลิกปุ่ม

Event Listener (`addEventListener`)

ทำงานเมื่อผู้ใช้คลิก **(ทันสมัยกว่า)**

ผลลัพธ์: (ยังไม่คลิก)

On-Event Handler (`onclick`)

ทำงานเมื่อผู้ใช้คลิก **(แบบเก่า)**

ผลลัพธ์: (ยังไม่คลิก)

โค้ด Event Listener


<button id="btnClick_Listener">คลิกฉันสิ! (Listener)</button>
<p id="clickResult_Listener">ผลลัพธ์: (ยังไม่คลิก)</p>
<script>
    document.getElementById("btnClick_Listener").addEventListener("click", function() {
        document.getElementById("clickResult_Listener").textContent = "คุณคลิก (Listener) แล้ว!";
    });
</script>

โค้ด On-Event Handler


<button onclick="handleClickOnEvent()">คลิกฉันสิ! (On-Event)</button>
<p id="clickResult_OnEvent">ผลลัพธ์: (ยังไม่คลิก)</p>
<script>
    function handleClickOnEvent() {
        document.getElementById("clickResult_OnEvent").textContent = "คุณคลิก (On-Event) แล้ว!";
    }
</script>

2️⃣ Event: mouseover / mouseout — เมื่อเอาเมาส์วางหรือเอาออก

Event Listener (`addEventListener`)

เมื่อวางเมาส์/เอาเมาส์ออก (Listener)

วางเมาส์ที่นี่ (Listener)

สถานะ: -

On-Event Handler (`onmouseover`, `onmouseout`)

เมื่อวางเมาส์/เอาเมาส์ออก (On-Event)

วางเมาส์ที่นี่ (On-Event)

สถานะ: -

โค้ด Event Listener


<div id="hoverBox1">วางเมาส์ที่นี่ (Listener)</div>
<p id="hoverResult1">สถานะ: -</p>
<script>
    const hoverBox1 = document.getElementById("hoverBox1");
    const hoverResult1 = document.getElementById("hoverResult1");

    hoverBox1.addEventListener("mouseover", function() {
        hoverBox1.style.backgroundColor = "orange";
        hoverResult1.textContent = "เมาส์อยู่บนกล่อง (Listener)!";
    });
    hoverBox1.addEventListener("mouseout", function() {
        hoverBox1.style.backgroundColor = "#666";
        hoverResult1.textContent = "สถานะ: -";
    });
</script>

โค้ด On-Event Handler


<div id="hoverBox2" onmouseover="handleMouseOverOnEvent(this)" onmouseout="handleMouseOutOnEvent(this)">วางเมาส์ที่นี่ (On-Event)</div>
<p id="hoverResult2">สถานะ: -</p>
<script>
    function handleMouseOverOnEvent(element) {
        element.style.backgroundColor = "orange";
        document.getElementById("hoverResult2").textContent = "เมาส์อยู่บนกล่อง (On-Event)!";
    }
    function handleMouseOutOnEvent(element) {
        element.style.backgroundColor = "#666";
        document.getElementById("hoverResult2").textContent = "สถานะ: -";
    }
</script>

3️⃣ Event: keyup — เมื่อปล่อยปุ่มคีย์บอร์ด

Event Listener (`addEventListener`)

แสดงปุ่มที่พิมพ์ล่าสุด (Listener)

ปุ่มที่กดล่าสุด: -

On-Event Handler (`onkeyup`)

แสดงปุ่มที่พิมพ์ล่าสุด (On-Event)

ปุ่มที่กดล่าสุด: -

โค้ด Event Listener


<input type="text" id="keyInput_Listener" placeholder="พิมพ์อะไรบางอย่าง (Listener)...">
<p>ปุ่มที่กดล่าสุด: <span id="keyResult_Listener">-</span></p>
<script>
    document.getElementById("keyInput_Listener").addEventListener("keyup", function(event) {
        document.getElementById("keyResult_Listener").textContent = event.key + " (Listener)";
    });
</script>

โค้ด On-Event Handler


<input type="text" id="keyInput_OnEvent" placeholder="พิมพ์อะไรบางอย่าง (On-Event)..." onkeyup="handleKeyUpOnEvent(event)">
<p>ปุ่มที่กดล่าสุด: <span id="keyResult_OnEvent">-</span></p>
<script>
    function handleKeyUpOnEvent(event) {
        document.getElementById("keyResult_OnEvent").textContent = event.key + " (On-Event)";
    }
</script>

JS

ตัวอย่าง Event อื่นๆ (ใช้ Event Listener)

4️⃣ Event: input — พิมพ์ข้อความแบบ Real-time

เมื่อพิมพ์ข้อมูลในช่อง input แสดงข้อความแบบ real-time

คุณพิมพ์ว่า: -

โค้ด Event Listener


<input type="text" id="inputName" placeholder="พิมพ์ชื่อของคุณ..."> 
<p>คุณพิมพ์ว่า: <span id="inputResult">-</span></p> 
<script> 
    document.getElementById("inputName").addEventListener("input", function() { 
        document.getElementById("inputResult").textContent = this.value; 
    }); 
</script>

5️⃣ Event: change — เปลี่ยนค่าใน select หรือ checkbox

เมื่อเปลี่ยนค่าใน select เปลี่ยนสีพื้นหลัง

ตัวอย่างพื้นหลัง

โค้ด Event Listener

 
<select id="colorSelect"> 
    ... options ...
</select> 
<div id="colorBox" ...>ตัวอย่างพื้นหลัง</div> 
<script> 
    document.getElementById("colorSelect").addEventListener("change", function() { 
        let color = this.value; 
        let box = document.getElementById("colorBox"); 
        box.style.backgroundColor = color || "#333";
        box.textContent = color ? "พื้นหลังสี " + color : "ยังไม่ได้เลือกสี"; 
    }); 
</script>

6️⃣ Event: submit — เมื่อส่งฟอร์ม

เมื่อส่งฟอร์ม แสดงชื่อที่กรอก (ป้องกันการรีโหลดหน้าด้วย `event.preventDefault()`)

โค้ด Event Listener

 
<form id="formDemo"> 
    ... inputs and button ...
</form> 
<p id="formResult"></p> 
<script> 
    document.getElementById("formDemo").addEventListener("submit", function(event) { 
        event.preventDefault(); // ป้องกันการ reload หน้า 
        const name = document.getElementById("formName").value; 
        document.getElementById("formResult").textContent = "ส่งข้อมูลสำเร็จ: " + name; 
    }); 
</script>

7️⃣ Event: load — เมื่อหน้าเว็บโหลดเสร็จ

เมื่อหน้าเว็บโหลดเสร็จ แสดงข้อความ “โหลดเสร็จแล้ว”

โค้ด Event Listener

 
<p id="loadResult"></p> 
<script> 
    window.addEventListener("load", function() { 
        document.getElementById("loadResult").textContent = "หน้าเว็บโหลดเสร็จแล้ว ✅"; 
    }); 
</script>