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
    });
});

使用承诺解析的优势在于，在兼容的浏览器上，承诺解析将在任何其他排队事件之前运行。（无极分辨率microtasks，目前的任务后，但在下一任务之前运行。）

这是#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
});