有項目用到JS 模板，但模板裡的標籤是字串非正常運行的html標籤，對頁面一開始就加載出來的標籤進行了事件綁定後，後加載出來的標籤，除非用jQuery ，我想不出用什麼來進行監(jiān)聽然後實現(xiàn)事件綁定。
而專案規(guī)定不可以使用如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>
3
0
0
歡迎選擇我的課程，讓我們一起見證您的進步~~
事件委託吧，一個最基本的程式碼如下！
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可以用其它元素代替，但是，代替的元素必須是一開始就存在！不能是頁面載入了再動態(tài)加進來的！
事件委託是沒錯，說白了就是利用 DOM 的事件冒泡， @守候你 的答案說明了原理，也解決了基本的問題。但在實際應用中還是會有一些局限，它只能處理終點擊的那個元素，而不是處理冒泡過程中遇到的元素。
我寫了一個冒泡過程中的範例：https://jsfiddle.net/4L7p5drb/1/
const outer = document.getElementById("outer");
/**
* host，已經(jīng)存在的元素，用來綁定代理事件的
* evnetName，事件名稱
* predicate，用來判斷代理事件的目標對象 (el: HtmlElement) => bool 類型
* handler，處理函數(shù)，(e: Event) => any 類型，其 this 指向?qū)嶋H目標對象
*/
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 的對象呢
// 可以根據(jù)實際需要加 break;
}
target = target.parentNode || target.parentElement;
}
});
}
proxyListener(outer, "click",
t => t.classList.contains("middle"),
function(e) {
console.log("hit", this);
});
