จับภาพเหตุการณ์
จับภาพเหตุการณ์ คือเหตุการณ์เริ่มต้นจากองค์ประกอบด้านบนไปยังองค์ประกอบเป้าหมาย ตรงกันข้ามกับเหตุการณ์เดือดปุดๆ ซึ่งเริ่มต้นจากองค์ประกอบเป้าหมายไปยังองค์ประกอบด้านบน
รายละเอียดโค้ด
ในโค้ดต่อไปนี้ ในส่วนเนื้อหาจะมีองค์ประกอบ div สามองค์ประกอบและมีการใช้สไตล์เพื่อทำให้ซ้อนกัน
- เพิ่มตัวจัดการเหตุการณ์ให้กับแท็ก div แต่ละแท็กโดยใช้ addEventListener ().
- ตรวจสอบให้แน่ใจว่านี่คือกิจกรรม "คลิก " เหตุการณ์
- addEventListener() วิธียอมรับ 3 พารามิเตอร์
ก) เหตุการณ์ที่จะเข้าถึง นี่คือเหตุการณ์คลิก
b) ฟังก์ชันตัวจัดการเหตุการณ์ เพื่อแสดงข้อความเตือน
c) พารามิเตอร์ที่สามเรียกว่าเฟส ในพารามิเตอร์นี้ หากเราให้ค่า true เท่ากับ จับเหตุการณ์ จะเปิดใช้งานหากเราเก็บเป็นเท็จ เหตุการณ์เดือด จะเปิดใช้งาน
- ฟังก์ชันตัวจัดการเหตุการณ์ ซึ่งใช้เพื่อแสดงกล่องแจ้งเตือน จะใช้ getAttribute () เพื่อรับค่า id ขององค์ประกอบ div ที่ได้รับการคลิก
- เมื่อเราคลิกที่แท็กที่ซ้อนอยู่ด้านในสุด div3 เนื่องจากเปิดใช้งานการจับภาพเหตุการณ์ที่นี่ ข้อความแจ้งเตือนจะเริ่มต้นจากด้านบน div1 แท็กไปที่แท็กเป้าหมาย div3 .
- เมื่อเราคลิกที่ div2 แท็ก จากนั้นกล่องแจ้งเตือนจะแสดงจากด้านบน div1 แท็กเพื่อกำหนดเป้าหมายแท็ก div2.
ตัวอย่าง
<html>
<head>
<style>
.divstyle{
display:table-cell;
border: 2px solid black;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div id = "div1" class="divstyle">
div1
<div id = "div2" class="divstyle">
div2
<div id = "div3" class="divstyle">
div3
<script>
var divs = document.getElementsByTagName("div");
for(var i = 0; i<divs.length; i++){
divs[i].addEventListener("click",clickhandler,true );
}
function clickhandler() {
alert(this.getAttribute("id") + "event got handled");
}
</script>
</body>
</html> ในการรันโปรแกรมข้างต้นเราจะได้ภาพต่อไปนี้บนหน้าจอ
เมื่อคลิกที่ div3 ด้านบน (องค์ประกอบเป้าหมาย) เราได้รับสิ่งต่อไปนี้เป็นผลลัพธ์
ผลลัพธ์
On clicking ok of the above div1 alert box we get the following div2 alert box opened
On clicking ok of the above div2 alert box we get the following div3 alert box opened.
