1. Home
  2. JavaScript HTML DOM EventListener

บทช่วยสอน JavaScript HTML DOM EventListener ที่ดีที่สุดในปี 2024 ในบทช่วยสอนนี้ คุณสามารถเรียนรู้ addEventListener () วิธีการ,ตัวอย่าง,ไวยากรณ์,องค์ประกอบเดิมเพิ่มตัวจัดการเหตุการณ์,ตัวอย่าง,ตัวอย่าง,เพิ่มตัวจัดการเหตุการณ์หลายองค์ประกอบเดียวกัน,ตัวอย่าง,ตัวอย่าง,เพิ่มตัวจัดการเหตุการณ์ไปยังวัตถุที่หน้าต่าง,ตัวอย่าง,ผ่านพารามิเตอร์,ตัวอย่าง,จับภาพเหตุการณ์หรือเหตุการณ์เดือด?,ตัวอย่าง,removeEventListener () วิธีการ,ตัวอย่าง,สนับสนุนเบราว์เซอร์,ตัวอย่าง,อ้างอิงวัตถุ HTML DOM เหตุการณ์,

JavaScript HTML DOM EventListener

addEventListener () วิธีการ

ตัวอย่าง

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

. document.getElementById ( "myBtn") addEventListener ( "คลิก" displayDate);

ลอง»

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

addEventListener () วิธีการเพิ่มตัวจัดการเหตุการณ์ไม่เขียนทับตัวจัดการเหตุการณ์ที่มีอยู่

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

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

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

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

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

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

ไวยากรณ์

องค์ประกอบ .addEventListener (event, ฟังก์ชั่น useCapture );

พารามิเตอร์แรกคือชนิด (เช่น "คลิก" หรือ "mousedown") เหตุการณ์

อาร์กิวเมนต์ที่สองเป็นสายฟังก์ชั่นจะถูกเรียกหลังจากเหตุการณ์

พารามิเตอร์ที่สามเป็นค่าบูลีนที่ถูกนำมาใช้เพื่ออธิบายเดือดเหตุการณ์หรือการจับภาพ พารามิเตอร์นี้หรือไม่

หมายเหตุ หมายเหตุ: อย่าใช้ "กับ" คำนำหน้า ตัวอย่างเช่นใช้ "คลิก" แทน "onclick"

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

ตัวอย่าง

เมื่อผู้ใช้คลิกที่องค์ประกอบป๊อปอัพเมื่อ "Hello World!":

องค์ประกอบ .addEventListener ( "คลิก" ฟังก์ชั่น () {แจ้งเตือน ( "Hello World!");});

ลอง»

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

ตัวอย่าง

เมื่อผู้ใช้คลิกที่องค์ประกอบป๊อปอัพเมื่อ "Hello World!":

องค์ประกอบ .addEventListener ( "คลิก" myFunction );

ฟังก์ชั่น myFunction () {
การแจ้งเตือน ( "Hello World!");
}

ลอง»

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

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

ตัวอย่าง

องค์ประกอบ .addEventListener ( "คลิก" myFunction );
องค์ประกอบ .addEventListener ( "คลิก" mySecondFunction );

ลอง»

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

ตัวอย่าง

องค์ประกอบ .addEventListener ( "mouseover" myFunction );
องค์ประกอบ .addEventListener ( "คลิก" mySecondFunction );
องค์ประกอบ .addEventListener ( "mouseout" myThirdFunction );

ลอง»

เพิ่มตัวจัดการเหตุการณ์ไปยังวัตถุที่หน้าต่าง

addEventListener () วิธีการช่วยให้คุณเพิ่มวัตถุในฟังเหตุการณ์ HTML DOM, HTML DOM วัตถุเช่นองค์ประกอบ HTML, เอกสาร HTML วัตถุหน้าต่าง วัตถุที่จัดกิจกรรมหรือค่าใช้จ่ายอื่น ๆ เช่น: วัตถุ XMLHttpRequest

ตัวอย่าง

เมื่อผู้ใช้ตั้งค่าขนาดของหน้าต่างเพื่อเพิ่มฟังเหตุการณ์:

window.addEventListener ( "ปรับขนาด" ฟังก์ชั่น () {
. document.getElementById ( "สาธิต") innerHTML = SomeText;
});

ลอง»

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

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

ตัวอย่าง

องค์ประกอบ .addEventListener ( "คลิก" ฟังก์ชั่น () {myFunction (P1, P2);});

ลอง»

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

ส่งเหตุการณ์ในสองวิธีเดือดและการจับภาพ

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

ฟองเหตุการณ์จะเป็นองค์ประกอบภายในจะถูกเรียกแล้วเรียกองค์ประกอบภายนอก ได้แก่ เหตุการณ์คลิก <p> องค์ประกอบที่จะถูกเรียกก่อนแล้วก่อให้เกิดเหตุการณ์คลิก <div>

ในการจับภาพเหตุการณ์จะเป็นองค์ประกอบภายนอกจะถูกเรียกแล้วเหตุการณ์จะถูกเรียกองค์ประกอบภายในคือ: <div> ที่จะเรียกเหตุการณ์คลิกแล้วเรียกเหตุการณ์คลิก <p> องค์ประกอบ

addEventListener () วิธีการระบุ "useCapture พารามิเตอร์" เพื่อกำหนดประเภทการจัดส่ง:

addEventListener (event, ฟังก์ชั่น useCapture) ;

ค่าเริ่มต้นเป็นเท็จที่เดือดปุด ๆ จะผ่านไปเมื่อมีค่าเป็นจริงใช้เหตุการณ์ในการจับภาพการถ่ายโอน

ตัวอย่าง

. document.getElementById ( "myDiv") addEventListener ( "คลิก" myFunction จริง);

ลอง»

removeEventListener () วิธีการ

removeEventListener () วิธีการลบ addEventListener () วิธีการเพิ่มตัวจัดการเหตุการณ์:

ตัวอย่าง

องค์ประกอบ .removeEventListener ( "MouseMove" myFunction );

ลอง»

สนับสนุนเบราว์เซอร์

ตัวเลขในตารางเป็นตัวแทนของเบราว์เซอร์ครั้งแรกเพื่อรองรับจำนวนวิธีรุ่น

ทาง
addEventListener () 1.0 9.0 1.0 1.0 7.0
removeEventListener () 1.0 9.0 1.0 1.0 7.0

หมายเหตุ: IE 8 และรุ่นก่อนหน้าของ IE, Opera 7.0 และรุ่นก่อนหน้านี้ไม่สนับสนุน) วิธี addEventListener () และ removeEventListener ( แต่ประเภทของเบราว์เซอร์รุ่นนี้สามารถใช้ detachEvent () วิธีการเอาตัวจัดการเหตุการณ์:

element.attachEvent (event, ฟังก์ชั่น);
element.detachEvent (event, ฟังก์ชั่น);

ตัวอย่าง

วิธีการแก้ปัญหาเบราว์เซอร์:

var x = document.getElementById ( "myBtn");
ถ้า (x.addEventListener) {// เบราว์เซอร์ที่สำคัญทั้งหมดยกเว้น IE 8 และรุ่นก่อนหน้า
x.addEventListener ( "คลิก" myFunction);
} else if (x.attachEvent) {// IE 8 และรุ่นก่อนหน้า
x.attachEvent ( "onclick" myFunction);
}

ลอง»

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

กิจกรรมทั้งหมดของ HTML DOM คุณสามารถดูของเราสมบูรณ์ HTML DOM เหตุการณ์อ้างอิงวัตถุ

บทแนะนำยอดนิยม

Contact US

JavaScript HTML DOM EventListener
10/30