Mengapa Anda membutuhkan AddEventListener?
Mari kita lihat klip:
Kode HTML
<Div id = "box"> Chasing Dreams </Div>
Kode dengan 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"); }} Hasil menjalankan: "Saya box2"Saya melihatnya, Onclick kedua menimpa onklick pertama. Meskipun dalam kebanyakan kasus kita dapat menggunakan untuk menyelesaikan hasil yang kita inginkan, kadang -kadang kita perlu menjalankan beberapa peristiwa yang identik. Jelas bahwa jika kita tidak dapat menggunakan untuk menyelesaikan apa yang kita inginkan, maka tidak perlu menebak. Anda harus tahu, benar! AddEventListener dapat mengikat acara yang sama beberapa kali dan tidak akan menimpa acara sebelumnya.
Kode dengan AddEventListener
window.onload = function () {var box = document.geteLementById ("box"); box.addeventListener ("klik", function () {console.log ("i am box1");}) box.addeventListener ("klik", function () {console.log ("I am box2");})} Hasil menjalankan: Saya box1 I am Box2Parameter pertama dari metode AddEventListenert diisi dalam nama acara. Perhatikan bahwa Anda tidak perlu menulis. Parameter kedua bisa berupa fungsi. Parameter ketiga mengacu pada proses event handler di tahap gelembung atau tahap penangkapan. Jika True mewakili pemrosesan tahap penangkapan, jika False mewakili pemrosesan tahap gelembung, parameter ketiga dapat dihilangkan. Dalam kebanyakan kasus, parameter ketiga tidak perlu digunakan. Jika parameter ketiga tidak ditulis, false default false.
Penggunaan parameter ketiga
Terkadang ini masalahnya
<body>
<Div id = "box">
<Div ID = "Child"> </div>
</div>
</body>
Jika saya menambahkan acara klik ke kotak, tidak ada masalah jika saya mengklik kotak secara langsung, tetapi jika saya mengklik elemen anak, bagaimana melakukannya? (Perintah Eksekusi)
box.addeventListener ("klik", function () {console.log ("box");}) child.addeventListener ("klik", function () {console.log ("child");}) hasil eksekusi: kotak anakArtinya, acara default dilakukan dalam urutan di mana acara gelembung.
Jika parameter ketiga ditulis sebagai benar, itu akan dilakukan dalam urutan eksekusi event capture.
box.addeventListener ("klik", function () {console.log ("box");}, true) child.addeventListener ("klik", function () {console.log ("child");}) hasil eksekusi: box childProses Eksekusi Gelembung Acara:
Mulailah menggelegak ke atas dari elemen yang paling spesifik (elemen yang Anda klik). Ambil kasus kami di atas dan urutannya adalah: anak-> kotak
Proses Eksekusi Pengambilan Acara:
Mulailah menggelegak ke dalam dari elemen paling tidak spesifik (kotak pada yang paling luar). Ambil kasus kami di atas dan pesanannya adalah: kotak-> anak
Artikel di atas secara komprehensif memahami perbedaan antara AddEventListener dan ON adalah semua konten yang saya bagikan dengan Anda. Saya harap Anda dapat memberi Anda referensi dan saya harap Anda dapat mendukung wulin.com lebih lanjut.