84669 人学习
152542 人学习
20005 人学习
5487 人学习
7821 人学习
359900 人学习
3350 人学习
180660 人学习
48569 人学习
18603 人学习
40936 人学习
1549 人学习
1183 人学习
32909 人学习
有项目用到 JS 模板,但模板里的标签是字符串非正常运行的html标签,对页面一开始就加载出来的标签进行了事件绑定后,后加载出来的标签,除非用jQuery,我想不出用什么来进行监听然后实现事件绑定。而项目规定不可以使用如jQuery,zetpo这种框架来做,那么请问了,如题。
标签p
欢迎选择我的课程,让我们一起见证您的进步~~
事件委托吧,一个最基本的代码如下!
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); });
事件委托吧,一个最基本的代码如下!
document可以用其它元素代替,但是,代替的元素必须是一开始就存在!不能是页面加载了再动态加进来的!
一般都是事件委托
事件委托是没错,说白了就是利用 DOM 的事件冒泡, @守候你 的答案说明了原理,也解决了基本的问题。但在实际应用中还是会有一些局限,它只能处理终点击的那个元素,而不是处理冒泡过程中遇到的元素。
我写了一个冒泡过程中的示例:https://jsfiddle.net/4L7p5drb/1/