1. การไหลของเหตุการณ์
ลำดับที่องค์ประกอบ HTML กระตุ้นเหตุการณ์
2. Event Bubble IE ของ Event Stream เรียกว่า Event Bubble ซึ่งหมายความว่าเหตุการณ์เริ่มต้นด้วยองค์ประกอบที่เฉพาะเจาะจงที่สุด (โหนดที่มีระดับการทำรังที่ลึกที่สุดในเอกสาร) จากนั้นแพร่กระจายขึ้นทีละขั้นตอนไปยังโหนดที่เฉพาะเจาะจงน้อยกว่า (เอกสาร) 3. เหตุการณ์การจับภาพ ความคิดของการจับเหตุการณ์คือโหนดที่เฉพาะเจาะจงน้อยกว่าควรได้รับเหตุการณ์ก่อนหน้านี้ในขณะที่โหนดที่เฉพาะเจาะจงที่สุดควรได้รับโหนดในตอนท้าย วัตถุประสงค์ของการจับเหตุการณ์คือการจับเหตุการณ์ก่อนที่จะถึงเป้าหมายที่กำหนดไว้ล่วงหน้า
สตรีมเหตุการณ์ DOM
การไหลของเหตุการณ์ที่ระบุไว้ใน "การไหลของเหตุการณ์ระดับ DOM2" รวมถึงสามขั้นตอน: ขั้นตอนการจับเหตุการณ์ขั้นตอนเป้าหมายและขั้นตอนฟอง สิ่งแรกที่เกิดขึ้นคือการจับเหตุการณ์ซึ่งให้โอกาสในการสกัดกั้นเหตุการณ์ จากนั้นเป้าหมายจริงจะได้รับเหตุการณ์ ขั้นตอนสุดท้ายคือเฟสฟองซึ่งสามารถตอบสนองเหตุการณ์ได้ การใช้หน้า HTML อย่างง่ายเป็นตัวอย่างการคลิกองค์ประกอบ <div> จะทริกเกอร์เหตุการณ์ตามลำดับที่แสดงด้านล่าง
ในสตรีมเหตุการณ์ DOM เป้าหมายจริง (<div> องค์ประกอบ) ไม่ได้รับเหตุการณ์ในระหว่างขั้นตอนการจับภาพ ซึ่งหมายความว่าในระหว่างขั้นตอนการจับภาพเหตุการณ์จะหยุดลงหลังจากเอกสารถึง <html> จากนั้นไปที่ <body> ขั้นตอนต่อไปคือขั้นตอน "เป้าหมาย" ดังนั้นเหตุการณ์จึงเกิดขึ้นบน <div> และถูกมองว่าเป็นส่วนหนึ่งของเฟสฟองในการประมวลผลเหตุการณ์ จากนั้นเฟสฟองจะเกิดขึ้นและเหตุการณ์จะแพร่กระจายกลับไปที่เอกสาร
เบราว์เซอร์ส่วนใหญ่ที่สนับสนุนการสตรีมเหตุการณ์ DOM ใช้พฤติกรรมเฉพาะ แม้ว่าข้อกำหนด "เหตุการณ์ระดับ DOM2" ต้องการอย่างชัดเจนว่าขั้นตอนการจับภาพจะไม่เกี่ยวข้องกับเป้าหมายของเหตุการณ์ Safari, Chrome, Firefox และ Opera9.5 และหลังจากนั้นจะกระตุ้นเหตุการณ์ในวัตถุเหตุการณ์ในระหว่างขั้นตอนการจับกุม เป็นผลให้มีสองโอกาสในการดำเนินงานกิจกรรมบนวัตถุเป้าหมาย
หยุดกิจกรรมจากฟองสบู่
การทดลอง
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> </title> <script type = "text/javascript"> ฟังก์ชั่น onbtn () {แจ้งเตือน ('ปุ่ม'); // cancelBubble (); ป้องกันฟองเหตุการณ์} // รับฟังก์ชั่นวัตถุเหตุการณ์ getEvent () {// ถ้าเป็นเช่นหรือ chromeif (window.event) {return window.event;} // สำหรับ firefoxfunc = getEvent.Caller; // รับฟังก์ชั่นผู้โทรในขณะที่ (func! = null) {var arg0 = func.arguments [0]; // รับพารามิเตอร์แรกของผู้โทร // ตัดสินว่าพารามิเตอร์ว่างเปล่าหรือไม่ถ้า (arg0) {// ตัดสินว่า arg0 เป็นวัตถุเหตุการณ์ถ้า ((arg0.constructor == เหตุการณ์ || arg0.constructor == mouseEvent || arg0.constructor == keyboardevent) arg0.stoppropagation)) {return arg0; }} // รับ func caller func = func.caller;} return null;} // block bubbles function cancelBubble () {event = getEvent (); // firefox chrome ถ้า (event.preventdefault) {event.preventdefault (); Event.StopPropagation (); } else {// เช่น event.cancelBubble = true; Event.ReturnValue = FALSE; }} </script> </head> <body onclick = "การแจ้งเตือน ('body')"> <div onclick = "การแจ้งเตือน ('div');" style = "พื้นหลังสี: สีเขียว"> <button onclick = "onbtn ()"> dsd </button> </div> </body> </html>รหัส HTML ข้างต้นดำเนินการตามลำดับของการเรียกเหตุการณ์
ค่าเริ่มต้น: 'ปุ่ม' จะปรากฏขึ้น ---》 จะปรากฏขึ้น 'div' ----》 จะปรากฏขึ้น 'ร่างกาย'
หากคุณเพิ่มรหัส CancelBubble (): ปุ่ม 'เท่านั้น' จะปรากฏขึ้น
บทความข้างต้นมีความเข้าใจอย่างลึกซึ้งเกี่ยวกับกลไกเหตุการณ์ JS DOM มันเป็นเนื้อหาทั้งหมดที่ฉันแบ่งปันกับคุณ ฉันหวังว่ามันจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น