JS กวดวิชา

เจเอสโฮม JS Introduction JS Where To JS เอาท์พุต งบ JS JS ไวยากรณ์ JS ความคิดเห็น ตัวแปร JS เจเอส เลท JS Const JS Operators JS เลขคณิต JS Assignment ประเภทข้อมูล JS ฟังก์ชัน JS วัตถุ JS JS Events JS Strings JS String Methods JS String Search เทมเพลตสตริง JS JS Numbers JS Number Methods JS Arrays JS Array Methods JS Array Sort JS Array Iteration JS Array Const JS Dates รูปแบบวันที่ JS JS วันที่รับเมธอด JS Date Set Methods JS Math JS สุ่ม JS Booleans JS เปรียบเทียบ JS Conditions JS Switch JS ลูปสำหรับ JS Loop สำหรับ In JS วนสำหรับ Of JS วนรอบในขณะที่ JS Break JS Iterables JS ชุด JS Maps JS Typeof JS ประเภทการแปลง JS Bitwise JS RegExp JS Errors JS ขอบเขต JS Hoisting JS โหมดเข้มงวด JS คำสำคัญนี้ JS Arrow Function JS Classes JS JSON JS Debugging คู่มือสไตล์ JS JS แนวทางปฏิบัติที่ดีที่สุด JS ความผิดพลาด JS Performance JS สงวนคำ

เวอร์ชัน JS

เวอร์ชัน JS JS 2009 (ES5) เจเอส 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / ขอบ JS History

วัตถุ JS

คำจำกัดความของวัตถุ คุณสมบัติของวัตถุ วิธีการวัตถุ การแสดงวัตถุ อุปกรณ์เสริมวัตถุ ตัวสร้างวัตถุ ต้นแบบวัตถุ วัตถุ Iterables ชุดวัตถุ แผนที่วัตถุ การอ้างอิงวัตถุ

ฟังก์ชัน JS

คำจำกัดความของฟังก์ชัน พารามิเตอร์ฟังก์ชัน เรียกใช้ฟังก์ชัน เรียกฟังก์ชัน ฟังก์ชัน สมัคร การปิดฟังก์ชัน

JS Classes

แนะนำคลาส การสืบทอดคลาส คลาสคงที่

JS Async

JS Callbacks JS แบบอะซิงโครนัส JS Promises JS Async/รอ

JS HTML DOM

บทนำ DOM วิธี DOM เอกสาร DOM องค์ประกอบ DOM DOM HTML แบบฟอร์ม DOM DOM CSS ภาพเคลื่อนไหว DOM กิจกรรม DOM DOM Event Listener การนำทาง DOM โหนด DOM DOM Collections รายการโหนด DOM

JS เบราว์เซอร์ BOM

JS Window JS Screen JS Location JS History JS Navigator JS Popup Alert JS Timing JS Cookies

JS Web APIs

แนะนำ Web API เว็บฟอร์ม API API ประวัติเว็บ API ที่เก็บข้อมูลเว็บ Web Worker API API ดึงเว็บ เว็บ Geolocation API

JS AJAX

บทนำ AJAX AJAX XMLHttp คำขอ AJAX การตอบสนอง AJAX ไฟล์ AJAX XML AJAX PHP AJAX ASP ฐานข้อมูล AJAX แอปพลิเคชัน AJAX ตัวอย่าง AJAX

JS JSON

บทนำ JSON ไวยากรณ์ JSON JSON กับ XML ประเภทข้อมูล JSON JSON Parse JSON สตริงริฟาย วัตถุ JSON อาร์เรย์ JSON เซิร์ฟเวอร์ JSON JSON PHP JSON HTML JSON JSONP

JS กับ jQuery

ตัวเลือก jQuery jQuery HTML jQuery CSS jQuery DOM

JS กราฟิก

JS กราฟิก JS Canvas JS Plotly JS Chart.js JS Google Chart JS D3.js

ตัวอย่าง JS

ตัวอย่าง JS JS HTML DOM JS HTML อินพุต JS HTML Objects JS HTML Events JS Browser JS Editor JS แบบฝึกหัด JS Quiz ใบรับรอง JS

JS References

วัตถุ JavaScript วัตถุ HTML DOM


JavaScript HTML DOM EventListener


addEventListener() วิธีการ

ตัวอย่าง

เพิ่มตัวฟังเหตุการณ์ที่เริ่มทำงานเมื่อผู้ใช้คลิกปุ่ม:

document.getElementById("myBtn").addEventListener("click", displayDate);

วิธี การaddEventListener()แนบตัวจัดการเหตุการณ์กับองค์ประกอบที่ระบุ

วิธี การaddEventListener()แนบตัวจัดการเหตุการณ์กับองค์ประกอบโดยไม่ต้องเขียนทับตัวจัดการเหตุการณ์ที่มีอยู่

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

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

คุณสามารถเพิ่มตัวฟังเหตุการณ์ให้กับวัตถุ DOM ได้ ไม่เพียงแต่องค์ประกอบ HTML คือวัตถุหน้าต่าง

วิธีaddEventListener()นี้ช่วยให้ควบคุมวิธีที่เหตุการณ์ตอบสนองต่อฟองสบู่ได้ง่ายขึ้น

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

คุณสามารถลบตัวฟังเหตุการณ์ได้อย่างง่ายดายโดยใช้removeEventListener()วิธีการ


ไวยากรณ์

element.addEventListener(event, function, useCapture);

พารามิเตอร์แรกคือประเภทของเหตุการณ์ (เช่น " click" หรือ " mousedown" หรือHTML DOM Event อื่นๆ )

พารามิเตอร์ที่สองคือฟังก์ชันที่เราต้องการเรียกใช้เมื่อมีเหตุการณ์เกิดขึ้น

พารามิเตอร์ที่สามคือค่าบูลีนที่ระบุว่าจะใช้เหตุการณ์เดือดปุด ๆ หรือการบันทึกเหตุการณ์ พารามิเตอร์นี้เป็นทางเลือก

โปรดทราบว่าคุณไม่ได้ใช้คำนำหน้า "เปิด" สำหรับกิจกรรม ใช้ " click" แทน " onclick"


เพิ่มตัวจัดการเหตุการณ์ให้กับ Element

ตัวอย่าง

แจ้งเตือน "สวัสดีชาวโลก!" เมื่อผู้ใช้คลิกที่องค์ประกอบ:

element.addEventListener("click", function(){ alert("Hello World!"); });

คุณยังสามารถอ้างถึงฟังก์ชัน "ชื่อ" ภายนอก:

ตัวอย่าง

แจ้งเตือน "สวัสดีชาวโลก!" เมื่อผู้ใช้คลิกที่องค์ประกอบ:

element.addEventListener("click", myFunction);

function myFunction() {
  alert ("Hello World!");
}


เพิ่มตัวจัดการเหตุการณ์จำนวนมากในองค์ประกอบเดียวกัน

เมธอด นี้addEventListener()ให้คุณเพิ่มหลายเหตุการณ์ในองค์ประกอบเดียวกัน โดยไม่ต้องเขียนทับเหตุการณ์ที่มีอยู่:

ตัวอย่าง

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

คุณสามารถเพิ่มเหตุการณ์ประเภทต่างๆ ลงในองค์ประกอบเดียวกันได้:

ตัวอย่าง

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);

เพิ่ม Event Handler ไปที่หน้าต่าง Object

เมธอด นี้addEventListener()ให้คุณเพิ่มตัวฟังเหตุการณ์บนออบเจ็กต์ HTML DOM ใดๆ เช่น อิลิเมนต์ HTML เอกสาร HTML อ็อบเจ็กต์หน้าต่าง หรืออ็อบเจ็กต์อื่นๆ ที่รองรับเหตุการณ์ เช่นxmlHttpRequestออบเจกต์

ตัวอย่าง

เพิ่มตัวฟังเหตุการณ์ที่เริ่มทำงานเมื่อผู้ใช้ปรับขนาดหน้าต่าง:

window.addEventListener("resize", function(){
  document.getElementById("demo").innerHTML = sometext;
});

ผ่านพารามิเตอร์

เมื่อส่งค่าพารามิเตอร์ ให้ใช้ "ฟังก์ชันที่ไม่ระบุชื่อ" ที่เรียกใช้ฟังก์ชันที่ระบุด้วยพารามิเตอร์:

ตัวอย่าง

element.addEventListener("click", function(){ myFunction(p1, p2); });

เหตุการณ์เดือดปุด ๆ หรือการจับภาพเหตุการณ์?

มีสองวิธีในการเผยแพร่เหตุการณ์ใน HTML DOM คือ bubbling และ capturing

การเผยแพร่เหตุการณ์เป็นวิธีกำหนดลำดับองค์ประกอบเมื่อมีเหตุการณ์เกิดขึ้น หากคุณมีองค์ประกอบ <p> ภายในองค์ประกอบ <div> และผู้ใช้คลิกที่องค์ประกอบ <p> ควรจัดการเหตุการณ์ "คลิก" ขององค์ประกอบใดก่อน

ใน การ เดือดปุด ๆเหตุการณ์ขององค์ประกอบภายในส่วนใหญ่จะได้รับการจัดการก่อนแล้วจึงค่อยจัดการภายนอก: เหตุการณ์การคลิกขององค์ประกอบ <p> จะได้รับการจัดการก่อน จากนั้นจึงจัดการเหตุการณ์การคลิกขององค์ประกอบ <div>

ในการจับภาพเหตุการณ์ขององค์ประกอบภายนอกส่วนใหญ่จะได้รับการจัดการก่อนแล้วจึงจัดการภายใน: เหตุการณ์การคลิกขององค์ประกอบ <div> จะได้รับการจัดการก่อน จากนั้นจึงจัดการเหตุการณ์การคลิกขององค์ประกอบ <p>

ด้วยเมธอด addEventListener() คุณสามารถระบุประเภทการแพร่กระจายได้โดยใช้พารามิเตอร์ "useCapture":

addEventListener(event, function, useCapture);

ค่าดีฟอลต์เป็นเท็จ ซึ่งจะใช้การแพร่กระจายที่เดือดปุด ๆ เมื่อตั้งค่าเป็นจริง เหตุการณ์จะใช้การขยายพันธุ์ที่ดักจับ

ตัวอย่าง

document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);

เมธอด removeEventListener()

เมธอดจะลบ ตัวremoveEventListener()จัดการเหตุการณ์ที่แนบกับเมธอด addEventListener() ออก:

ตัวอย่าง

element.removeEventListener("mousemove", myFunction);

การอ้างอิงวัตถุเหตุการณ์ HTML DOM

สำหรับรายการเหตุการณ์ HTML DOM ทั้งหมด โปรดดูที่HTML DOM Event Object Referenceทั้งหมดของเรา


ทดสอบตัวเองด้วยแบบฝึกหัด

ออกกำลังกาย:

ใช้eventListenerเพื่อกำหนดเหตุการณ์ onclick ให้กับ<button>องค์ประกอบ

<button id="demo"></button>

<script>
document.getElementById("demo").("", myFunction);
</script>