1. Apa itu Komisi Acara: Dalam istilah awam, acara adalah OnClick, Onmouseover, Onmouseout, dll. Adalah acara. Adapun delegasi, mereka diminta untuk melakukannya. Acara ini awalnya ditambahkan ke elemen -elemen tertentu, tetapi Anda menambahkannya ke orang lain untuk melakukannya untuk menyelesaikan acara tersebut.
Yaitu: Gunakan prinsip gelembung untuk menambahkan peristiwa ke induk untuk memicu efek eksekusi.
Manfaat: 1. Meningkatkan kinerja.
Kita dapat melihat contoh: Setiap Li perlu dipicu untuk mengubah warna latar belakangnya.
<ul id = "ul"> <li> aaaaaaaa </li> <li> bbbbbbbbb </li> <li> cccccccccc </li> </ul> window.onload = function () {var oul = document.getElementById ("Ul"); var ali = oul. i ++) {ali [i] .onmouseOver = function () {this.style.background = "red";} ali [i] .onmouseout = function () {this.style.background = ";}}}Dengan cara ini, kita dapat menambahkan acara mouse di LI.
Tetapi jika kita memiliki banyak untuk loop, itu akan mempengaruhi kinerja.
Di bawah ini kita dapat menggunakan delegasi acara untuk mencapai efek ini. HTML tetap tidak berubah
window.onload = function () {var oul = document.geteLementById ("ul"); var ali = oul.geteLementsByTagname ("li");/*Sumber acara harus digunakan di sini: objek acara, sumber acara. Tidak peduli acara di mana ia berada, selama elemen yang Anda operasikan adalah sumber acara. IE: window.event.srcelement Standard: event.targetNodename: Temukan nama label elemen */oul.onmouseover = function (ev) {var ev = ev || window.event; var target = ev.target || ev.srcelement; // waspada (target.innerHtml); if (target.nodename.tolowercase () == "li") {target.style.background = "merah";}} oul.onmouseout = fungsi (ev) {var eV = ev || window.event; var target = ev.target || ev.srcelement; // alert (target.innerHtml); if (target.nodename.tolowercase () == "li") {target.style.background = "";}}}}Manfaat 2, elemen yang baru ditambahkan juga akan memiliki acara sebelumnya.
Kami juga mengambil contoh ini, tetapi kami perlu menambahkan Li secara dinamis. Klik tombol untuk menambahkan Li secara dinamis
menyukai:
<input type = "tombol" id = "btn"/> <ul id = "ul"> <li> aaaaaaaa </li> <li> BBBBBBBB </li> <li> CCCCCCCCCC </li> </ul>
Kami akan melakukan ini tanpa Komisi Acara:
window.onload = function () {var oul = document.geteLementById ("ul"); var ali = oul.getElementsbyTagname ("li"); var obtn = document.geteLementById ("btn"); var inow = 4; for = 0; i <ali.length; i ++) {{st function). "Red";} Ali [i] .onmouseout = function () {this.style.background = "";}} obtn.onClick = function () {inow ++; var oli = document.createElement ("li"); oli.innerHtml = 1111 *inow; oul.applaplild (oli (oli) oul (oulnerhtml = 1111 *inow.Melakukan ini kita dapat melihat bahwa klik tombol yang baru ditambahkan LI pada LI tanpa acara yang bergerak mouse untuk mengubah warna latar belakang mereka.
Karena loop untuk telah dieksekusi saat mengklik untuk ditambahkan.
Kemudian kami melakukannya dengan mendelegasikan acara tersebut. Hanya saja HTML tetap tidak berubah
window.onload = function () {var oul = document.geteLementById ("ul"); var ali = oul.getElementsbyTagname ("li"); var obtn = document.getElementById ("btn"); var inow = 4; oul.onmouseover = function (ev) {var ev = ev || window.event; var target = ev.target || ev.srcelement; // waspada (target.innerHtml); if (target.nodename.tolowercase () == "li") {target.style.background = "merah";}} oul.onmouseout = fungsi (ev) {var eV = ev || window.event; var target = ev.target || ev.srcelement; // alert (target.innerHtml); if (target.nodename.tolowercase () == "li") {target.style.background = "";}} obtn.onClick = function () {inow ++; var oli = document.createelement ("li"); *inow; oul.AppendChild (OLI);}}OKE:
Sama seperti di posting Weibo kami, masih ada acara mouse sebelumnya di posting Weibo yang baru.
Di atas adalah commissioning dan manfaat acara di JavaScript yang diperkenalkan kepada Anda oleh editor. Saya harap ini akan membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas Anda tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!