javascript - Cara menggunakan pendengaran JS asli untuk mengikat lebih banyak teg yang dimuatkan

Question

Sesetengah projek menggunakan templat JS, tetapi teg dalam templat adalah teg html yang rentetannya tidak berjalan seperti biasa Selepas pengikatan peristiwa dilakukan pada teg yang dimuatkan pada permulaan halaman, teg yang dimuatkan kemudian tidak akan dimuatkan melainkan jQuery. digunakan. Saya tidak dapat memikirkan apa-apa untuk digunakan untuk memantau dan melaksanakan pengikatan acara.
Projek ini menetapkan bahawa rangka kerja seperti jQuery dan zetpo tidak boleh digunakan, jadi saya ingin bertanya, seperti dalam tajuk.

<p class="p">标签p</p>
<script>
    var ps = document.querySelectorAll('.p');
    for (var i = 0; i < ps.length; i++) {
        ps[i].addEventListener('click', function(){
            var that = this;
            console.log(that.innerText);
        })
    }
</script>
<script type="template">
    <p class="p">字符串标签p</p>
</script>

Answer 1

Delegasi acara, kod paling asas adalah seperti berikut!

window.onload = function(){
　　document.onclick = function(ev){
　　　　var ev = ev || window.event;
　　　　var target = ev.target || ev.srcElement;
　　　　if(target.className.toLowerCase() === 'p'){
　　　　　　　  console.log(this.innerHTML);
　　　　}
　　}
}

Dokumen boleh digantikan dengan elemen lain, tetapi elemen yang diganti mesti wujud dari awal! Ia tidak boleh ditambah secara dinamik selepas halaman dimuatkan!

Answer 2

Biasanya delegasi acara

Answer 3

Delegasi acara adalah betul, ia menggunakan jawapan acara DOM yang menerangkan prinsip dan menyelesaikan masalah asas. Walau bagaimanapun, masih terdapat beberapa batasan dalam aplikasi praktikal Ia hanya boleh memproses elemen yang akhirnya diklik, bukannya elemen yang ditemui semasa proses menggelegak.

Saya menulis contoh proses menggelegak: https://jsfiddle.net/4L7p5drb/1/

const outer = document.getElementById("outer");

/**
 * host，已经存在的元素，用来绑定代理事件的
 * evnetName，事件名称
 * predicate，用来判断代理事件的目标对象 (el: HtmlElement) => bool 类型
 * handler，处理函数，(e: Event) => any 类型，其 this 指向实际目标对象
 */
function proxyListener(host, eventName, predicate, handler) {
    host.addEventListener(eventName, e => {
        let target = e.target || e.srcElement;
        while (target !== host) {
            if (predicate(target)) {
                handler.call(target, e);
                // 这里没有 break 主要是考虑一多层都拥有可判断为 true 的对象呢
                // 可以根据实际需要加 break;
            }
            target = target.parentNode || target.parentElement;
        }
    });
}

proxyListener(outer, "click",
    t => t.classList.contains("middle"),
    function(e) {
        console.log("hit", this);
    });