javascript - try-catch 应该如何与多个事件处理程序一起使用？

Question

假设我们有一个附加了一堆事件处理程序的函数。我注意到围绕它们的 try-catch 捕获了事件函数中的内容。应该这样做吗？

function attachHandlers() {
    try {
        network.on('event1', async (evt) => {
            ...
        });

        network.on('event2', async (evt) => {
            ...
        });
    } catch (err) {
        throw err;
    }
  }

或者分别在每个处理程序中 try catch ？

  function attachHandlers() {
    network.on('event1', async (evt) => {
        try {
            ...
        } catch (err) {
            throw err;
        }
    });

    network.on('event2', async (evt) => {
        try {
            ...
        } catch (err) {
            throw err;
        }
    });
  }

Answer 1

正如其他人所说，围绕监听器附件的 try/catch 不会捕获处理程序内部抛出的错误。

如果您想知道处理程序何时抛出错误，您可以监听 window 对象上的 error 事件。

如果你想捕获它们，你可以在 errorHandler 的 errorEvent 上使用 preventDefault。

编辑:出于某种原因，下面的代码片段没有“捕获”错误，最终在控制台中未被捕获。我在 chrome 上测试过它，它可以工作。

const myBtn = document.getElementById("myBtn");

myBtn.addEventListener("click", function() {
  console.log("handler 1");
  throw "Error in handler1";

});

myBtn.addEventListener("click", function(error) {
  console.log("handler 2");
  throw "Error in handler2";
});

window.addEventListener("error", function (error) {
    error.preventDefault();
    console.error("Error caught");
    return false;
});

<button id="myBtn">Click</button>