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!

Biasanya delegasi acara

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，已经存在的元素，用来绑定代理事件的 * 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); });