Sesetengah projek menggunakan templat JS, tetapi teg dalam templat adalah teg html yang rentetannya tidak berjalan seperti biasa Selepas pengikatan peristiwa dilakukan pada teg yang dimuatkan pada permulaan halaman, teg yang dimuatkan kemudian tidak akan dimuatkan melainkan jQuery. digunakan. Saya tidak dapat memikirkan apa-apa untuk digunakan untuk memantau dan melaksanakan pengikatan acara.
Projek ini menetapkan bahawa rangka kerja seperti jQuery dan zetpo tidak boleh digunakan, jadi saya ingin bertanya, seperti dalam tajuk.
<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>
3
0
0
歡迎選擇我的課程，讓我們一起見證您的進(jìn)步~~
Delegasi acara, kod paling asas adalah seperti berikut!
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);
}
}
}Dokumen boleh digantikan dengan elemen lain, tetapi elemen yang diganti mesti wujud dari awal! Ia tidak boleh ditambah secara dinamik selepas halaman dimuatkan!
Delegasi acara adalah betul, ia menggunakan jawapan acara DOM yang menerangkan prinsip dan menyelesaikan masalah asas. Walau bagaimanapun, masih terdapat beberapa batasan dalam aplikasi praktikal Ia hanya boleh memproses elemen yang akhirnya diklik, bukannya elemen yang ditemui semasa proses menggelegak.
Saya menulis contoh proses menggelegak: https://jsfiddle.net/4L7p5drb/1/
const outer = document.getElementById("outer");
/**
* host，已經(jīng)存在的元素，用來(lái)綁定代理事件的
* evnetName，事件名稱
* predicate，用來(lái)判斷代理事件的目標(biāo)對(duì)象 (el: HtmlElement) => bool 類型
* handler，處理函數(shù)，(e: Event) => any 類型，其 this 指向?qū)嶋H目標(biāo)對(duì)象
*/
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);
// 這里沒(méi)有 break 主要是考慮一多層都擁有可判斷為 true 的對(duì)象呢
// 可以根據(jù)實(shí)際需要加 break;
}
target = target.parentNode || target.parentElement;
}
});
}
proxyListener(outer, "click",
t => t.classList.contains("middle"),
function(e) {
console.log("hit", this);
});
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
