javascript – So verwenden Sie natives JS, um das Ereignis zu überwachen und mehr geladene Tags zu binden

Question

Einige Projekte verwenden JS-Vorlagen, aber die Tags in der Vorlage sind HTML-Tags, deren Zeichenfolgen nicht normal ausgeführt werden. Nachdem die Ereignisbindung für die am Anfang der Seite geladenen Tags durchgeführt wurde, werden die später geladenen Tags nur dann geladen, wenn jQuery dies tut Mir fällt nichts ein, was ich zum Überwachen und Implementieren der Ereignisbindung verwenden könnte.
Das Projekt schreibt vor, dass Frameworks wie jQuery und zetpo nicht verwendet werden dürfen, daher möchte ich wie im Titel fragen.

<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

事件委托吧，一个最基本的代码如下！

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

document可以用其它元素代替，但是，代替的元素必须是一开始就存在！不能是页面加载了再动态加进来的！

Answer 2

一般都是事件委托

Answer 3

事件委托是没错，说白了就是利用 DOM 的事件冒泡， @守候你 的答案说明了原理，也解决了基本的问题。但在实际应用中还是会有一些局限，它只能处理终点击的那个元素，而不是处理冒泡过程中遇到的元素。

我写了一个冒泡过程中的示例：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);
    });