เมื่อพูดถึงเหตุการณ์ JavaScript มันเป็นเรื่องยากที่จะหลีกเลี่ยงสามหัวข้อ: ฟองเหตุการณ์การจับเหตุการณ์และการปิดกั้นเหตุการณ์เริ่มต้นไม่ว่าจะเป็นการสัมภาษณ์หรือในการทำงานประจำวัน
1. ฟองสบู่
มาดูรหัสชิ้นหนึ่ง:
var $ input = document.getElementsByTagname ("input") [0]; var $ div = document.getElementByTagname ("div") [0]; var $ body = document.getElementByTagname ("body") [0]; $ input.onclick = function (e) window.e; การแจ้งเตือน ("red")} $ div.onclick = function (e) {this.style.border = "5px Solid Green" Alert ("Green")} $ body.onclick = function (e) {this.style.border = "5px Solid Yellow"รหัส HTML
<div> <อินพุต type = "button" value = "Test Event Bubbles" /> </div> "Red", "Green", "Yellow" ปรากฏขึ้นในทางกลับกัน
ความตั้งใจดั้งเดิมของคุณคือการทริกเกอร์องค์ประกอบปุ่ม แต่จะถูกเรียกเข้ากับเหตุการณ์ที่ถูกผูกไว้กับองค์ประกอบหลัก นี่คือฟองสบู่
หากเหตุการณ์เชื่อมโยงกับอินพุตถูกเปลี่ยนเป็น:
$ input.onclick = function (e) {this.style.border = "5px solid red" var e = e || window.e; การแจ้งเตือน ("สีแดง") E.StopPropagation ();}ในเวลานี้มีเพียง "สีแดง" เท่านั้นที่จะปรากฏขึ้นเพราะมันป้องกันเหตุการณ์จากฟองสบู่
2. การจับเหตุการณ์
เนื่องจากมีเหตุการณ์เดือดร้อนจึงอาจมีการจับเหตุการณ์ซึ่งเป็นกระบวนการย้อนกลับ ความแตกต่างมาจากองค์ประกอบด้านบนไปยังองค์ประกอบเป้าหมายหรือจากองค์ประกอบเป้าหมายไปยังองค์ประกอบด้านบน
มาดูโค้ด:
$ input.addeVentListener ("คลิก", function () {this.style.border = "5px red red"; แจ้งเตือน ("สีแดง")}, จริง) $ div.addeventListener ("คลิก", ฟังก์ชั่น () {this.style.border = "5px Solid Green"; function () {this.style.border = "5px Solid Yellow";ในเวลานี้ "เหลือง", "เขียว", "สีแดง" ปรากฏขึ้นทีละคนซึ่งเป็นการจับเหตุการณ์
3. บล็อกเหตุการณ์เริ่มต้น
มีพฤติกรรมเริ่มต้นขององค์ประกอบ HTML เช่นแท็ก A และจะมีการดำเนินการกระโดดหลังจากคลิก อินพุตประเภทการส่งในแบบฟอร์มฟอร์มมีเหตุการณ์การส่งข้อมูลการส่งเริ่มต้น อินพุตประเภทรีเซ็ตมีพฤติกรรมการรีเซ็ตแบบฟอร์ม หากคุณต้องการบล็อกพฤติกรรมเริ่มต้นของเบราว์เซอร์เหล่านี้ JavaScript จะให้วิธีการแก่คุณ
var $ a = document.getElementsByTagname ("a") [0]; $ a.onclick = ฟังก์ชั่น (e) {การแจ้งเตือน ("การดำเนินการกระโดดถูกบล็อกโดยฉัน") e.preventDefault (); // return false; // มันเป็นไปได้} <a href = "http://keleyi.com"> ke leyi </a> เหตุการณ์เริ่มต้นหายไปเนื่องจาก return false และ e.preventdefault () มีผลเหมือนกันมีความแตกต่างหรือไม่? แน่นอนว่ามี
พฤติกรรมเริ่มต้นของโฮสต์เหตุการณ์สามารถจัดระเบียบได้เฉพาะในแอตทริบิวต์เหตุการณ์ HTML และวิธีการจัดการเหตุการณ์ระดับ DOM0
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น