Event Listener คืออะไร?
event listener เป็นฟังก์ชั่น JavaScript ที่รอเหตุการณ์ที่จะเกิดขึ้นแล้วตอบสนองเหตุการณ์นั้น JavaScript เป็นภาษาโปรแกรมที่นักพัฒนาใช้ในการสร้างหน้าเว็บแบบอินเทอร์แอคทีฟ ฟังก์ชั่น event listener ของ JavaScript ช่วยให้คุณสามารถสร้างการตอบสนองเหตุการณ์ที่กำหนดเอง เช่น การคลิกเมาส์ การกดแป้นพิมพ์ และการปรับขนาดหน้าต่าง กระบวนทัศน์การเขียนโปรแกรมว่าด้วยการรอคอยและการตอบสนองต่อเหตุการณ์ที่เกิดขึ้นแบบเรียลไทม์นี้เรียกว่าการจัดการเหตุการณ์
ไวยากรณ์ของฟังก์ชั่น event listener เป็นอย่างไร?
ฟังก์ชั่น event listener มีลักษณะคล้ายกับฟังก์ชั่น JavaScript อื่น ๆ เมื่อเปิดใช้งาน มันจะดำเนินการตามที่จำเป็นเพื่อการประมวลผลเหตุการณ์ ตัวอย่างเช่น ฟังก์ชัน event listener สามารถเปลี่ยนข้อความที่แสดง รวบรวมข้อมูลจากแบบฟอร์มการลงทะเบียน หรือเก็บข้อมูลลงในฐานข้อมูลได้
ไวยากรณ์ event listener
ฟังก์ชั่น event listener ต่อไปนี้ไวยากรณ์ JavaScript ที่เหมาะสม เช่นในตัวอย่างถัดไป
function RespondMouseClick() {
document.getElementById("textdisplay1").innerHTML += "MouseClick happened" ;
}
ตัวอย่างนี้แสดงถึงฟังก์ชั่น event listener ชื่อ RespondMouseClick เป็นเรื่องปกติที่จะเขียนชื่อฟังก์ชั่นที่จะสะท้อนถึงวัตถุประสงค์ของ event listener ในฟังก์ชั่นนี้ คุณจะเขียนโค้ดเพื่อกระทำการบางอย่างที่เฉพาะเจาะจง เมื่อมีเหตุการณ์เกิดขึ้น ในตัวอย่างนี้ฟังก์ชั่นจะเติมข้อความ MouseClick happened ไปยังเอเลเมนต์ HTML textdisplay1
ไวยากรณ์ event handler
อีกวิธีหนึ่งคือ คุณอาจใช้ฟังก์ชั่น event handler เพื่อตอบสนองต่อเหตุการณ์ที่กระตุ้นการทำงาน เช่น ในตัวอย่างต่อไปนี้
function eventHandler(event) {
if (event.type === "fullscreenchange") {
console.log (“full screen toggle”);
} else {
console.log (“full screen error”);
}
}
สิ่งนี้จะช่วยให้คุณสามารถจัดการเหตุการณ์หลายประเภทจากเอเลเมนต์ที่กำหนด โดยใช้ฟังก์ชั่นเดียว
ยกตัวอย่างเช่น คุณสามารถลงทะเบียน event listener เพื่อจัดการ event บล็อกเชนทุกประเภทบนแอปพลิเคชันที่อาศัยเหตุการณ์ สำหรับข้อมูลเพิ่มเติม โปรดอ่านเกี่ยวกับแอปพลิเคชันบนพื้นฐานของเหตุการณ์กับ Amazon Managed Blockchain
คุณจะเพิ่ม event listener ได้อย่างไร?
event listener จะมีผลใช้งานหลังจากที่คุณเพิ่มมันไปยังเอเลเมนต์ JavaScript ที่เกี่ยวข้องเท่านั้น คุณสามารถใช้ไวยากรณ์เช่นนี้เพื่อดำเนินการดังกล่าว
- element.addEventListener(event, listener);
- element.addEventListener(event, listener, useCapture);
- element.addEventListener(event, listener, options);
ตัวอย่างเช่น นักพัฒนาสามารถเรียกฟังก์ชั่นต่อไปนี้เพื่อเชื่อมโยง event listener สำหรับเหตุการณ์ click ไปยังเอเลเมนต์ button
btn.addEventListener("click", RespondMouseClick);
นอกจากนี้คุณยังสามารถเพิ่ม event listener หลายรายการเข้ากับออบเจกต์เหตุการณ์ที่เฉพาะเจาะจงโดยไม่ต้องแทนที่ event listener ที่มีอยู่เดิม
ตัวอย่างเช่น Amazon Web Services (AWS) ช่วยให้นักพัฒนาสามารถพ่วงการเรียกกลับหลายรายการกับออปเจ็กต์ AWS.Request ได้ สำหรับข้อมูลเพิ่มเติม อ่านวิธีการใช้ออปเจ็กต์ request กับ event listener ใน AWS
พารามิเตอร์สำหรับการเพิ่มเหตุการณ์
นี่คือคำอธิบายของพารามิเตอร์ในไวยากรณ์ข้างต้น:
- พารามิเตอร์เหตุการณ์ เป็นเหตุการณ์ใน JavaScript ใด ๆ ที่ถูกต้อง เช่น การคลิก การเปลี่ยนแปลง การวางเมาส์เหนือวัตถุ การกดแป้นพิมพ์ และการโหลดหน้า
- พารามิเตอร์ listener คือฟังก์ชันเรียกกลับเหตุการณ์ หรือฟังก์ชั่น JavaScript ที่สร้างมาเพื่อตอบสนองต่อเหตุการณ์ที่เฉพาะเจาะจง
- พารามิเตอร์ useCapture เป็นพารามิเตอร์ ที่เป็นทางเลือก ที่ระบุโหมดการแพร่เหตุการณ์ พารามิเตอร์นี้จะรับค่าบูลีน โดยที่ค่า true จะเป็นการเปิดใช้งา capturing ในขณะที่ค่า false จะเปิดใช้งาน bubbling ค่าเริ่มต้นของพารามิเตอร์นี้ถูกตั้งค่าเป็น false
- พารามิเตอร์ตัวเลือก ประกอบด้วยค่าตัวเลือกหลายค่า รวมทั้งโหมดการจับเหตุการณ์และสัญญาณการปฏิเสธที่แสดงของพฤติกรรมของ Listener
เราสามารถลบ event listener ได้อย่างไร?
event listener ยังคงทำงานอยู่จนกว่าคุณจะลบมันออกจากเอเลเมนต์ JavaScript ที่เชื่อมโยงกัน คุณสามารถใช้ไวยากรณ์ต่อไปนี้เพื่อดำเนินการดังกล่าว
element.removeEventListener(type, listener, useCapture);
พารามิเตอร์การลบ event listener คล้ายกันกับพารามิเตอร์ที่คุณใช้เพิ่ม event listener เมื่อคุณลบ event listener ใดๆ คุณต้องระบุ ชนิด, listener และพารามิเตอร์ UseCapture ที่ตรงกัน มิฉะนั้น event listener จะยังคงมีผลและถูกเรียกต่อไปสำหรับเหตุการณ์ในอนาคต
ตัวอย่างเช่น คุณสามารถเพิ่มเหตุการณ์ด้วยโค้ดต่อไปนี้
button.addEventListener("click", RespondMouseClick, true);
แต่การใช้โค้ดต่อไปนี้จะไม่สามารถลบ event listener ได้สำเร็จ นั่นเป็นเพราะค่าของ UseCapture ต่างจากค่าที่ลงทะเบียนไว้กับออปเจ็กต์ button
button.removeEventListener("click", RespondMouseClick, false);
เพื่อลบเหตุการณ์ออกและป้องกันไม่ให้มีการเรียกอีก คุณสามารถใช้โค้ดต่อไปนี้
button.removeEventListener("click", RespondMouseClick, true);
event listener แบบซ้อนทำงานอย่างไร?
event listener ที่ซ้อนกันคือตัวจัดการเหตุการณ์ที่เพิ่มไปยังเอเลเมนต์ HTML ที่เลเยอร์ของลำดับชั้นที่แตกต่างกัน
ในตัวอย่าง HTML ต่อไปนี้ document ประกอบด้วยเอเลเมนต์หลักพื้นฐาน ในขณะที่เอเลเมนต์หลักประกอบด้วยเอเลเมนต์รอง
<div class="document">
<div class="parent">
<div class="child"></div>
</div>
</div>
เว็บแอปพลิเคชันที่ซับซ้อนอาจจะมีเลเยอร์หลัก-รอง หลายชั้น ซึ่งมีฟังก์ชั่น Event Listener ในแต่ละชั้นของตัวเอง เมื่อมีเหตุการณ์อันหนึ่งเกิดขึ้น มันจะทริกเกอร์ event listener ในชั้นที่แตกต่างกันตามลำดับที่เฉพาะเจาะจง ตัวอย่างเช่น การคลิกที่ button ย่อยจะแพร่เหตุการณ์ไปยัง handler ทั้งหมดที่จับเหตุการณ์การคลิกเมาส์
เหตุการณ์สามารถแพร่กระจายได้สองโหมด ได้แก่ bubbling และ capturing
การแพร่เหตุการณ์แบบฟองสบู่
การแพร่เหตุการณ์แบบฟองสบู่ (bubbling) เป็นโหมดเริ่มต้นของการจัดการเหตุการณ์ JavaScript ซึ่งจะแพร่เหตุการณ์จากชั้นในสุดไปยังชั้นนอกสุด
ตัวอย่างเช่น ผู้ใช้สามารถชี้เมาส์เหนือช่องในส่วนย่อย จากนั้นแอปพลิเคชันจะสามารถส่งต่อเหตุการณ์ตามลำดับต่อไปนี้:
- event listener ในชั้นย่อยจัดการเหตุการณ์การชี้เมาส์
- จากนั้น event listener ของออปเจ็กต์หลักจะประมวลผลเหตุการณ์ และส่งต่อการควบคุมไปยัง event listener ของ document
เพื่อกำหนดการ bubling ของเหตุการณ์ ให้ใช้ไวยากรณ์ต่อไปนี้:
- element.addEventListener(event, listener, [false]);
- element.addEventListener(event, listener);
การจับเหตุการณ์
การจับเหตุการณ์ (event capturing) เป็นโหมดการจัดการเหตุการณ์พิเศษใน JavaScript ที่เหตุการณ์จะแพร่กระจายจากชั้นนอกสุดเข้ามาชั้นใน เมื่อเหตุการณ์ไปถึงเอเลเมนต์เป้าหมายที่ชั้นด้านใน โหมดการจัดการเหตุการณ์จะเปลี่ยนไปเป็นแบบ bubling จากนั้นกระบวนการ bubling จะแพร่เหตุการณ์ออกไปด้านนอกและไปสู่เลเยอร์บนสุด
ตัวอย่างเช่น ผู้ใช้อาจคลิกที่ button ย่อยและเริ่มต้นลำดับกระบวนการต่อไปนี้:
- event listener ของ document จะประมวลผลเหตุการณ์ mouse click ตามด้วย event listener ของออบเจกต์หลัก
- เหตุการณ์ไปถึงเอเลเมนต์เป้าหมาย ซึ่งเป็น button event listener ของ button ประมวลผลเหตุการณ์
- การจัดการเหตุการณ์สลับจากโหมด capturing ไปยังโหมด bubling
- เหตุการณ์คลิกเมาส์เดียวกันนี้จะเรียก event handler ที่ออบเจกต์หลักก่อนที่จะไปสิ้นสุดที่ document
จะเลือกระหว่างโหมด bubbling กับ capturing ได้อย่างไร?
bubbling และ capturing ช่วยให้คุณสามารถจัดการกับเหตุการณ์ด้วยวิธีที่แตกต่างกัน bubbling นั้นจะไม่ค่อยมีการใช้งาน เนื่องจาก capturing นั้นเพียงพอที่จะจัดการกับเหตุการณ์ที่เกิดขึ้นส่วนมากในแอปพลิเคชัน
เมื่อคุณตัดสินใจระหว่าง bubbling กับ capturing คุณควรพิจารณาการแพร่ของเหตุการณ์ และดูว่ากระบวนการนี้สอดคล้องกับลอจิกการเขียนโปรแกรมของคุณอย่างไร
ตัวอย่างเช่น พิจารณาแบบฟอร์มหลักที่ประกอบด้วยเอเลเมนต์ย่อยสองรายการ เอเลเมนต์แรกกำหนดให้มีการอัปเดตทันทีเมื่อเกิดเหตุการณ์ที่เอเลเมนต์ที่สอง ในกรณีนี้ คุณควรใช้โหมด capturing ซึ่งจะยืนยันว่า event listener หลักประมวลผลเหตุการณ์และอัปเดตเอเลเมนต์แรก จากนั้นมันจะส่งต่อการควบคุมไปยัง event listener ที่เอเลเมนต์ย่อยที่สอง
คุณจะหยุดการแพร่ของเหตุการณ์ในฟังก์ชั่น event listener ที่ซ้อนกันได้อย่างไร?
เหตุการณ์จะแพร่กระจายไปจนกว่าจะถึงปลายทางปลายทางในรูปแบบที่มี Listener แบบซ้อนกันหลายชั้น คุณต้องใช้เมธอดเฉพาะเพื่อหยุดเหตุการณ์ไม่ให้แพร่กระจายต่อไป
เมธอดต่อไปนี้จะหยุดเหตุการณ์ที่ event listener
event.stopPropagation();
ตัวอย่างเช่น ถ้าคุณเรียก StopPropagation ที่ button ย่อยอันหนึ่ง เหตุการณ์การคลิกเมาส์จะไม่แพร่กระจายไปยังระดับหลักและระดับ document ดังนั้น event listener ระดับที่สูงขึ้นจะไม่ถูกเรียก
หยุดการแพร่ของเหตุการณ์ทั้งหมด
StopPropagation จะหยุดการแพร่เฉพาะเหตุการณ์ชนิดปัจจุบันเท่านั้น ถ้าหากออบเจกต์มี event listener ที่ลงทะเบียนหลายชนิดที่ต่างกัน มันจะยังคงถูกเรียกแม้จะมีการเรียกเมธอด StopPropagation แล้วก็ตาม
เพื่อจะหยุดเหตุการณ์ทั้งหมดที่เกี่ยวข้องกับออบเจกต์ที่กำหนด คุณสามารถใช้เมธอด StopImmediatePropagation ดังนี้
event.stopImmediatePropagation();
เมื่อ event listener เรียกเมธอด StopImmediatePropagation แล้ว event listener อื่น ๆ ที่เกี่ยวข้องกับออบเจกต์นี้จะไม่ถูกเรียก
AWS สามารถรองรับข้อกำหนด JavaScript ของคุณได้อย่างไร?
Amazon Web Services (AWS) นำเสนอ AWS SDK สำหรับ JavaScript เพื่อให้คุณสามารถใช้บริการในการใช้งานของคุณได้อย่างง่ายดายด้วยไลบรารีและ API ต่างๆ
คุณสามารถใช้ SDK ในการพัฒนาแอปพลิเคชันฝั่งเซิร์ฟเวอร์ เว็บแอปพลิเคชัน และเว็บแอปพลิเคชันบนมือถือ SDK สนับสนุน JavaScript Runtime Node.JS และ React Native เช่นเดียวกับการทำงานข้ามรันไทม์ สิ่งนี้จะช่วยให้นักพัฒนาสามารถเรียกใช้แพคเกจบริการไคลเอนต์เดียวกันบนแพลตฟอร์มที่แตกต่างกัน
ประโยชน์อื่น ๆ ของการใช้ SDK มีดังต่อไปนี้
- SDK ถูกเขียนขึ้นในภาษา TypeScript ซึ่งมีข้อดีต่างๆ เช่น การตรวจสอบชนิดตัวแปรแบบสเตติก และการรองรับคลาสและโมดูล
- SDK มีสแต็กมิดเดิลแวร์ที่ช่วยให้คุณสามารถเพิ่มการกระทำที่กำหนดเองได้
- SDK มีสถาปัตยกรรมแบบแยกโมดูล ซึ่งทำให้คุณสามารถใช้เฉพาะแพคเกจที่จำเป็นเท่านั้นเพื่อเพิ่มประสิทธิภาพการทำงานของแอปพลิเคชัน
เริ่มต้นใช้งานแอพพลิเคชัน JavaScript โดยการลงทะเบียนบัญชี AWS วันนี้
