Question

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

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

Answer 1

您至少有两个选择：

排队异步任务（setTimeout或承诺决议）
处理document上的事件，但前提是它通过#myBtn途中传递给它;从技术上来说，当完全完成冒泡时，就在它的最后阶段

请注意，必须响应用户事件的某些操作（例如打开窗口）可能会或可能不会与＃1一起使用。

这是＃1使用Promise：

document.getElementById("myBtn").addEventListener("click", (event) => {
    Promise.resolve().then(_ => {
        // Do the work here
    });
});

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

Answer 2

然后你应该向文档对象添加一个事件监听器，这是识别事件的最后一个DOM“元素”，所有事件都会冒泡到文档。

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

2 个答案: