javascript - Comment utiliser JS natif pour écouter des événements pour lier davantage de balises chargées

Question

Certains projets utilisent des modèles JS, mais les balises du modèle sont des balises HTML dont les chaînes ne s'exécutent pas normalement. Une fois la liaison d'événement effectuée sur les balises chargées au début de la page, les balises chargées ultérieurement ne seront chargées que si jQuery l'est. utilisé. Je ne trouve rien à utiliser pour surveiller et implémenter la liaison d'événements.
Le projet stipule que les frameworks tels que jQuery et zetpo ne peuvent pas être utilisés, je voudrais donc demander, comme dans le titre.

<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

Délégation événementielle, le code le plus basique est le suivant !

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);
　　　　}
　　}
}

Le document peut être remplacé par d'autres éléments, mais l'élément remplacé doit exister depuis le début ! Il ne peut pas être ajouté dynamiquement après le chargement de la page !

Answer 2

Habituellement, délégation événementielle

Answer 3

La délégation d'événement est correcte. Pour parler franchement, elle utilise le bouillonnement d'événements DOM. La réponse de @Waiting for You explique le principe et résout le problème de base. Cependant, il existe encore certaines limites dans les applications pratiques. Il ne peut traiter que l'élément sur lequel on a finalement cliqué, plutôt que les éléments rencontrés lors du processus de bullage.

J'ai écrit un exemple du processus de bouillonnement : 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);
    });