คำอธิบายโดยละเอียดเกี่ยวกับวัตถุเหตุการณ์ วัตถุแหล่งที่มาของเหตุการณ์ และสตรีมเหตุการณ์ใน js

• เหตุการณ์คืออะไร: เหตุการณ์หมายถึงเหตุการณ์ทั้งหมดที่สามารถเกิดขึ้นใน js และได้รับการตรวจสอบ เช่น: (เมาส์ แป้นพิมพ์ การเปลี่ยนแปลงหน้าต่างเบราว์เซอร์ ฯลฯ)

• วัตถุเหตุการณ์คืออะไร (เหตุการณ์): ในแง่ของคนธรรมดา มันเป็นวัตถุที่บันทึกข้อมูลต่าง ๆ เกี่ยวกับเหตุการณ์
  สิ่งที่ต้องสังเกตที่นี่คือออบเจ็กต์เหตุการณ์จะมีปัญหาความเข้ากันได้ ในเบราว์เซอร์อื่นที่ไม่ใช่ IE จะเป็นเหตุการณ์ แต่ในเบราว์เซอร์ที่ไม่ใช่เบราว์เซอร์จะเป็น window.event

 btn.onclick = function(event){let e = event ||. window.event}

พูดง่ายๆ ก็คือหมายถึงออบเจ็กต์เฉพาะที่เกิดเหตุการณ์ขึ้น สำหรับองค์ประกอบองค์ประกอบ ออบเจ็กต์แหล่งที่มาของเหตุการณ์จะอ้างอิงถึงองค์ประกอบที่คุณคลิก นอกจากนี้ยังมีปัญหาความเข้ากันได้ของเบราว์เซอร์:

• ใน fireFox มันคือ event.srcElement
• ใน IE คือ event.target
  วิธีการเขียนที่เข้ากันได้หมายถึงวัตถุเหตุการณ์

กระแสเหตุการณ์

โฟลว์เหตุการณ์จะแบ่งออกเป็นสองประเภทหลักๆ คือ 1. เหตุการณ์การจับภาพ 2. เหตุการณ์ที่เดือดปุด ๆ ลำดับของการทริกเกอร์คือให้จับภาพก่อนแล้วจึงเกิดฟอง คือองค์ประกอบ DOM ที่ต้องดำเนินการโดยเฉพาะ

จับภาพเหตุการณ์

โหนดบนสุดจะได้รับเหตุการณ์ก่อน จากนั้นจึงเผยแพร่ลงไปยังโหนดที่ระบุ เช่น: เมื่อผู้ใช้คลิกที่องค์ประกอบ p และใช้การจับเหตุการณ์ เหตุการณ์การคลิกจะถูกเผยแพร่ตามลำดับของ document>htm>body>p โหมดการส่งสัญญาณคือจากภายนอกสู่ภายใน

เหตุการณ์เดือดปุดๆ

ตรงกันข้ามกับเหตุการณ์การจับภาพ มันจะถูกส่งผ่านจากภายในสู่ภายนอก เมื่อผู้ใช้คลิก p มันจะถูกส่งผ่านไปยังพาเรนต์ p>body>html ***เนื่องจากฟีเจอร์นี้มักใช้สำหรับการมอบหมายกิจกรรม

การมอบหมายงาน

เราเชื่อมโยงเหตุการณ์เดียวกันเพื่อให้องค์ประกอบย่อยทั้งหมดทริกเกอร์กับองค์ประกอบหลัก ซึ่งสามารถลดการดำเนินการ DOM และปรับปรุงประสิทธิภาพได้ วิธีการใช้งานเฉพาะคือการใช้วิธีการวัตถุแหล่งที่มาของเหตุการณ์

 <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

ในการผูกเหตุการณ์การคลิกเข้ากับ li โดยปกติแนวทางของเราคือการวนซ้ำเหตุการณ์การคลิกกับ li

 ให้ oLi = document.querySelectorAll("li")
 สำหรับ (ให้ i; i < oLi.length; i++){
            oLi[i].onclick = ฟังก์ชั่น(){
                console.log("ฉัน")
            -
        -

วิธีใช้การมอบหมายงานคือ

 ให้ oUl = document.querySelector("ul")
  oUl.onclick = ฟังก์ชั่น (เหตุการณ์) {
            ให้ e = เหตุการณ์ ||. window.event
            console.log(e.target.innerHTML)
        -

• ข้อได้เปรียบ
• ปรับปรุงประสิทธิภาพโดยไม่จำเป็นต้องวนซ้ำองค์ประกอบทั้งหมดเพื่อเชื่อมโยงเหตุการณ์ทีละรายการ
• องค์ประกอบใหม่ที่ยืดหยุ่นสามารถสร้างได้แบบไดนามิกโดยไม่ต้องเชื่อมโยงเหตุการณ์ใหม่

การดำเนินการป้องกันเหตุการณ์เดือด (เขียนความเข้ากันได้)

***บางงานไม่จำเป็นต้องมีการเดือดพล่าน

 ฟังก์ชั่น stopBubble (เหตุการณ์) {
    var e = event||window.event //วิธีการเขียนที่เข้ากันได้กับวัตถุเหตุการณ์ e.stopProgation() ? e.stopProgation() : e.cancelBubble = true //วิธีการเขียนที่เข้ากันได้กับ IE}

บล็อกเหตุการณ์เริ่มต้น (วิธีการเขียนที่เข้ากันได้)

***บล็อกแท็กและปุ่มเมาส์ขวาข้ามเหตุการณ์เริ่มต้นและเมนู

 ฟังก์ชั่น cancelHandle (เหตุการณ์) {
    var e = event||window.event
    e.preventDefault() ? e.preventDefault() : e.returnValue = false/*ie*/}

คำแนะนำที่เกี่ยวข้อง: [วิดีโอสอน JavaScript]

ข้างต้นเป็นคำอธิบายโดยละเอียดเกี่ยวกับวัตถุเหตุการณ์ แหล่งที่มาของเหตุการณ์ และสตรีมเหตุการณ์ใน js สำหรับข้อมูลเพิ่มเติม โปรดอ่านบทความอื่นๆ ที่เกี่ยวข้องบนเว็บไซต์ PHP ภาษาจีน