ทำไมคุณถึงต้องการ addeventListener?
มาดูคลิป:
รหัส HTML
<div id = "box"> ไล่ตามความฝัน </div>
รหัสด้วย ON
window.onload = function () {var box = document.getElementById ("box"); box.onclick = function () {console.log ("I am box1"); } box.onclick = function () {box.style.fontsize = "18px"; console.log ("I am box2"); }} การรันผลลัพธ์: "ฉันเป็น box2"ฉันเห็นมันครั้งที่สอง onclick เขียนทับ onclick ครั้งแรก แม้ว่าในกรณีส่วนใหญ่เราสามารถใช้เพื่อให้ได้ผลลัพธ์ที่เราต้องการบางครั้งเราจำเป็นต้องดำเนินการหลายเหตุการณ์ที่เหมือนกัน เห็นได้ชัดว่าถ้าเราไม่สามารถใช้เพื่อทำสิ่งที่เราต้องการให้เสร็จสมบูรณ์ก็ไม่จำเป็นต้องคาดเดา คุณต้องรู้ใช่แล้ว! AddEventListener สามารถผูกเหตุการณ์เดียวกันได้หลายครั้งและจะไม่เขียนทับเหตุการณ์ก่อนหน้า
รหัสที่มี addeventListener
window.onload = function () {var box = document.getElementById ("box"); box.addeventListener ("คลิก", function () {console.log ("I am box1");}) box.addeventListener ("คลิก" ฟังก์ชั่น () {console.log ("ฉันเป็น Box2");})พารามิเตอร์แรกของวิธี AddEventListenert ถูกกรอกในชื่อเหตุการณ์ โปรดทราบว่าคุณไม่จำเป็นต้องเขียน พารามิเตอร์ที่สองสามารถเป็นฟังก์ชัน พารามิเตอร์ที่สามหมายถึงกระบวนการของตัวจัดการเหตุการณ์ในขั้นตอนฟองหรือขั้นตอนการจับภาพ หาก TRUE แสดงถึงการประมวลผลของขั้นตอนการจับภาพหากเท็จแสดงถึงการประมวลผลของขั้นตอนฟองสบู่พารามิเตอร์ที่สามสามารถละเว้นได้ ในกรณีส่วนใหญ่ไม่จำเป็นต้องใช้พารามิเตอร์ที่สาม หากพารามิเตอร์ที่สามไม่ได้เขียนค่าเริ่มต้นเป็นเท็จ
การใช้พารามิเตอร์ที่สาม
บางครั้งนี่เป็นกรณี
<body>
<div id = "box">
<div id = "child"> </div>
</div>
</body>
หากฉันเพิ่มเหตุการณ์คลิกลงในกล่องจะไม่มีปัญหาถ้าฉันคลิกกล่องโดยตรง แต่ถ้าฉันคลิกที่องค์ประกอบลูกมันจะทำอย่างไร? (คำสั่งดำเนินการ)
box.addeventListener ("คลิก", function () {console.log ("box");}) child.addeventListener ("คลิก" ฟังก์ชั่น () {console.log ("เด็ก");}) ผลการดำเนินการ: กล่องเด็กนั่นคือเหตุการณ์เริ่มต้นจะดำเนินการตามลำดับที่ฟองเหตุการณ์
หากพารามิเตอร์ที่สามถูกเขียนเป็นจริงมันจะดำเนินการตามลำดับของการดำเนินการจับเหตุการณ์
box.addeventListener ("คลิก", function () {console.log ("box");}, true) child.addeventListener ("คลิก" ฟังก์ชั่น () {console.log ("เด็ก");}) ผลการดำเนินการ: Box Childกระบวนการดำเนินการฟองสบู่:
เริ่มเดือดพล่านขึ้นจากองค์ประกอบที่เฉพาะเจาะจงที่สุด (องค์ประกอบที่คุณคลิก) ใช้เคสของเราด้านบนและคำสั่งของมันคือ: child-> box
กระบวนการดำเนินการจับเหตุการณ์:
เริ่มเดือดเข้าไปในด้านในจากองค์ประกอบที่เฉพาะเจาะจงน้อยที่สุด (กล่องที่ด้านนอกสุด) ใช้กรณีของเราด้านบนและคำสั่งซื้อคือ: box-> เด็ก
บทความข้างต้นเข้าใจถึงความแตกต่างระหว่าง AddEventListener และ ON คือเนื้อหาทั้งหมดที่ฉันแบ่งปันกับคุณ ฉันหวังว่าคุณจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น