Penjelasan mendetail tentang objek peristiwa, objek sumber peristiwa, dan aliran peristiwa di js

• Apa itu event: Event mengacu pada semua event yang dapat terjadi di js dan dipantau, seperti: (mouse, keyboard, perubahan jendela browser, dll.)

• Apa yang dimaksud dengan objek peristiwa (event): Dalam istilah awam, itu adalah objek yang mencatat berbagai informasi tentang peristiwa tersebut.
  Yang perlu diperhatikan di sini adalah objek event akan memiliki masalah kompatibilitas. Di browser selain IE, itu adalah event, tetapi di non-browser adalah window.event.

 btn.onclick = fungsi(acara){biarkan e = acara ||.jendela.acara}

Sederhananya, ini mengacu pada objek spesifik tempat peristiwa terjadi. Untuk elemen elemen, objek sumber peristiwa mengacu pada elemen yang Anda klik. Ada juga masalah kompatibilitas browser:

• Di fireFox itu adalah event.srcElement
• Di IE itu adalah event.target
  Metode penulisan yang kompatibel mengacu pada objek acara

aliran acara

Alur peristiwa pada dasarnya dibagi menjadi dua kategori: 1. Menangkap peristiwa 2. Peristiwa menggelegak. Urutan pemicunya adalah menangkap terlebih dahulu lalu menggelembungkan. Namun jika dibagi lagi, akan ada tahapan target setelah tahap penggelembungan ditangkap, yaitu adalah, elemen DOM yang dioperasikan secara khusus

menangkap peristiwa

Node paling atas pertama-tama menerima peristiwa tersebut, dan kemudian menyebarkannya ke bawah ke node tertentu. misal: Saat pengguna mengklik elemen p dan menggunakan event capture, event klik akan disebarkan dalam urutan dokumen>htm>body>p. Cara penularannya dari luar ke dalam.

peristiwa menggelegak

Berlawanan dengan event capture, event ini diteruskan dari dalam ke luar. Saat pengguna mengklik p, event tersebut akan diteruskan ke induknya, p>body>html. ***Karena fitur ini sering digunakan untuk delegasi acara.

delegasi acara

Kami mengikat peristiwa yang sama untuk dipicu oleh semua elemen turunan ke elemen induk, yang dapat mengurangi operasi DOM dan meningkatkan kinerja. Metode penggunaan spesifiknya adalah dengan menggunakan metode objek sumber peristiwa.

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

Untuk mengikat kejadian klik ke li, biasanya pendekatan kita adalah mengulang kejadian klik ke li

 biarkan oLi = dokumen.querySelectorAll("li")
 for(biarkan i; i < oLi.length; i++){
            oLi[i].onclick = fungsi(){
                konsol.log("i")
            }
        }

Cara menggunakan delegasi acara adalah

 biarkan oUl = document.querySelector("ul")
  oUl.onclick = fungsi(acara){
            misalkan e = acara ||.jendela.acara
            console.log(e.target.innerHTML)
        }

• keuntungan
• Tingkatkan kinerja, tidak perlu mengulang semua elemen untuk mengikat peristiwa satu per satu.
• Fleksibel, elemen baru dapat dibuat secara dinamis tanpa mengikat ulang peristiwa.

Operasi untuk mencegah peristiwa menggelegak (penulisan kompatibilitas)

***Beberapa acara tidak memerlukan operasi penggelembungan

 fungsi stopBubble(acara){
    var e = event||window.event //Metode penulisan yang kompatibel dengan objek event e.stopProgation() ? e.stopProgation() : e.cancelBubble = true //Metode penulisan yang kompatibel dengan IE}

Blokir acara default (metode penulisan yang kompatibel)

***Blokir tag dan acara lompat dan menu default tombol kanan mouse

 fungsi cancelHandle(acara){
    var e = acara||jendela.acara
    e.preventDefault() ? e.preventDefault() : e.returnValue = false/*ie*/}

Rekomendasi terkait: [Tutorial video JavaScript]

Di atas adalah penjelasan detail mengenai event object, event source object dan event stream di js. Untuk informasi lebih lanjut, harap perhatikan artikel terkait lainnya di website PHP Mandarin!