对于前端的异常捕获,我们都会知道onerror事件,但针对window的error事件的用法,其实是有区别的。
方式一: window.onerror = handleOnError
1. 能捕获到js执行错误,不能捕获带有src的标签元素的加载错误。
2. 参数对应5个值(错误信息,所在文件,行,列,错误信息)
3. 函数体内用return true可以不让异常信息输出到控制台
方式二: window.addEventListener
1. 为捕获状态时(第三个参数为true)能捕获到js执行错误,也能捕获带有src的标签元素的加载错误。
为冒泡状态时(第三个参数为false)能捕获到js执行错误,不能捕获带有src的标签元素的加载错误。
2. 参数对应1个值,异常事件,错误信息都在里面
3. 函数体内用preventDefault可以不让异常信息输出到控制台
示例代码:
<!doctype html><html> <head> <script type="text/javascript"> window.onerror = handleOnErrorwindow.addEventListener(‘error‘, handleListenerError, false); function handleOnError(msg,url,h,l,e) { // some code return true // 阻止浏览器console输出 }function handleListenerError (eventErr){ // some code eventErr.preventDefault() // 阻止浏览器console输出} function message1() { aalert("hello!") } function message2() { throw new Error(‘hello‘) } function message3() { console.log(a) } function message4() { xhr = new XMLHttpRequest(); xhr.open(‘GET‘,url) xhr.onreadystatechange=state_Change; xhr.send() } function state_Change() { if (xhr.readyState==4) { if (xhr.status==200) { message3() } else { // somecode } } } </script> </head> <body> <input type="button" value="异常1" onclick="message1()" /> <input type="button" value="异常2" onclick="message2()" /> <input type="button" value="异常3" onclick="message3()" /> <input type="button" value="异常4" onclick="message4()" /> <script type="text/javascript" src="abc.js"></script> <img src="abc.png"/> </body> </html>
原文地址:https://www.cnblogs.com/liyongquan/p/9180562.html
时间: 2024-10-08 16:13:16