1. คณะกรรมการจัดงานคืออะไร: ในแง่ของคนธรรมดาเหตุการณ์คือ onclick, onmouseover, onmouseout ฯลฯ ฯลฯ เป็นเหตุการณ์ สำหรับการมอบหมายพวกเขาถูกขอให้ทำ เหตุการณ์นี้ถูกเพิ่มเข้ามาในองค์ประกอบบางอย่าง แต่คุณเพิ่มลงในผู้อื่นเพื่อทำเพื่อให้กิจกรรมเสร็จสมบูรณ์
นั่นคือ: ใช้หลักการของฟองเพื่อเพิ่มเหตุการณ์ไปยังผู้ปกครองเพื่อทริกเกอร์เอฟเฟกต์การดำเนินการ
ประโยชน์: 1. ปรับปรุงประสิทธิภาพ
เราสามารถดูตัวอย่าง: LI แต่ละตัวต้องถูกกระตุ้นให้เปลี่ยนสีพื้นหลังของพวกเขา
<ul id = "ul"> <li> aaaaaaaa </li> <li> BBBBBBBB </li> <li> CCCCCCCCCC </li> </ul> window.onload = function () {var oul = document.getElementById ("ul"); i ++) {Ali [i] .onMouseOver = function () {this.style.background = "red";} ali [i] .onmouseout = function () {this.style.background = "";}}}}}}}}ด้วยวิธีนี้เราสามารถเพิ่มกิจกรรมของเมาส์ใน LI
แต่ถ้าเราอาจมีจำนวนมากสำหรับลูปมันจะส่งผลกระทบต่อประสิทธิภาพ
ด้านล่างเราสามารถใช้การมอบหมายกิจกรรมเพื่อให้ได้เอฟเฟกต์นี้ HTML ยังคงไม่เปลี่ยนแปลง
window.onload = function () {var oul = document.getElementById ("ul"); var Ali = OUL.GetElementSBYTAGNAME ("LI");/*แหล่งที่มาของเหตุการณ์ควรใช้ที่นี่: วัตถุเหตุการณ์แหล่งเหตุการณ์ ไม่ว่าจะเป็นเหตุการณ์ใดตราบใดที่องค์ประกอบที่คุณทำงานคือแหล่งเหตุการณ์ เช่น: window.event.srecelement Standard: Event.targetNodeName: ค้นหาชื่อฉลากขององค์ประกอบ */OUL.onMouseOver = ฟังก์ชั่น (ev) {var ev = ev || window.event; var target = ev.target || ev.sreclement; // alert (target.innerhtml); ถ้า (target.nodename.toLowerCase () == "li") {target.style.background = "red";}} oul.onmouseout = function (ev) {var ev = ev || window.event; var target = ev.target || ev.srelement; // alert (target.innerhtml); ถ้า (target.nodename.toLowerCase () == "li") {target.style.background = "";}}}}Benefit 2 องค์ประกอบที่เพิ่มขึ้นใหม่จะมีเหตุการณ์ก่อนหน้านี้
เรายังใช้ตัวอย่างนี้ แต่เราต้องเพิ่ม LI แบบไดนามิก คลิกปุ่มเพื่อเพิ่ม li แบบไดนามิก
ชอบ:
<อินพุต type = "ปุ่ม" id = "btn"/> <ul id = "ul"> <li> aaaaaaa </li> <li> BBBBBBBB </li> <li> CCCCCCCCC </li> </ul>
เราจะทำสิ่งนี้โดยไม่มีคณะกรรมการจัดงาน:
window.onload = function () {var oul = document.getElementById ("ul"); var Ali = oul.getElementByTagname ("li"); var obtn = document.getElementById ("btn"); var inow = 4; สำหรับ (var i = 0; "Red";} Ali [i] .onMouseOut = function () {this.style.background = "";}} entn.onclick = function () {inow ++; var oli = document.createelement ("li"); oli.innerhtml = 1111 *inow;การทำเช่นนี้เราจะเห็นว่าคลิกปุ่มที่เพิ่มขึ้นใหม่ใน LI โดยไม่ต้องมีเหตุการณ์การเคลื่อนที่ของเมาส์เพื่อเปลี่ยนสีพื้นหลังของพวกเขา
เพราะการวนรอบสำหรับการวนซ้ำเมื่อคลิกเพื่อเพิ่ม
จากนั้นเราก็ทำโดยมอบหมายงาน เป็นเพียงว่า HTML ยังคงไม่เปลี่ยนแปลง
window.onload = function () {var oul = document.getElementById ("ul"); var Ali = oul.getElementSByTagname ("li"); var obtn = document.getElementById ("btn"); var inow = 4; oul.onmousover = function window.event; var target = ev.target || ev.sreclement; // alert (target.innerhtml); ถ้า (target.nodename.toLowerCase () == "li") {target.style.background = "red";}} oul.onmouseout = function (ev) {var ev = ev || window.event; var target = ev.target || ev.srelement; // alert (target.innerhtml); if (target.nodename.toLowerCase () == "li") {target.style.background = "";}} obtn.onclick = function () {inow ++; var oli = document.createelement ( *Inow; OUl.AppendChild (Oli);}}ตกลง:
เช่นเดียวกับในโพสต์ Weibo ของเรายังคงมีเหตุการณ์เมาส์ก่อนหน้านี้ในโพสต์ Weibo ใหม่
ข้างต้นคือการว่าจ้างและผลประโยชน์ของเหตุการณ์ใน JavaScript ที่แนะนำโดยบรรณาธิการ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!