การอ่านที่เกี่ยวข้อง:
JavaScript เหตุการณ์สรุปการเรียนรู้ (V) ประเภทเหตุการณ์เมาส์ใน JS
//www.vevb.com/article/86259.htm
สรุปเหตุการณ์ JavaScript การเรียนรู้ (i) เหตุการณ์เหตุการณ์
//www.vevb.com/article/86261.htm
สรุปเหตุการณ์การเรียนรู้ JavaScript (IV) สมาชิกสาธารณะของเหตุการณ์ (คุณสมบัติและวิธีการ)
//www.vevb.com/article/86262.htm
JavaScript เหตุการณ์สรุปการเรียนรู้ (ii) JS Event Handler
//www.vevb.com/article/86264.htm
JavaScript เหตุการณ์สรุปการเรียนรู้ (iii) วัตถุเหตุการณ์ JS
1. เหตุการณ์
เหตุการณ์คือการกระทำบางอย่างที่ดำเนินการโดยผู้ใช้หรือเบราว์เซอร์เองเช่นคลิก, โหลดและ MouseOver เป็นชื่อทั้งหมดของเหตุการณ์
เหตุการณ์คือสะพานเชื่อมระหว่าง JavaScript และ DOM
หากคุณทริกเกอร์ฉันจะเรียกใช้งานเหตุการณ์และเรียกใช้ฟังก์ชันการประมวลผลเพื่อเรียกใช้รหัส JavaScript ที่เกี่ยวข้องเพื่อให้การตอบกลับ
ตัวอย่างทั่วไปคือ: เหตุการณ์โหลดจะถูกเรียกใช้หลังจากโหลดหน้าเว็บ; ผู้ใช้คลิกองค์ประกอบและทริกเกอร์เหตุการณ์คลิก
2. การไหลของเหตุการณ์
1. การรับรู้ถึงไข้หวัดใหญ่ของเหตุการณ์
คำถาม: คลิกที่องค์ประกอบหน้าองค์ประกอบประเภทใดที่สามารถสัมผัสเหตุการณ์ดังกล่าวได้?
คำตอบ: ในขณะที่คลิกที่องค์ประกอบคุณยังคลิกที่องค์ประกอบคอนเทนเนอร์ขององค์ประกอบหรือแม้แต่ทั้งหน้า
ตัวอย่าง: มีวงกลมศูนย์กลางสามวงเพิ่มฟังก์ชั่นการจัดการเหตุการณ์ที่สอดคล้องกันในแต่ละวงกลมและข้อความที่เกี่ยวข้องจะปรากฏขึ้น คลิกที่วงกลมด้านในสุดและคลิกที่วงกลมด้านนอกดังนั้นเหตุการณ์คลิกของวงกลมด้านนอกจะถูกเรียกใช้
<! doctype html> <html> <head lang = "en"> <meta charset = "utf-8"> <title> </title> </head> <style> #OUTER {ตำแหน่ง: สัมบูรณ์; ความกว้าง: 400px; ความสูง: 400px; ด้านบน: 0; ซ้าย: 0; ด้านล่าง: 0; ขวา: 0; มาร์จิ้น: อัตโนมัติ; พื้นหลังสี: Deeppink; } #MIDDLE {ตำแหน่ง: สัมบูรณ์; ความกว้าง: 300px; ความสูง: 300px; ด้านบน: 50%; ขอบซ้าย: -150px; ระยะขอบด้านบน: -150px; พื้นหลังสี: DeepskyBlue; } #inner {ตำแหน่ง: สัมบูรณ์; ความกว้าง: 100px; ความสูง: 100px; ด้านบน: 50%; ซ้าย: 50%; ขอบซ้าย: -50px; ระยะขอบด้านบน: -50px; พื้นหลังสี: Darkgreen; TEXT-ALIGN: CENTER; ความสูงของสาย: 100px; สี: สีขาว; }#outer,#middle,#inner {Border-Radius: 100%; } </style> <body> <div id = "outer"> <div id = "middle"> <div id = "inner"> คลิกฉัน! </div> </div> </div> <script> var innerCircle = document.getElementById ("inner"); innerCircle.onclick = function () {alert ("innerCircle"); - var middlecircle = document.getElementById ("กลาง"); middlecircle.onclick = function () {alert ("middlecircle"); } var outercircle = document.getElementById ("OUTER"); OuterCircle.onclick = function () {Alert ("Outercircle"); } </script> </body> </html>ผลกระทบมีดังนี้:
2. การไหลของเหตุการณ์
เมื่อเหตุการณ์เกิดขึ้นมันจะเผยแพร่ในลำดับที่เฉพาะเจาะจงระหว่างโหนดองค์ประกอบและโหนดรูท โหนดทั้งหมดที่ผ่านเส้นทางจะได้รับเหตุการณ์ กระบวนการเผยแพร่นี้เป็นกระแสเหตุการณ์ DOM
ลำดับของการแพร่กระจายเหตุการณ์สอดคล้องกับโมเดลสตรีมเหตุการณ์สองรุ่นของเบราว์เซอร์: การจับกระแสเหตุการณ์และสตรีมเหตุการณ์ฟอง
กระแสเหตุการณ์ฟอง: การแพร่กระจายของเหตุการณ์มาจากเป้าหมายเหตุการณ์ที่เฉพาะเจาะจงที่สุดไปจนถึงเป้าหมายเหตุการณ์ที่เฉพาะเจาะจงน้อยที่สุด นั่นคือจากใบไม้ของต้นไม้ DOM ไปจนถึงราก
กระแสเหตุการณ์ที่จับได้: การแพร่กระจายของเหตุการณ์มาจากเป้าหมายเหตุการณ์ที่เฉพาะเจาะจงน้อยที่สุดไปยังเป้าหมายเหตุการณ์ที่เฉพาะเจาะจงที่สุด นั่นคือจากรากของต้นไม้ DOM ไปจนถึงใบไม้
<! doctype html> <html> <head lang = "en"> <meta charset = "utf-8"> <title> </title> </head> <body> <div id = "mydiv"> คลิกฉัน!
ในรหัส HTML ด้านบนคลิกองค์ประกอบ <div> ในหน้า
ในกระแสเหตุการณ์เดือดพล่านคลิกคำสั่งการแพร่กระจายเหตุการณ์คือ <div> -》 <body> -》 <html> -》 เอกสาร
ในกระแสเหตุการณ์ที่ถูกจับให้คลิกคำสั่งการแพร่กระจายเหตุการณ์คือเอกสาร -》 <html> -》 <body> -》 <div>
บันทึก:
1) เบราว์เซอร์ที่ทันสมัยทั้งหมดรองรับฟองสบู่เหตุการณ์ แต่มีความแตกต่างเล็กน้อยในการใช้งานเฉพาะ:
ใน IE5.5 และก่อนหน้านี้ฟองเหตุการณ์จะข้ามองค์ประกอบ <html> (กระโดดโดยตรงจากร่างกายไปยังเอกสาร)
IE9, Firefox, Chrome และ Safari Bubble เหตุการณ์ไปจนถึงวัตถุหน้าต่าง
2) IE9, Firefox, Chrome, Opera และ Safari ทั้งหมดสนับสนุนการจับเหตุการณ์ แม้ว่ามาตรฐาน DOM ต้องการให้เหตุการณ์ควรเผยแพร่จากวัตถุเอกสาร แต่เบราว์เซอร์เหล่านี้เริ่มจับเหตุการณ์จากวัตถุหน้าต่าง
3) เนื่องจากเบราว์เซอร์เก่าไม่สนับสนุนมีเพียงไม่กี่คนที่ใช้การจับเหตุการณ์ ขอแนะนำให้ใช้ฟองสบู่
สตรีมเหตุการณ์ DOM
มาตรฐาน DOM ใช้ Capture + Bubbling สตรีมเหตุการณ์ทั้งสองทริกเกอร์วัตถุทั้งหมดของ DOM เริ่มต้นด้วยวัตถุเอกสารและลงท้ายด้วยวัตถุเอกสาร
มาตรฐาน DOM กำหนดว่าการไหลของเหตุการณ์มีสามขั้นตอน: ขั้นตอนการจับเหตุการณ์ในระยะเป้าหมายและเวทีฟองเหตุการณ์
ขั้นตอนการจับเหตุการณ์: เป้าหมายจริง (<div>) จะไม่ได้รับเหตุการณ์ในระหว่างขั้นตอนการจับ นั่นคือในขั้นตอนการจับภาพเหตุการณ์จะหยุดจากเอกสารเป็น <html> จากนั้นไป <body> ในภาพด้านบนมันคือ 1 ~ 3
ในขั้นตอนเป้าหมาย: เหตุการณ์เกิดขึ้นและถูกประมวลผลบน <div> แต่การประมวลผลเหตุการณ์จะถูกมองว่าเป็นส่วนหนึ่งของเฟสเดือด
Bubble Phase: เหตุการณ์เผยแพร่กลับไปยังเอกสาร
บันทึก:
1): มาตรฐาน DOM กำหนดว่าการจับเหตุการณ์การจับเหตุการณ์เกี่ยวข้องกับเป้าหมายเหตุการณ์ แต่เหตุการณ์ในวัตถุเหตุการณ์จะถูกตั้งค่าใน IE9, Safari, Chrome, Firefox, Opera9.5 และรุ่นใหม่กว่าจะเริ่มเหตุการณ์ในวัตถุเหตุการณ์ในระหว่างขั้นตอนการจับภาพ เป็นผลให้มีสองโอกาสในการดำเนินงานกิจกรรมบนวัตถุเป้าหมาย
2): ไม่ใช่ทุกเหตุการณ์ที่ผ่านขั้นตอนฟอง เหตุการณ์ทั้งหมดผ่านขั้นตอนการจับภาพและอยู่ในขั้นตอนเป้าหมาย แต่เหตุการณ์บางอย่างข้ามเวทีฟอง: ตัวอย่างเช่นเหตุการณ์โฟกัสที่ได้รับโฟกัสอินพุตและเหตุการณ์เบลอที่สูญเสียโฟกัสอินพุต
ตัวอย่างสองโอกาสในการใช้งานเหตุการณ์บนวัตถุเป้าหมาย:
<! doctype html> <html> <head lang = "en"> <meta charset = "utf-8"> <title> </title> </head> <style> #OUTER {ตำแหน่ง: สัมบูรณ์; ความกว้าง: 400px; ความสูง: 400px; ด้านบน: 0; ซ้าย: 0; ด้านล่าง: 0; ขวา: 0; มาร์จิ้น: อัตโนมัติ; พื้นหลังสี: Deeppink; } #MIDDLE {ตำแหน่ง: สัมบูรณ์; ความกว้าง: 300px; ความสูง: 300px; ด้านบน: 50%; ขอบซ้าย: -150px; ระยะขอบด้านบน: -150px; พื้นหลังสี: DeepskyBlue; } #inner {ตำแหน่ง: สัมบูรณ์; ความกว้าง: 100px; ความสูง: 100px; ด้านบน: 50%; ซ้าย: 50%; ขอบซ้าย: -50px; ระยะขอบด้านบน: -50px; พื้นหลังสี: Darkgreen; TEXT-ALIGN: CENTER; ความสูงของสาย: 100px; สี: สีขาว; }#outer,#middle,#inner {Border-Radius: 100%; } </style> <body> <div id = "outer"> <div id = "middle"> <div id = "inner"> คลิกฉัน! </div> </div> </div> <script> var innerCircle = document.getElementById ("inner"); InnerCircle.addeVentListener ("คลิก", function () {Alert ("เหตุการณ์การคลิกของ InnerCircle ถูกยิงในขั้นตอนการจับ");}, จริง); InnerCircle.addeVentListener ("คลิก", function () {Alert ("เหตุการณ์การคลิกของ InnerCircle ถูกยิงในเวทีฟอง");}, false); var middlecircle = document.getElementById ("กลาง"); middlecircle.addeventListener ("คลิก" ฟังก์ชัน () {การแจ้งเตือน ("เหตุการณ์การคลิกของ Middlecircle ถูกยิงในขั้นตอนการจับภาพ");}, จริง); middlecircle.addeventListener ("คลิก", ฟังก์ชัน () {การแจ้งเตือน ("เหตุการณ์การคลิกของ Middlecircle ถูกยิงในเวทีฟอง");}, เท็จ); var outercircle = document.getElementById ("OUTER"); Outercircle.addeVentListener ("คลิก", function () {Alert ("เหตุการณ์การคลิกของ Outercircle ถูกยิงในขั้นตอนการจับภาพ");}, จริง); outercircle.addeventListener ("คลิก", function () {Alert ("เหตุการณ์การคลิกของ Outercircle ถูกยิงในระยะฟอง");}, false); </script> </body> </html>เอฟเฟกต์การดำเนินการคือ 6 กล่องจะปรากฏขึ้นหลังจากนั้นอีกกล่อง เพื่ออธิบายหลักการฉันรวมเข้ากับภาพ:
3. แอปพลิเคชั่นทั่วไปของการไหลของเหตุการณ์ - พร็อกซีเหตุการณ์
ในการประมวลผลเหตุการณ์แบบดั้งเดิมจะต้องเพิ่มตัวจัดการเหตุการณ์ในแต่ละองค์ประกอบ JS Event Proxy เป็นเทคนิคที่ง่ายและมีประสิทธิภาพซึ่งคุณสามารถเพิ่มโปรเซสเซอร์เหตุการณ์ในองค์ประกอบหลักได้ดังนั้นจึงหลีกเลี่ยงการเพิ่มโปรเซสเซอร์เหตุการณ์ในองค์ประกอบเด็กหลายตัว
หลักการของพร็อกซีเหตุการณ์ใช้ฟองสบู่และองค์ประกอบเป้าหมายเพิ่มตัวประมวลผลเหตุการณ์ในองค์ประกอบหลักรอองค์ประกอบลูกไปยังเหตุการณ์ฟองสบู่และองค์ประกอบหลักสามารถกำหนดองค์ประกอบของเด็กที่ผ่านเป้าหมาย สำหรับเนื้อหาเพิ่มเติมเกี่ยวกับเป้าหมายโปรดดูตัวอย่างต่อไปนี้สำหรับสมาชิกสาธารณะ (คุณสมบัติและวิธีการ) ของเหตุการณ์ (IV) สำหรับตัวอย่างต่อไปนี้
การประมวลผลเหตุการณ์แบบดั้งเดิมการเพิ่มตัวจัดการเหตุการณ์ในแต่ละองค์ประกอบรหัสมีดังนี้:
<body> <ul id = "รายการสี"> <li> สีแดง </li> <li> สีส้ม </li> <li> สีเหลือง </li> <li> สีเขียว </li> <li> สีน้ำเงิน </li> <li> Indigo </li> <li> สีม่วง </li> colors = colorlist.getElementByTagname ("li"); การแจ้งเตือน (TargetElement.innerHtml);วิธีการประมวลผลของเอเจนต์เหตุการณ์มีดังนี้:
<body> <ul id = "ลิสต์สี"> <li> สีแดง </li> <li> สีส้ม </li> <li> สีเหลือง </li> <li> สีเขียว </li> <li> สีน้ำเงิน </li> <li> Indigo </li> <li> สีม่วง </li> colorlist.addeventListener ('คลิก', showcolor, false); }}) (); </script> </body>เพื่อสรุปผลประโยชน์ของพร็อกซีเหตุการณ์:
. ลดโปรเซสเซอร์เหตุการณ์หลายรายการเป็นหนึ่งเนื่องจากตัวประมวลผลเหตุการณ์จะต้องอยู่ในหน่วยความจำซึ่งปรับปรุงประสิทธิภาพ ลองนึกภาพว่ามีตาราง 100 แถวเปรียบเทียบวิธีดั้งเดิมของตัวจัดการเหตุการณ์ที่มีผลผูกพันสำหรับแต่ละเซลล์ที่มีพร็อกซีเหตุการณ์ (เช่นการเพิ่มตัวจัดการเหตุการณ์ลงในตาราง) มันไม่ยากที่จะสรุปว่าพร็อกซีของเหตุการณ์จะหลีกเลี่ยงความเสี่ยงที่อาจเกิดขึ้นและปรับปรุงประสิทธิภาพ
ข. การอัปเดต DOM ไม่จำเป็นต้องมีการรีใหม่โปรเซสเซอร์เหตุการณ์เนื่องจากพร็อกซีเหตุการณ์สามารถใช้วิธีการประมวลผลที่แตกต่างกันสำหรับองค์ประกอบเด็กที่แตกต่างกัน หากมีการเพิ่มองค์ประกอบของเด็กอื่น ๆ (a, span, div ฯลฯ ) คุณสามารถแก้ไขฟังก์ชันตัวจัดการเหตุการณ์ของเอเจนต์เหตุการณ์ได้โดยตรง ไม่จำเป็นต้อง rebind โปรเซสเซอร์และไม่จำเป็นต้องวนซ้ำอีกครั้ง
ข้างต้นเป็นสรุปการเรียนรู้เหตุการณ์ JavaScript (i) ความรู้ที่เกี่ยวข้องเกี่ยวกับการสตรีมเหตุการณ์ที่บรรณาธิการแนะนำให้คุณ ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน!