event.stopPropagation() เป็นการใช้ jQuery Event กับ event.stopPropagation() ป้องกันไม่ให้เหตุการณ์จาก bubbling up the DOM tree หรือเรียกง่ายๆว่าการแพร่พันธุ์ โดยคนที่เคยเขียน JavaScript จะเคยเจอเหตุการ์ณนี้อย่างแน่นอน javascript เป็นภาษาโปรแกรมที่นักพัฒนาใช้ในการสร้างหน้าเว็บแบบอินเทอร์แอคทีฟ ตั้งแต่การรีเฟรชฟีดสื่อโซเชียลไปจนถึงการแสดงภาพเคลื่อนไหวและแผนที่แบบอินเทอร์แอคทีฟ โดยปัจุบันก็มีการใช้งานร่วมกับตัว HTML เพื่อจัดทำเว็บไซต์

 

 อย่างที่บอกกันไปว่าตัว event.stopPropagation() เป็นการหยุด bubbling up the DOM tree หรือเรียกง่ายๆว่าการแพร่พันธุ์ ตรงส่วนนี้ถ้าหากใครไม่เข้าใจผมจะยกตัวอย่างง่ายๆให้โดยผมจะสร้างโปรเจคไว้ใช้ทดสอบให้ดูโดยโค้ดที่จะเขียนจะเป็นแบบนี้

    <div onclick="func1()">
        div 1
        <div onclick="func2()">
        div2
        <button onclick="func3()">btn1</button>
        </div>
    </div>

ทีนี้เราจะเขียน CSS ให้มันดูง่ายต่อการเข้าใจกันหน่อย

 เรามาเข้าเรื่องของเรากันดีกว่าจากที่เห็น div1 จะครอบ div2 ใน div2 จะมี btn1 ผมจะเขียน javascript แบบง่ายๆสำหรับ alert ข้อความเมื่อกดที่ div1, div2, btn1,

    function func1(){
        console.log("นี้คือ DIV 1");
    }
    function func2(){
        console.log("นี้คือ DIV 2");
    }   
    function func3(){
        console.log("นี้คือ BTN");
    }

นี้คือคำถาม !! หากผมกดที่ปุ่ม BTN มันต้อง log ออกมาแค่ตัวปุ่มใช่หรือไม่ คำตอบคือไม่ใช้ หากเรากดที่ปุ่ม btn1 มันจะ alert นี้คือ BTN ตามด้วย นี้คือ DIV 2 และสุดท้าย นี้คือ DIV 3 เหตุการ์ณแบบนี้เราเรียกมันว่า bubbling up the DOM tree หรือเรียกง่ายๆว่าการแพร่พันธุ์ของฟังชั่น

ทั้งๆที่เจ้าตัวฟังชั่นเขียนแยกกันและไม่ได้ใช้งานร่วมกันเลยคนที่เคยเขียน JS มาแล้วเนียก็คงเคยเจอเหตุการแบบนี้ ทั้งๆที่เรากดปุ่มแค่ปุ่มเดียวทำไมมันถึงขึ้นมาทั้งหมดละถ้าจะให้เข้าใจง่ายกว่านี้อีกเราต้องไปทำความรู้จักกับ event Bubbling และ event Capturing

 

event Bubbling และ event Capturing

 

จากรูปด้านบนจะเห็นว่าตัว button นั้นอยู่ล่างสุดของ DOM tree เมื่อเราทำการคลิกที่ button ท่านอาจจะคิดว่ามันจะตรงไปยังส่วน button เเล้วทำการรัน event ที่ button เลย แต่จริงๆเเล้วมันจะไล่รัน event ที่เหมือนกัน ( ในที่นี้คือ event click ) จากส่วน root ซึ่งก็คือ window ไล่ลงมาจนถึงตัว button( แปลว่ามันจะ log นี้คือ BTN ตามด้วย นี้คือ DIV 2 และสุดท้าย นี้คือ DIV 3 ลงมาหมดเลย ) ซึ่งเราจะเรียกการกระทำทั้งหมดนี้ว่า Event Capturing Phase จากนั้นยังไม่พอเมื่อมาถึงตัว button แล้วมันจะไล่รัน event จากตัว button กลับขึ้นไปที่ตัว root อีกครั้งด้วย ซึ่งเราจะเรียกการกระทำนี้ว่า Event Bubbling Phase มาถึงตรงนี้ทุกท่านก็จะเกิดคำถามโตๆ ขึ้นมาในใจว่า เห้ยถ้ามันเป็นแบบนี้ผลลัพธ์ที่เราควรได้จากการกดปุ่มตาม code ด้านบนสุดควรจะ log ซ้ำสองแบบนี้สิ

 

แต่สาเหตุที่ไม่เป็นเช่นนี้เพราะ เราสามารถเลือกได้ครับ ว่าอยากให้ event ของเรานั้นแสดงผลแบบ phase ไหน ซึ่งโดย Default นั้น event ส่วนใหญ่จะถูกเซ็ทไว้ให้แสดงผลในแบบ bubbling phase ( ไม่ว่าจะเป็น event ใน jquery หรือ javascript )
แล้วถ้าอยากเปลี่ยนให้มันละต้องทำอย่างไร ง่ายมากครับเพียงเเค่เรา เพิ่มค่า true เข้าไปต่อท้าย function

event.propagation()

เข้าสู่เนื้อหาหลักของเรากันดีกว่าหลังจากได้รู้แล้วว่า bubbling up the DOM tree หรือเรียกง่ายๆว่าการแพร่พันธุ์ คืออะไร จากที่เห็นด้านบนกันแล้วแล้วทีนี้เราอยากจะให้ มัน log ออกมาแค่ตัว BTN ละทำไงง่ายมากครับก็เพียงแค่เพิ่มคำสั่ง event.stopPropagation() แบบนี้

    function func1(){
        console.log("นี้คือ DIV 1");
    }
    function func2(){

        console.log("นี้คือ DIV 2");
    }   
    function func3(){
        event.stopPropagation()
        console.log("นี้คือ BTN");
    }

แค่นี้เจ้าตัว button ของเราก็จะหยุดการเเพร่พันธุ์ไปยังตัว parent ของมัน เมื่อทำการ click ที่ button มันก็จะทำการ log เพียงแค่ นี้คือ btn ไม่ไหลขึ้นไปตาม flow ของ bubbling phase เป็นที่เรียบร้อยครับ

 

สรุป event.propagation() เป็นการหยุดการแพร่พันธุ์ หรือ bubbling up the DOM tree โดยเจ้าถ้าเราดูจากรูปเจ้าตัว button จะอยู่ล่างสุดเลยทำให้มีการไล่รัน event ที่เหมือนกัน ( ในที่นี้คือ event click ) จากส่วน root ซึ่งก็คือ window ไล่ลงมาจนถึงตัว button ทำให้ค่าที่ออกมามันไม่ใช้การกด button แค่ปุ่มเดียวเราจึงต้องมีตัว event.propagation() ใช้ในการ bubbling up the DOM tree โดยนอกจากนี้แล้วใครสนใจในการเขียน JS ก็สามารถเข้าไปดูได้ที่นี้เลย JavaScript Functions หรือจะเป็นการเขียน JavaScript For Loop การสามารถเข้าไปศึกษาวิธีการเขียนได้จากเว็บเหล่านี้ได้เลย

 

อ้างอิง

DOM tree ,[ออนไลน์], เข้าถึงได้จาก https://javascript.info/dom-nodes

event.stopPropagation() Method ,[ออนไลน์], เข้าถึงได้จาก http://www.w3bai.com/th/jquery/event_stoppropagation.html#gsc.tab=0

Event.stopPropagation() ,[ออนไลน์], เข้าถึงได้จาก https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation