javascript - 如何利用原生JS监听对加载更多出来的标签进行事件绑定
天蓬老师
天蓬老师 2017-06-26 10:56:02
0
3
803

有项目用到 JS 模板,但模板里的标签是字符串非正常运行的html标签,对页面一开始就加载出来的标签进行了事件绑定后,后加载出来的标签,除非用jQuery,我想不出用什么来进行监听然后实现事件绑定。
而项目规定不可以使用如jQuery,zetpo这种框架来做,那么请问了,如题。

标签p

天蓬老师
天蓬老师

欢迎选择我的课程,让我们一起见证您的进步~~

全部回复 (3)
巴扎黑

事件委托吧,一个最基本的代码如下!

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

    ringa_lee

    一般都是事件委托

      漂亮男人

      事件委托是没错,说白了就是利用 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); });
        最新下载
        更多>
        网站特效
        网站源码
        网站素材
        前端模板
        关于我们 免责声明 Sitemap
        PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!