อะไรคือเท็จในตอนท้าย? ขอบคุณ.
window.addEventListener('load', function() {
alert("All done");
}, false);
อะไรคือเท็จในตอนท้าย? ขอบคุณ.
window.addEventListener('load', function() {
alert("All done");
}, false);
คำตอบ:
ฉันตรวจ MDN ด้วย แต่ฉันยังไม่เข้าใจว่าuseCaptureมันมีไว้เพื่ออะไรดังนั้นคำตอบนี้สำหรับผู้ที่ยังไม่ได้รับหลังจากตรวจสอบเอกสารอย่างเป็นทางการ
ก่อนอื่นสิ่งต่อไปนี้เกิดขึ้นกับเบราว์เซอร์เกือบทั้งหมด:
ในทุกเบราว์เซอร์ยกเว้น IE <9 การประมวลผลเหตุการณ์มีสองขั้นตอน
เหตุการณ์ครั้งแรกที่ไปลง - ที่เรียกว่าจับแล้วฟองอากาศขึ้น ลักษณะการทำงานนี้เป็นมาตรฐานในข้อกำหนด W3C
ซึ่งหมายความว่าไม่ว่าคุณจะตั้งค่าเป็นอะไรuseCaptureช่วงเหตุการณ์ทั้งสองนี้จะมีอยู่เสมอ
ภาพนี้แสดงวิธีการทำงาน

ตามรูปแบบนี้เหตุการณ์:
จับลง - ถึง 1 -> 2 -> 3
ฟองขึ้น - ถึง 3 -> 2 -> 1.
แล้วคำถามของคุณมา การเรียกพารามิเตอร์ตัวที่ 3 useCaptureระบุว่าคุณต้องการให้ตัวจัดการของคุณจัดการกับเหตุการณ์ใดในสองเฟส
useCapture = trueตัวจัดการถูกตั้งค่าในขั้นตอนการจับภาพ เหตุการณ์ต่างๆจะไปถึงก่อนที่จะไปถึงลูก ๆ
useCapture = false.ตัวจัดการถูกตั้งค่าไว้ในขั้นตอนการเดือด เหตุการณ์ต่างๆจะได้รับหลังจากไปหาลูก ๆ
ซึ่งหมายความว่าหากคุณเขียนโค้ดเช่นนี้:
child.addEventListener("click", second);
parent.addEventListener("click", first, true);
เมื่อคลิกองค์ประกอบลูก, วิธีการที่จะถูกเรียกก่อนfirstsecond
โดยค่าเริ่มต้นuseCaptureธงถูกตั้งค่าเป็นเท็จซึ่งหมายความว่าคุณจัดการจะถูกเรียกว่าในระหว่างการแข่งขันเดือดเฟส
สำหรับข้อมูลรายละเอียดคลิกที่ลิงค์อ้างอิงนี้และนี้
ตามMDN Web Docsพารามิเตอร์ที่สามคือ:
useCapture
ถ้าtrue,useCaptureแสดงให้เห็นว่าผู้ใช้ต้องการที่จะเริ่มต้นการจับภาพ หลังจากเริ่มการจับภาพเหตุการณ์ทั้งหมดในประเภทที่ระบุจะถูกส่งไปยังการลงทะเบียนlistenerก่อนที่จะถูกส่งไปยังเหตุการณ์ใด ๆEventTargetที่อยู่ข้างใต้ในโครงสร้าง DOM เหตุการณ์ที่เดือดพล่านขึ้นไปตามต้นไม้จะไม่ทำให้ผู้ฟังถูกกำหนดให้ใช้การจับภาพ ดูเหตุการณ์ DOM ระดับ 3 สำหรับคำอธิบายโดยละเอียด
คำตอบของ @ Libra นั้นดีมากมีบางคนเช่นฉันที่เข้าใจปฏิสัมพันธ์ของรหัสกับเครื่องได้ดีขึ้น
ดังนั้นสคริปต์ต่อไปนี้ควรอธิบายการเผยแพร่เหตุการณ์ สิ่งที่ฉันพยายามทำตามสคีมาคำอธิบายนี้คือ:
เหตุการณ์ต่อไปนี้ไหลลงและขึ้นตามลำดับชั้นต่อไปนี้
<window>
<document>
<body>
<section>
<div>
<paragraph>
<span>
เพื่อความเรียบง่ายเราจะเริ่มต้นที่ส่วนของร่างกายลงไปที่ตัวจัดการการลงทะเบียนองค์ประกอบช่วงสำหรับระยะการจับภาพและสำรองข้อมูลไปที่ตัวจัดการองค์ประกอบของร่างกายที่ลงทะเบียนสำหรับระยะฟอง ดังนั้นผลลัพธ์จะเป็นโหนดต่อโหนดตามทิศทางของเหตุการณ์ตั้งแต่ต้นจนจบ โปรดคลิก "แสดงคอนโซล" ที่แผงด้านขวาของข้อมูลโค้ดเพื่อเข้าถึงบันทึก
function handler(e){
/* logs messages of each phase of the event flow associated with
the actual node where the flow was passing by */
if ( e.eventPhase == Event.CAPTURING_PHASE ){
console.log ("capturing phase :\n actual node : "+this.nodeName);
}
if ( e.eventPhase == Event.AT_TARGET){
console.log( "at target phase :\n actual node : "+this.nodeName);
}
if ( e.eventPhase == Event.BUBBLING_PHASE){
console.log ("bubbling phase :\n actual node : "+this.nodeName );
}
}
/* The following array contains the elements between the target (span and you can
click also on the paragraph) and its ancestors up to the BODY element, it can still
go up to the "document" then the "window" element, for the sake of simplicity it is
chosen to stop here at the body element
*/
arr=[document.body,document.getElementById("sectionID"),
document.getElementById("DivId"),document.getElementById("PId"),
document.getElementById("spanId")];
/* Then trying to register handelers for both capturing and bubbling phases
*/
function listener(node){
node.addEventListener( ev, handler, bool )
/* ev :event (click), handler : logging the event associated with
the target, bool: capturing/bubbling phase */
}
ev="click";
bool=true; // Capturing phase
arr.forEach(listener);
bool=false; // Bubbling phase
/* Notice that both capturing and bubbling
include the at_target phase, that's why you'll get two `at_target` phases in
the log */
arr.forEach(listener);
p {
background: gray;
color:white;
padding: 10px;
margin: 5px;
border: thin solid black
}
span {
background: white;
color: black;
padding: 2px;
cursor: default;
}
<section ID="sectionID">
<div id="DivId">
<p id="PId">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis <span id="spanId">CLICK ME </span> imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosq.
</p>
</div>
</section>
สังเกตว่าเหตุการณ์เช่นโฟกัสไม่เกิดฟองซึ่งทำให้รู้สึกยังคงเป็นเหตุการณ์ที่เกิดฟอง