Apakah perbezaan antara peristiwa tindak balas dan peristiwa asli?

Perbezaan antara peristiwa tindak balas dan peristiwa asli ialah: peristiwa dalam tindak balas terikat pada dokumen manakala peristiwa asli terikat pada dom. Dari segi pengikatan, peristiwa pada DOM harus dilaksanakan sebelum peristiwa pada dokumen Objek peristiwa tindak balas ialah objek sintetik, bukan objek asli.

Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 17.0.1, komputer Dell G3.

Apakah perbezaan antara peristiwa tindak balas dan peristiwa asli?

Oleh itu, berbanding dengan tempat pengikatan, acara di dom mempunyai keutamaan berbanding acara pada dokumen

Apakah peristiwa itu?

Pertama sekali, JS adalah untuk melaksanakan beberapa operasi dinamik, dan pengguna kadangkala mahu melaksanakan beberapa fungsi, seperti menyerahkan borang, klik tetikus, dll., jadi mereka mesti mencetuskan acara ini dalam penyemak imbas , dan kemudian Penyemak imbas akan merasakan (atau menangkap) gelagat pengguna dan bertindak balas kepada acara tersebut. Ini dipanggil acara.

Apakah objek peristiwa?

Apabila sistem memanggil pengendali, ia merangkum semua maklumat tentang acara ke dalam objek, dan kemudian menyerahkannya kepada pengendali acara sebagai parameter, dan objek ini ialah objek acara. Dalam fungsi asli, anda sering melihat acara, dan perkara ini adalah apa yang kita panggil objek acara.

react mempunyai kelebihan berikut dalam pemprosesan acara:

Hampir semua acara diwakilkan kepada dokumen untuk mencapai pengoptimuman prestasi

• Untuk setiap jenis acara, acara diedarkan secara seragam menggunakan fungsi dispatch (dispatchEven)

• Objek acara (event) ialah objek sintetik ( syntheticEvent ), bukan yang asli

• Peristiwa sintetik bertindak balas

Mengapakah ia disarikan kepada peristiwa sintetik?

Jika semua fungsi pengendalian acara terikat pada DOM, respons halaman akan terjejas, menyebabkan halaman menjadi sangat perlahan. Untuk mengelakkan penyalahgunaan peristiwa DOM sedemikian dan melindungi perbezaan sistem antara peristiwa penyemak imbas yang berbeza di lapisan bawah, bertindak balas melaksanakan lapisan perantaraan - syntheticEvent

Prinsip

dalam In react, jika anda perlu mengikat acara, anda biasanya akan menulisnya dalam JSX seperti ini:

Tetapi sebagai tindak balas, acara klik sebenarnya tidak terikat pada DOM div, tetapi Ia terikat kepada DOKUMEN Apabila peristiwa berlaku dan gelembung pada dokumen, bertindak balas akan menyerahkan kandungan acara kepada fungsi yang sepadan untuk diproses

Cara menggunakan react Gunakan peristiwa asli dalam

<div onClick={this.onClick}>我是react点击事件</div>

Walaupun bertindak balas merangkumi hampir semua peristiwa asli, seperti:

Selepas Modal dibuka, mengklik pada kawasan kosong lain memerlukan penutupan Modal

pengenalan Beberapa perpustakaan pihak ketiga dilaksanakan dengan acara asli perlu menggunakan acara asli untuk pemprosesan logik perniagaan apabila mereka perlu berinteraksi antara satu sama lain

dan senario lain.

Memandangkan peristiwa asli perlu terikat pada DOM sebenar, ia biasanya terikat semasa fasa pelaksanaan fungsi componentdidmout/ref.

Penggunaan campuran acara asli dan acara sintetik

class Demo extends Domponent {
    componentDidMount () {
        const parentDom = ReactDom.findDOMNode(this)
        const childDom = parentDom.queneSelector('.button');
        childDom.addEventListen('click',this.onDomClick, false)
    }
    
    onDOMClick = (e) => {
        
    }
    render () {
        return <div>demo</div>
    }
}

Jika anda perlu mencampurkan acara asli dan acara sintetik dalam senario perniagaan, maka semasa penggunaan, anda perlu untuk memberi perhatian kepada perkara berikut:

Urutan tindak balas

Hasil keluaran:

Analisis sebab: Pertama sekali, kita tahu bahawa peristiwa asli terikat pada DOM Perkara di atas, dan peristiwa sintetik terikat pada dokumen, jadi peristiwa pada DOM dibuih dahulu, dan kemudian dilaksanakan terlebih dahulu, dan kemudian gelembung pada dokumen, dan kemudian peristiwa sintetik dilaksanakan

class Demo extends Domponent {
    componentDidMount () {
        const parentDom = ReactDom.findDOMNode(this)
        const childDom = parentDom.queneSelector('.button');
        childDom.addEventListen('click',this.onDomClick, false)
    }
    
    onDOMClick = (e) => {
        console.log('dom event!')
    }
    onReactClick = (e) => {
        console.log('react event!')
    }   
    render () {
        return <div onClick={this.onReactClick}>demo</div>
    }
}

Pembelajaran yang disyorkan: "

tutorial video reaksi

dom event! react event!

》

Atas ialah kandungan terperinci Apakah perbezaan antara peristiwa tindak balas dan peristiwa asli?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!