เหตุการณ์เป็นส่วนสำคัญของ . หน้าเว็บตอบสนองตามเหตุการณ์ที่เกิดขึ้น บางเหตุการณ์สร้างโดยผู้ใช้และบางเหตุการณ์สร้างขึ้นโดย API ในบทความนี้เราจะดูว่าเหตุการณ์เกิดขึ้นได้อย่างไรและวิธีการใช้ addEventListener ใน JavaScript ตามลำดับต่อไปนี้:
- Event Listener คืออะไร?
- AddEventListener () ใน JavaScript
- ค่าพารามิเตอร์
- AddEventListener ใน JavaScript: ตัวอย่าง
Event Listener คืออะไร?
event listener คือโพรซีเดอร์ใน JavaScript ที่รอให้เหตุการณ์เกิดขึ้น ตัวอย่างง่ายๆของไฟล์ เหตุการณ์ คือผู้ใช้คลิกเมาส์หรือกดปุ่มบนแป้นพิมพ์
addEventListener () เป็น inbuilt ฟังก์ชัน JavaScript ซึ่งรับฟังเหตุการณ์และอาร์กิวเมนต์ที่สองจะถูกเรียกเมื่อใดก็ตามที่เหตุการณ์ที่อธิบายถูกเริ่มทำงาน สามารถเพิ่มตัวจัดการเหตุการณ์จำนวนเท่าใดก็ได้ในองค์ประกอบเดียวโดยไม่ต้องเขียนทับตัวจัดการเหตุการณ์ที่มีอยู่
java แปลง double เป็น int
addEventListener () ใน JavaScript
บางส่วนของ คุณสมบัติ วิธีการฟังเหตุการณ์ ได้แก่ :
- addEventListener () วิธีการแนบไฟล์ จัดการเหตุการณ์ ไปยังองค์ประกอบที่ระบุ
- วิธีนี้แนบตัวจัดการเหตุการณ์กับองค์ประกอบที่ไม่มี การเขียนทับ ตัวจัดการเหตุการณ์ที่มีอยู่
- คุณสามารถเพิ่ม ตัวจัดการเหตุการณ์จำนวนมาก เป็นองค์ประกอบเดียว
- คุณสามารถเพิ่มตัวจัดการเหตุการณ์ของไฟล์ ประเภทเดียวกัน หนึ่ง ธาตุ นั่นคือเหตุการณ์ 'คลิก' สองเหตุการณ์
- สามารถเพิ่มผู้ฟังเหตุการณ์ลงในไฟล์ใดก็ได้ การตัดสิน วัตถุไม่เพียง แต่องค์ประกอบ HTML เช่นวัตถุหน้าต่าง
- addEventListener () วิธีการทำให้มัน ง่ายกว่า เพื่อควบคุมว่าไฟล์ ปฏิกิริยาตอบสนองของเหตุการณ์ ที่จะเดือด
เมื่อใช้เมธอด addEventListener () JavaScript จะถูกแยกออกจากไฟล์ มาร์กอัปเพื่อให้อ่านง่ายขึ้นและช่วยให้คุณสามารถเพิ่มตัวฟังเหตุการณ์แม้ว่าคุณจะไม่ได้ควบคุมมาร์กอัป HTML ก็ตาม
นอกจากนี้คุณสามารถลบตัวฟังเหตุการณ์ได้อย่างง่ายดายโดยใช้ไฟล์ removeEventListener () วิธีการ .
ไวยากรณ์:
target.addEventListener (type, listener [, options]) target.addEventListener (type, listener [, useCapture]) target.addEventListener (type, listener [, useCapture, wantsUntrusted])
ค่าพารามิเตอร์
| พารามิเตอร์ | คำอธิบาย |
เหตุการณ์ | จำเป็น สตริงที่ระบุชื่อของเหตุการณ์ หมายเหตุ: อย่าใช้คำนำหน้า 'เปิด' ตัวอย่างเช่นใช้ 'click' แทน 'onclick' สำหรับรายการของเหตุการณ์ HTML DOM ทั้งหมดโปรดดูที่การอ้างอิง HTML DOM Event Object ของเราที่สมบูรณ์ |
ฟังก์ชัน เชฟใน devops คืออะไร | จำเป็น ระบุฟังก์ชันที่จะรันเมื่อเกิดเหตุการณ์ เมื่อเหตุการณ์เกิดขึ้นอ็อบเจ็กต์เหตุการณ์จะถูกส่งผ่านไปยังฟังก์ชันเป็นพารามิเตอร์แรก ประเภทของเหตุการณ์ วัตถุ ขึ้นอยู่กับเหตุการณ์ที่ระบุ ตัวอย่างเช่นเหตุการณ์ 'คลิก' เป็นของวัตถุ MouseEvent |
useCapture | ไม่จำเป็น. ค่าบูลีนที่ระบุว่าควรดำเนินการเหตุการณ์ในการจับภาพหรือในขั้นตอนการเดือด ค่าที่เป็นไปได้: จริง - ตัวจัดการเหตุการณ์ถูกเรียกใช้ในเฟสการจับภาพ - ค่าเริ่มต้น ตัวจัดการเหตุการณ์ถูกดำเนินการในขั้นตอนการเดือด |
ตอนนี้คุณรู้แล้วว่าตัวฟังเหตุการณ์ทำงานอย่างไรมาดูตัวอย่างของ addEventListener () ใน JavaScript
fibonacci c ++ ซ้ำ
addEventListener () ใน JavaScript: ตัวอย่าง
& lt! DOCTYPE html & gt & lthtml & gt & ltbody & gt & ltp & gt ตัวอย่างนี้ใช้เมธอด addEventListener () เพื่อเรียกใช้ฟังก์ชันเมื่อผู้ใช้คลิกที่ปุ่ม & lt / p & gt & ltbutton id = 'myBtn' & gtTry it & lt / button gt & gt & ltcriptolement ' ('myBtn'). addEventListener ('click', myFunction) ฟังก์ชัน myFunction () {document.getElementById ('demo'). innerHTML = 'Hello World'} & lt / script & gt & lt / body & gt & lt / html & gt 
ด้วยเหตุนี้เราจึงสิ้นสุด addEventListener ใน JavaScript ฉันหวังว่าคุณจะเข้าใจวิธีการฟังเหตุการณ์ วิธี ทำงานใน JavaScript
ตรวจสอบ ซึ่งมาพร้อมกับการฝึกอบรมสดที่นำโดยผู้สอนและประสบการณ์โครงการในชีวิตจริง การฝึกอบรมนี้ทำให้คุณมีความเชี่ยวชาญในทักษะในการทำงานกับเทคโนโลยีเว็บส่วนหลังและส่วนหน้า รวมถึงการฝึกอบรมเกี่ยวกับ Web Development, jQuery, Angular, NodeJS, ExpressJS และ MongoDB
มีคำถามสำหรับเรา? โปรดระบุไว้ในส่วนความคิดเห็นของบล็อก“ addEventListener ใน JavaScript” แล้วเราจะติดต่อกลับไป