例如,我想在事件结束后运行一些代码来冒泡 DOM
document.getElementById("myBtn").addEventListener("click", (event) => {
// run some code after event finish to bubble up
});
最佳答案
你至少有两个选择:
排队异步任务(
setTimeout
或 Promise 解析)处理
document
上的事件,但前提是它在到达它的途中通过#myBtn;这在技术上不是完全完成冒泡,只是在它的最后阶段
请注意,某些必须响应用户事件(例如打开窗口)的操作可能适用于也可能不适用于 #1。
这是使用 Promise 的#1:
document.getElementById("myBtn").addEventListener("click", (event) => {
Promise.resolve().then(_ => {
// Do the work here
});
});
使用 promise 解决方案的优势在于,在兼容的浏览器上,promise 解决方案将在任何其他排队事件之前运行。 ( promise 决议是在当前任务之后但在下一个任务之前运行的微任务。)
这是#2:
document.addEventListener("click", (event) => {
var node = event.target;
while (node.id !== "myBtn") {
if (node === document.body) {
return; // Didn't pass through #myBtn
}
node = node.parentNode;
}
// Do the work here
});
关于Javascript 事件监听器 - 在事件完成冒泡后运行代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43885599/