問題描述

有項目用到 JS 模板，但模板里的標(biāo)簽是字符串非正常運行的html標(biāo)簽，對頁面一開始就加載出來的標(biāo)簽進(jìn)行了事件綁定后，后加載出來的標(biāo)簽，除非用jQuery，我想不出用什么來進(jìn)行監(jiān)聽然后實現(xiàn)事件綁定。而項目規(guī)定不可以使用如jQuery，zetpo這種框架來做，那么請問了，如題。

<p class='p'>標(biāo)簽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'>字符串標(biāo)簽p</p></script>

問題解答

事件委托吧，一個最基本的代碼如下！

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)加進(jìn)來的！

一般都是事件委托

事件委托是沒錯，說白了就是利用 DOM 的事件冒泡， @守候你 的答案說明了原理，也解決了基本的問題。但在實際應(yīng)用中還是會有一些局限，它只能處理終點擊的那個元素，而不是處理冒泡過程中遇到的元素。

我寫了一個冒泡過程中的示例：https://jsfiddle.net/4L7p5drb/1/

const outer = document.getElementById('outer');/** * host，已經(jīng)存在的元素，用來綁定代理事件的 * evnetName，事件名稱 * predicate，用來判斷代理事件的目標(biāo)對象 (el: HtmlElement) => bool 類型 * handler，處理函數(shù)，(e: Event) => any 類型，其 this 指向?qū)嶋H目標(biāo)對象 */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); });