javascript - 如何利用原生JS監聽對載入更多出來的標籤進行事件綁定

Question

有項目用到JS 模板，但模板裡的標籤是字串非正常運行的html標籤，對頁面一開始就加載出來的標籤進行了事件綁定後，後加載出來的標籤，除非用jQuery ，我想不出用什麼來進行監聽然後實現事件綁定。
而專案規定不可以使用如jQuery，zetpo這種框架來做，那麼請問了，如題。

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