Apakah maksud delegasi acara javascript?

Dalam JavaScript, delegasi acara juga dipanggil pengehosan acara atau proksi acara, iaitu untuk mengikat acara nod sasaran ke nod nenek moyang ia menggunakan prinsip menggelegak acara untuk mengurus semua acara jenis tertentu. Gunakan elemen induk untuk mewakili pengendalian jenis acara tertentu pada elemen anak.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi JavaScript 1.8.5, komputer Dell G3.

Dalam JavaScript, perwakilan acara (delegasi) juga dipanggil pengehosan acara atau proksi acara Ia menggunakan prinsip menggelegak acara untuk mengurus semua acara jenis tertentu dan menggunakan elemen induk untuk mewakili jenis elemen anak tertentu. . Bagaimana acara dikendalikan.

Faedah melakukan ini: mengoptimumkan kod, meningkatkan prestasi berjalan, benar-benar memisahkan HTML dan JavaScript dan mengelakkan kehilangan acara berdaftar semasa proses menambah atau memadam nod secara dinamik.

Contoh 1

Contoh berikut menggunakan kaedah umum untuk mengikat acara klik pada setiap item senarai dalam struktur senarai Klik item senarai dan dialog gesaan kotak akan muncul Maklumat teks yang terkandung dalam nod semasa. Walau bagaimanapun, apabila kami menambah item senarai secara dinamik pada kotak senarai, item senarai yang baru ditambah tidak terikat pada acara klik, yang bertentangan dengan kehendak kami.

<button id="btn">添加列表项目</button>
<ul id="list">
    <li>列表项目1</li>
    <li>列表项目2</li>
    <li>列表项目3</li>
</ul>
<script>
    var ul = document.getElementById("list");
    var lis = ul.getElementsByTagName("li");
    for (var i = 0; i < lis.length; i ++) {
        lis[i].addEventListener(&#39;cluick&#39;, function (e) {
            var e = e || window.event;
            var target = e.target || e.srcElement;
            alert(e.target.innerHTML);
        }, false);
    }
    var i = 4;
    var btn = document.getElementById("btn");
    btn.addEventListener("click", function() {
        var li = document.createElement("li");
        li.innerHTML = "项目列表" + i++;
        ul.appendChild(li);
    });
</script>

Contoh 2

Contoh berikut menggunakan teknik perwakilan acara dan mekanisme penyebaran acara untuk mengikat acara klik pada elemen ul kotak senarai Apabila peristiwa merambat ke Apabila nod induk ul dihidupkan, tangkap peristiwa klik, dan kemudian mengesan jenis nod tindak balas peristiwa semasa dalam fungsi pengendali acara Jika ia adalah elemen li, laksanakan kod berikut, jika tidak, lompat keluar daripada acara fungsi pengendali dan menamatkan tindak balas.

<button id="btn">添加项目列表</button>
<ul id="list">
    <li>列表项目1</li>
    <li>列表项目2</li>
    <li>列表项目3</li>
</ul>
<script>
    var ul = document.getElementById("list");
    ul.addEventListener(&#39;click&#39;, function(e) {
        var e = e || window.event;
        var target = e.target || e.srcElement;
        if (e.target && e.target.nodeName.toUpperCase()=="LI") {
            alert(e.target.innerHTML);
        }
    }, false);
    var i = 4;
    var btn = document.getElementById("btn");
    btn.addEventListener("click", function () {
        var li = document.createElement("li");
        li.innerHTML = "项目列表" + i++;
        ul.appendChild(li);
    });
</script>

Apabila halaman mempunyai sejumlah besar elemen dan setiap elemen mendaftarkan satu atau lebih acara, prestasi mungkin terjejas. Apabila mengakses dan mengubah suai nod DOM yang dikemas kini, program akan menjadi lebih perlahan terutamanya apabila proses sambungan acara berlaku dalam acara pemuatan (atau DOMContentReady), ini adalah tempoh masa yang sibuk untuk mana-mana halaman web interaktif yang kaya. Di samping itu, penyemak imbas perlu menyimpan rekod setiap pengendali acara, yang juga akan menduduki lebih banyak memori.

[Pembelajaran yang disyorkan: Tutorial JavaScript Lanjutan]

Atas ialah kandungan terperinci Apakah maksud delegasi acara javascript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!