Javascript 事件监听器 - 在事件完成冒泡后运行代码

Question

例如，我想在事件结束后运行一些代码来冒泡 DOM

    document.getElementById("myBtn").addEventListener("click", (event) => {
       // run some code after event finish to bubble up
});

Answer 1

你至少有两个选择:

1. 排队异步任务(setTimeout 或 Promise 解析)

2. 处理 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
});