การ propagation ของ javascript

propagation ตามความหมายในพจนานุกรมหมายถึงการแพร่พันธ์ ดังนั้นใน javascript ก็จะใช้ในลักษณะที่ใกล้เคียงกัน ดังในตัวอย่างนี้

เริ่มต้นจากการที่มี

ในตัวอย่งจะมี span วางอยู่บน p และ ทั้งสอง element นี้ก็วางอยู่บน div อีกทีนึง ดังนั้นการ propagation ก็จะเกิดขึ้น เมื่อไหร่ที่มีการ click ที่ element span ก็จะเกิดการแพร่พันธ์ของการ click ไปยัง p และ div ด้วย หมายถึงเรา click แค่ span แต่เหมือนเราได้ click ทั้ง span, p และ div พร้อมๆกัน ดังนั้นถ้าเราไม่ให้เกิดการ propagate ก็ให้ทำการใช้ คำสั่ง event.stopPropagation() ซึ่งจะต้องรับ event object เข้ามาก่อน ซึ่งในทุกๆ event จะมี event object ให้ใช้งานอยู่แล้ว ยกตัวอย่างเช่น

จากในตัวอย่างเรารับ parameter ของ function มาเป็น event เราก็เลยสั่งให้หยุดการ propagate ด้วย event.stopPpropagation(); ทำให้การ click ที่ span จะไม่ไปเรียก onclick ของ p และ div ขึ้นมาทำงาน ตรงกันข้ามถ้าเรา comment เอา event.stopPropagation() ออก ก็จะพบว่าเมื่อเรา click ที่ span จะมี pop up ขึ้นมา 3 ครั้ง เนื่องจาก event onclick ของ span, p และ div ถูกเรียกขึ้นมาใช้งานตามลำดับ

รับเขียนโปรแกรมและสอนเขียนโปรแกรมด้วย PHP
ติดต่อสอบถามรายละเอียดเพิ่มเติมได้ที่ 062-419-9498
หรือ E-mail: training@irobust.co.th

Leave a Reply

Your email address will not be published. Required fields are marked *