web页面的一些事件以及相关实验（3）_web3 网页事件-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_26153041/article/details/101056530

本文探讨了网页中处理脚本加载错误、图片加载失败及运行时异常的方法。通过使用window.addEventListener('error')，可以有效捕捉并处理这些错误，实现统一的错误上报和图片错误替换等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这次的实验，针对的是页面error处理的

<html>

<head>
    <style>
        .container {
            border: 1px solid gray;
            margin: auto;
            max-width: 600px;
            height: 600px;
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            grid-template-rows: repeat(6, 1fr);
        }
        
        .container>div {
            display: inline;
            background-color: pink;
            box-sizing: border-box;
        }
        
        .container>div:nth-child(1) {
            grid-column-start: 2;
            grid-column-end: 4;
            grid-row-start: 2;
            grid-row-end: 4;
            margin-right: 2px;
        }
        
        img.err {
            display: none;
        }
    </style>
    <script>
    </script>
    <script src="https://cdn.bootcss.com/vue/2.6.101/vue.min.js"></script>
    <script>
        window.addEventListener('error', (e) => {
            let {
                target
            } = e

            let ec = Object.getPrototypeOf(e).constructor
            if (ec == Event) {
                let type = target.nodeName.toLowerCase()
                console.log(type)
            } else if (ec == ErrorEvent) {
                console.log(e.message)
            }
        }, true)
    </script>
</head>

<body>
    <script>
        console.log(2)
    </script>
    <div class="container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>
            <img src="https://user-gold-cdn.xitu.io/2019/9/17/16d3e878fdsa371125e0?imageView2/1/w/120/h/120/q/85/format/webp/interlace/1" onload="console.log('img loaded')" />
        </div>
    </div>
     <script>
        setTimeout(()=>{
            console.log(varNotExits.pro);
        },1000)
    </script>
</body>

</html>

其他语言，有全局捕获异常的方式，web里面有没有呢，经过一番查找发现也是有的

以下链接是文档描述 https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onerror