addEventListener () Method - JavaScript Event Listener Example Code

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

การทำความเข้าใจเหตุการณ์และตัวจัดการเหตุการณ์

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

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

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

ในสถานการณ์เหล่านี้คุณต้องมีตัวจัดการเหตุการณ์เพื่อตรวจจับเมื่อมีเหตุการณ์เกิดขึ้น ด้วยวิธีนี้คุณสามารถตั้งค่ารหัสเพื่อตอบสนองต่อเหตุการณ์ที่เกิดขึ้นได้ทันที

JavaScript จัดเตรียมตัวจัดการเหตุการณ์ในรูปแบบของaddEventListener()วิธีการ ตัวจัดการนี้สามารถแนบกับองค์ประกอบ HTML เฉพาะที่คุณต้องการตรวจสอบเหตุการณ์และองค์ประกอบสามารถแนบตัวจัดการได้มากกว่าหนึ่งตัว

addEventListener () ไวยากรณ์

นี่คือไวยากรณ์:

target.addEventListener(event, function, useCapture) 
  • เป้าหมาย : องค์ประกอบ HTML ที่คุณต้องการเพิ่มตัวจัดการเหตุการณ์ของคุณ องค์ประกอบนี้มีอยู่เป็นส่วนหนึ่งของ Document Object Model (DOM) และคุณอาจต้องการเรียนรู้เกี่ยวกับวิธีการเลือกองค์ประกอบ DOM
  • เหตุการณ์ : สตริงที่ระบุชื่อของเหตุการณ์ เราได้กล่าวถึงแล้วloadและclickเหตุการณ์ สำหรับผู้ที่อยากรู้อยากเห็นนี่คือรายการเหตุการณ์ HTML DOM ทั้งหมด
  • ฟังก์ชัน : ระบุฟังก์ชันที่จะทำงานเมื่อตรวจพบเหตุการณ์ นี่คือความมหัศจรรย์ที่สามารถทำให้หน้าเว็บของคุณเปลี่ยนแปลงแบบไดนามิก
  • useCapture : ค่าบูลีนที่เป็นทางเลือก (จริงหรือเท็จ) ที่ระบุว่าควรดำเนินการเหตุการณ์ในขั้นตอนการจับภาพหรือการทำให้เป็นฟอง ในกรณีขององค์ประกอบ HTML ที่ซ้อนกัน (เช่นimgภายใน a div) ที่มีตัวจัดการเหตุการณ์ที่แนบมาค่านี้จะกำหนดว่าเหตุการณ์ใดจะถูกดำเนินการก่อน โดยค่าเริ่มต้นจะตั้งค่าเป็นเท็จซึ่งหมายความว่าตัวจัดการเหตุการณ์ HTML ที่อยู่ด้านในสุดจะถูกเรียกใช้งานก่อน (ระยะฟองสบู่)

addEventListener () ตัวอย่างโค้ด

นี่เป็นตัวอย่างง่ายๆที่ฉันสร้างขึ้นซึ่งแสดงให้คุณเห็นaddEventListener()ในการดำเนินการ

เมื่อผู้ใช้คลิกปุ่มข้อความจะปรากฏขึ้น คลิกปุ่มอื่นซ่อนข้อความ นี่คือ JavaScript ที่เกี่ยวข้อง:

let button = document.querySelector('#button'); let msg = document.querySelector('#message'); button.addEventListener('click', ()=>{ msg.classList.toggle('reveal'); }) 

ไปตามไวยากรณ์ที่แสดงไว้ก่อนหน้านี้สำหรับaddEventListener():

  • เป้าหมาย : องค์ประกอบ HTML ที่มีid='button'
  • ฟังก์ชัน : ไม่ระบุชื่อ (ลูกศร) ฟังก์ชันที่ตั้งค่ารหัสที่จำเป็นในการเปิดเผย / ซ่อนข้อความ
  • useCapture : ปล่อยให้เป็นค่าเริ่มต้นของfalse

ฟังก์ชันของฉันสามารถเปิดเผย / ซ่อนข้อความได้โดยการเพิ่ม / ลบคลาส CSS ที่เรียกว่า "เปิดเผย" ซึ่งจะเปลี่ยนการมองเห็นขององค์ประกอบข้อความ

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

การส่งผ่านเหตุการณ์เป็นพารามิเตอร์

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

ตัวอย่างนี้แสดงให้เห็นว่าคุณสามารถรับ id ขององค์ประกอบได้อย่างไร:

button.addEventListener('click', (e)=>{ console.log(e.target.id) }) 

ที่นี่พารามิเตอร์เหตุการณ์คือตัวแปรที่ตั้งชื่อeแต่สามารถเรียกอย่างอื่นได้อย่างง่ายดายเช่น "เหตุการณ์" พารามิเตอร์นี้เป็นอ็อบเจ็กต์ที่มีข้อมูลต่างๆเกี่ยวกับเหตุการณ์เช่น id เป้าหมาย

คุณไม่จำเป็นต้องทำอะไรเป็นพิเศษและ JavaScript จะรู้โดยอัตโนมัติว่าต้องทำอย่างไรเมื่อคุณส่งพารามิเตอร์ด้วยวิธีนี้ไปยังฟังก์ชันของคุณ

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

หากคุณไม่ต้องการให้ตัวจัดการเหตุการณ์เปิดใช้งานด้วยเหตุผลบางประการต่อไปนี้เป็นวิธีลบ:

target.removeEventListener(event, function, useCapture); 

พารามิเตอร์เหมือนกับaddEventListener()ไฟล์.

ฝึกฝนบ่อยๆทำให้เก่ง

วิธีที่ดีที่สุดในการทำให้ดีขึ้นด้วยตัวจัดการเหตุการณ์คือฝึกฝนด้วยรหัสของคุณเอง

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

ขอให้สนุกและทำสิ่งที่ยอดเยี่ยม!

สำหรับความรู้เพิ่มเติมเกี่ยวกับการพัฒนาเว็บสำหรับผู้เริ่มต้นโปรดไปที่บล็อกของฉันที่ 1000 Mile World และติดตามฉันทาง Twitter