如何使用 onerror 捕获 ReferenceError?

javascriptweb developmentfront end technology

JavaScript 是一种著名的编程语言,与 HTML 和 CSS 一起是万维网 (WWW) 的核心语言之一。它允许程序员捕获事件并修改文档对象模型 (DOM)。在本文中,我们将了解如何借助 onerror 事件捕获 ReferenceError。

什么是 ReferenceError?

ReferenceError 是一种错误,当程序尝试访问不存在的变量或对象时可能会发生。当变量的名称拼写错误或用户尝试访问尚未初始化的对象时,可能会发生这种情况。

示例

<!DOCTYPE html>
<html>
<body>
<div id = "result"> </div>
<script>
try{
   let sum=a+2;
   document.getElementById("result").innerHTML = sum;
}
catch(e){
    document.getElementById("result").innerHTML = e;
}
</script>
</body>
</html>

什么是 onerror?

onerror 是加载外部文件或资源时发生错误或在执行脚本时发生某些错误时触发的事件。

语法

onerror = (event, source, lineno, colno, error) => {};

参数:以下是语法中提到的参数的描述:

  • event:包含人类可读的错误消息的字符串。

  • source:提供脚本 URL 的字符串,这是导致问题的原因。

  • lineno:包含发生问题的脚本文件行号的整数。

  • colno:包含发生问题的脚本文件列号的整数。

  • error:抛出的错误对象。

示例

在此示例中,我们将利用上面部分提到的代码中的 onerror 事件来捕获 ReferenceError 对象。以下是完成该任务的完整代码:

<!DOCTYPE html>
<html>
<head>
    <title>How to catch a ReferenceError with onerror?</title>
</head>
<body>
    <h4>How to catch a ReferenceError with onerror?</h4>
    <div id="result"> </div>
    <script>
        window.onerror = (event, url, line, column, error) => {
            let msg = "";
            msg += "Error Stack: " + error;
            document.getElementById("result").innerHTML = msg;
        };
        let sum = a + 2;
    </script>
</body>
</html>

结论

在本文中,我们了解了 JavaScript 中的 RefernceError 和 onerror 事件。我们还看到,借助 onerror 事件,我们可以捕获 ReferenceError 对象。


相关文章