บทความนี้อธิบายรูปแบบการจับภาพเหตุการณ์และโมเดลฟองใน JS แบ่งปันสำหรับการอ้างอิงของคุณ
วิธีการใช้งานเฉพาะมีดังนี้:
ตัวอย่างที่ 1:
คัดลอกรหัสดังนี้: <html>
<head>
<script type = "text/javascript">
window.onload = function () {
document.getElementById ('par'). addeventListener ('คลิก', ฟังก์ชัน () {Alert ('par');}, true);
document.getElementById ('son'). addeventListener ('คลิก', ฟังก์ชัน () {Alert ('son');}, true);
-
</script>
<style type = "text/css">
#PAR {WIDTH: 300PX; ความสูง: 200PX; พื้นหลัง: สีเทา;}
#SON {width: 200px; ความสูง: 100px; พื้นหลัง: สีเขียว;}
</style>
</head>
<body>
<div id = "par">
<div id = "son"> </div>
</div>
</body>
</html>
ตัวอย่างที่ 2:
คัดลอกรหัสดังนี้: <html>
<head>
<script type = "text/javascript">
window.onload = function () {
document.getElementById ('par'). addeventListener ('คลิก', function () {Alert ('par');});
document.getElementById ('son'). addeventListener ('คลิก', ฟังก์ชัน () {Alert ('son');});
-
</script>
<style type = "text/css">
#PAR {WIDTH: 300PX; ความสูง: 200PX; พื้นหลัง: สีเทา;}
#SON {width: 200px; ความสูง: 100px; พื้นหลัง: สีเขียว;}
</style>
</head>
<body>
<div id = "par">
<div id = "son"> </div>
</div>
</body>
</html>
AddeventListener: พารามิเตอร์ที่สามเป็นพารามิเตอร์ทางเลือกซึ่งเป็นเท็จโดยค่าเริ่มต้นระบุโมเดลฟองนั่นคือเลเยอร์ที่เล็กที่สุดจะถูกเรียกใช้ก่อน (div กับ ID คือ SON); และหากมีการเพิ่มพารามิเตอร์ที่แท้จริงนั่นหมายความว่ามันเป็นแบบจำลองการจับภาพ (จาก HTML-> Body ---> Div) ซึ่งเรียกว่าตามระดับ A
รหัส HTML ของตัวอย่าง 1 มีสอง divs div เล็ก ๆ มีอยู่ใน div ขนาดใหญ่ เมื่อคลิกที่ DIV ขนาดเล็กเหตุการณ์การแจ้งเตือน ('PAR') จะถูกเรียกใช้ก่อน และจากนั้นการแจ้งเตือนทั้งหมด ('ลูกชาย') จะถูกเรียกใช้ ตัวอย่างที่ 2 เป็นสิ่งที่ตรงกันข้าม
หากแอตทริบิวต์ "Object.onclick" ใช้เพื่อทริกเกอร์เหตุการณ์จะใช้โมเดลฟอง
IE ไม่รองรับ addEventListener แต่ใช้ attaintEvent แต่สิ่งที่แนบมาไม่รองรับพารามิเตอร์ที่สามมันไม่ได้จับโมเดล
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน