เหตุใดจึงใช้ 'false' หลังจากฟังก์ชัน addEventListener แบบธรรมดานี้


99

อะไรคือเท็จในตอนท้าย? ขอบคุณ.

window.addEventListener('load', function() {
  alert("All done");
}, false);

ที่เกี่ยวข้อง: stackoverflow.com/questions/14807436/…
jsv

คำตอบของคำถามทั้งสองนี้ซับซ้อนเกินไปสำหรับฉัน ฉันพบคำอธิบายง่ายๆที่บล็อกของ Chris Ferdinandi: "ใช่คุณควรใช้มันอย่างแน่นอนเป็นทางเลือกในเบราว์เซอร์ที่ทันสมัยที่สุด แต่ในการใช้งานก่อนหน้านี้ผู้ฟังจะไม่ทำงานหากมีการยกเว้นข้อผิดพลาดด้านข้อควรระวังและ รวมไว้เสมอ " ( gomakethings.com/… )
jsv

คำตอบ:


334

ฉันตรวจ 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ธงถูกตั้งค่าเป็นเท็จซึ่งหมายความว่าคุณจัดการจะถูกเรียกว่าในระหว่างการแข่งขันเดือดเฟส

สำหรับข้อมูลรายละเอียดคลิกที่ลิงค์อ้างอิงนี้และนี้


13
คำตอบที่ดีและครอบคลุมมาก ฉันเข้าใจมันดีกว่าตอนนี้มาก
0x499602D2

15
คำอธิบายดีมาก สัมผัสของมนุษย์นั่นคือสิ่งที่สร้างความแตกต่าง
Rafael Eyng

1
ฉันขอขอบคุณคำอธิบายนี้มาก
neilsimp1

1
คำตอบที่ดี คุณสามารถอธิบายได้ด้วยว่าควรใช้แนวทางใดเมื่อใด
Rahul Arora

@RahulArora ดูgomakethings.com/…
thdoan

10

ตามMDN Web Docsพารามิเตอร์ที่สามคือ:

useCapture
ถ้าtrue, useCaptureแสดงให้เห็นว่าผู้ใช้ต้องการที่จะเริ่มต้นการจับภาพ หลังจากเริ่มการจับภาพเหตุการณ์ทั้งหมดในประเภทที่ระบุจะถูกส่งไปยังการลงทะเบียนlistenerก่อนที่จะถูกส่งไปยังเหตุการณ์ใด ๆEventTargetที่อยู่ข้างใต้ในโครงสร้าง DOM เหตุการณ์ที่เดือดพล่านขึ้นไปตามต้นไม้จะไม่ทำให้ผู้ฟังถูกกำหนดให้ใช้การจับภาพ ดูเหตุการณ์ DOM ระดับ 3 สำหรับคำอธิบายโดยละเอียด


29
ฉันไม่รู้เกี่ยวกับจาวาสคริปต์มากนักดังนั้นฉันจึงมีปัญหาในการรับคำตอบนี้ ฉันไม่รู้จริงๆว่า useCapture คืออะไร? คุณช่วยบอกฉันเกี่ยวกับเรื่องนี้ได้ไหม
Ashoka Mondal

1
@BikashChandraMondal ตรวจสอบคำตอบด้านล่าง
ราศีตุลย์

36
กรุณาอธิบายอย่าเพิ่งคัดลอก / วาง
Damjan Pavlica

3
ช่างเป็นการคัดลอกวางที่ไร้ประโยชน์
Sebastian Palma

6

คำตอบของ @ 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>

สังเกตว่าเหตุการณ์เช่นโฟกัสไม่เกิดฟองซึ่งทำให้รู้สึกยังคงเป็นเหตุการณ์ที่เกิดฟอง

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.