Penjelasan terperinci tentang objek acara, objek sumber acara dan aliran acara dalam js

Pemahaman tentang objek peristiwa, objek sumber peristiwa dan analisis aliran peristiwa dalam js

Objek peristiwa (peristiwa)

• Apakah itu peristiwa: Acara merujuk kepada semua peristiwa yang boleh berlaku dalam js dan dipantau, seperti: (tetikus, papan kekunci dan tetingkap penyemak imbas berubah, dsb.)

• Apakah itu peristiwa Objek (event): Dalam istilah orang awam, ia adalah objek yang merekodkan pelbagai maklumat tentang acara tersebut.
  Apa yang perlu diperhatikan di sini ialah objek acara akan mempunyai masalah keserasian Dalam penyemak imbas selain IE, ia adalah acara, tetapi dalam bukan penyemak imbas ia adalah window.event,

  <.>

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

Objek Sumber Acara

untuk meletakkannya semata -mata, ini bermakna peristiwa itu secara khusus berlaku pada objek itu elemen , objek sumber acara merujuk kepada elemen yang anda klik. Terdapat juga isu keserasian penyemak imbas:

dalam fireFox ialah event.srcElement
• dalam IE ialah event.target
• Untuk kaedah penulisan yang serasi, rujuk objek acara
  

Aliran acara

Aliran acara terbahagi terutamanya kepada dua kategori: 1. Tangkapan acara 2. Tertib pencetus acara menggelegak adalah untuk menangkap dahulu dan kemudian gelembung

Tetapi jika ia dibahagikan, akan ada peringkat sasaran dalam peringkat tangkapan dan menggelegak, iaitu peringkat operasi untuk elemen DOM tertentu untuk dikendalikan

Acara tangkapan

Nod paling atas mula-mula menerima peristiwa, dan kemudian menyebarkannya ke bawah ke nod tertentu. cth: Apabila pengguna mengklik pada elemen p dan menggunakan tangkapan peristiwa, peristiwa klik akan disebarkan dalam susunan dokumen>htm>body>p. Cara penghantaran adalah dari luar ke dalam.

Acara gelembung

Berlawanan dengan peristiwa tangkapan, ia dihantar dari dalam ke luar Apabila pengguna mengklik p, ia akan dihantar kepada induk, p>body> ;html . ***Sebab ciri ini sering digunakan untuk delegasi acara.

Perwakilan Acara

Kami mengikat peristiwa yang sama untuk dicetuskan oleh semua elemen anak kepada elemen induk, yang boleh mengurangkan operasi DOM dan meningkatkan prestasi. Kaedah penggunaan khusus adalah menggunakan kaedah objek sumber peristiwa.

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

Untuk mengikat acara klik ke li, biasanya pendekatan kami adalah untuk menggelung acara klik ke li

 let oLi = document.querySelectorAll("li")
 for(let i; i < oLi.length; i++){
            oLi[i].onclick = function(){
                console.log("i")
            }
        }

dan kaedah menggunakan perwakilan acara ialah

let oUl = document.querySelector("ul")
  oUl.onclick = function(event){
            let e = event || window.event
            console.log(e.target.innerHTML)
        }

Kelebihan
• Tingkatkan prestasi, tidak perlu mengulangi semua elemen untuk mengikat acara satu demi satu.
• Fleksibel, elemen baharu boleh dicipta secara dinamik tanpa mengikat semula acara.

Cegah acara menggelegak dan sekat acara lalai

Operasi untuk mengelakkan acara menggelegak (penulisan keserasian)

*** Sesetengah acara tidak memerlukan menggelegak

function stopBubble(event){
    var e = event||window.event //事件对象兼容写法
    e.stopProgation() ? e.stopProgation() : e.cancelBubble = true //IE兼容写法}

Sekat acara lalai (tulisan serasi)

*** Sekat teg dan lompat lalai dan acara menu butang kanan tetikus

function cancelHandle(event){
    var e = event||window.event
    e.preventDefault() ? e.preventDefault() : e.returnValue = false/*ie*/}

Pengesyoran berkaitan: [

Tutorial video JavaScript]

Atas ialah kandungan terperinci Penjelasan terperinci tentang objek acara, objek sumber acara dan aliran acara dalam js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!