Latest web development tutorials
×

JavaScript หลักสูตร

JavaScript หลักสูตร JavaScript แนะนำโดยย่อ JavaScript การใช้ JavaScript ส่งออก JavaScript ไวยากรณ์ JavaScript งบ JavaScript หมายเหตุ JavaScript ตัวแปร JavaScript ชนิดข้อมูล JavaScript วัตถุ JavaScript ฟังก์ชัน JavaScript ขอบเขต JavaScript เหตุการณ์ JavaScript เชือก JavaScript ผู้ประกอบการ JavaScript เปรียบเทียบ JavaScript If...Else JavaScript switch JavaScript for JavaScript while JavaScript Break & Continue JavaScript typeof JavaScript ประเภทการแปลง JavaScript นิพจน์ปกติ JavaScript ความผิดพลาด JavaScript แก้จุดบกพร่อง JavaScript ยกตัวแปร JavaScript โหมดที่เข้มงวด JavaScript ใช้ไม่เหมาะสม JavaScript รูปแบบการตรวจสอบสิทธิ์ JavaScript ลิขสิทธิ์คำสำคัญ JavaScript JSON JavaScript void JavaScript ข้อมูลจำเพาะรหัส

JS ฟังก์ชัน

JavaScript นิยามฟังก์ชัน JavaScript อาร์กิวเมนต์ของฟังก์ชัน JavaScript เรียกใช้ฟังก์ชัน JavaScript การปิด

JS HTML DOM

DOM แนะนำโดยย่อ DOM HTML DOM CSS DOM เหตุการณ์ DOM EventListener DOM ธาตุ

JS การสอนที่ทันสมัย

JavaScript วัตถุ JavaScript Number JavaScript String JavaScript Date JavaScript Array JavaScript Boolean JavaScript Math JavaScript RegExp วัตถุ

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

JavaScript Window JavaScript Window Screen JavaScript Window Location JavaScript Window History JavaScript Navigator JavaScript ป๊อป JavaScript เหตุการณ์หมดเวลา JavaScript Cookies

JS โกดัง

JavaScript โกดัง JavaScript ทดสอบ jQuery JavaScript ทดสอบ Prototype

JS ตัวอย่าง

JavaScript ตัวอย่าง JavaScript ตัวอย่างวัตถุ JavaScript วัตถุเช่นเบราว์เซอร์ JavaScript HTML DOM ตัวอย่าง JavaScript ย่อ

JS คู่มืออ้างอิง

JavaScript วัตถุ 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 เหตุการณ์อ้างอิงวัตถุ