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/