javascript - 如何利用原生JS监听对加载更多出来的标签进行事件绑定

问题描述

有项目用到 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>

问题解答

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

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可以用其它元素代替，但是，代替的元素必须是一开始就存在！不能是页面加载了再动态加进来的！

一般都是事件委托

事件委托是没错，说白了就是利用 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); });