all

2023年06月08日

柏拉文

越努力，越幸运

2023年03月03日

柏拉文

越努力，越幸运

afterprint

appinstalled

beforeinstallprompt

beforeprint

beforeunload

beforeunload 当浏览器窗口关闭或者刷新时，会触发 beforeunload 事件。当前页面不会直接关闭，可以点击确定按钮关闭或刷新，也可以取消关闭或刷新。事件使网页能够触发一个确认对话框，询问用户是否真的要离开该页面。如果用户确认，浏览器将导航到新页面，否则导航将会取消。

注意

为避免意外弹出窗口，除非页面已与之交互, 否则浏览器可能不会显示在 beforeunload 事件中创建的提示，甚至根本不会显示它们(换句话说: 页面有交互之后，后续如果关闭页面，beforeunload 事件才会触发)。

语法

function beforeunloadHandle(event){
    event.preventDefault();
    event.returnValue = '';
}
window.addEventListener("beforeunload",beforeunloadHandle);

blur

copy

cut

devicemotion

deviceorientation

deviceorientationabsolute

DOMContentLoaded

当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完全加载。

语法

addEventListener('DOMContentLoaded', (event) => {});

onDOMContentLoaded = (event) => { };

对比

对比一、window.onload 与 window.DOMContentLoaded 有什么区别?
- window.onload: 整个页面及所有依赖资源如样式表和图片都已完成加载时，将触发 load 事件
- window.DOMContentLoaded: 顾名思义, 只要页面 DOM 加载完成就触发，无需等待依赖资源的加载

error

error 当资源加载失败或无法使用时，会在 Window 对象触发 error 事件。例如: script 执行时报错。

语法

window.addEventListener("error", function(){})
window.onerror = function (){}

场景

场景一、window.onerror 异常捕获

Html
Css
JavaScript

<script>
    window.onerror = function (e) {
    console.log(e);
    return true;
    };
</script>

<script>
    console.log(a);
</script>

场景二、window.addEventListener('error') 异常捕获

Html
Css
JavaScript

<script>
    const errorMap = {
    jsRun: "js 运行时错误",
    img: "img 资源加载失败",
    link: "link 资源加载失败",
    script: "script 资源加载失败",
    };
    function handlerError(e) {
    e.preventDefault();
    const { colno, error, filename, lineno, message, srcElement, target } =
        e;
    const currentTarget = srcElement || target;
    let errorType;
    if (currentTarget instanceof HTMLScriptElement) {
        errorType = "script";
    } else if (currentTarget instanceof HTMLLinkElement) {
        errorType = "link";
    } else if (currentTarget instanceof HTMLImageElement) {
        errorType = "img";
    } else {
        errorType = "jsRun";
    }
    console.log(errorMap[errorType], errorType === "jsRun" ? message : "");
    }
    window.addEventListener("error", handlerError, true);
</script>
<link href="https://test.cn/×××.css" rel="stylesheet" />
<script src="https://test.cn/×××.js"></script>


<img src="https://test.cn/×××.jpg" />

<script>

    [3, 4].forEach((item) => {
    console.log(item.a.b);
    });

    console.log(a);

    setTimeout(() => {
    console.log(b);
    }, 300);

</script>

阻止默认事件

window.onerror: 通过 return true 来阻止默认事件
window.addEventListener: 通过 e.preventDefault() 来阻止默认事件

focus

focus 事件在元素获取焦点时触发。这个事件和 focusin (en-US) 最大的区别仅仅在于后者会事件冒泡。该事件不可取消，也不会冒泡。

语法

addEventListener('focus', (event) => { });

onfocus = (event) => { };

场景

场景一、监听窗口焦点

function screenCuttingMonitoring() {
    window.addEventListener("focus", function (event) {
        console.log(event);
    });
}

screenCuttingMonitoring();

gamepadconnected

gamepaddisconnected

hashchange

languagechange

load

load 当整个页面及所有依赖资源如样式表和图片都已完成加载时，将触发 load 事件。load 事件不可以冒泡,不可以取消。它与 DOMContentLoaded 不同，后者只要页面 DOM 加载完成就触发，无需等待依赖资源的加载。

语法

addEventListener('load', (event) => {});

onload = (event) => { };

对比

对比一、window.onload 与 window.DOMContentLoaded 有什么区别?
- window.onload: 整个页面及所有依赖资源如样式表和图片都已完成加载时，将触发 load 事件
- window.DOMContentLoaded: 顾名思义, 只要页面 DOM 加载完成就触发，无需等待依赖资源的加载

message

**message**事件是在窗口接受到消息（例如，从另一个浏览器上下文中调用 Window.postMessage()）时，在 Window 对象上触发的事件。

语法

window.addEventListener('message', function(event) { ... })
window.onmessage = function(event) { ... }

event:
- data: 从其他 window 中传递过来的对象
- origin: 调用 postMessage 时消息发送方窗口的 origin
- source: 对发送消息的窗口对象的引用; 您可以使用此来在具有不同 origin 的两个窗口之间建立双向通信。

场景

场景一、浏览器两个 Tab 通信

A Tab 页面

Html
Css
JavaScript

<h2>A 页面</h2>
<button>跳转 B 页面</button>

<div className="box">
<div className="item"></div>
</div>

const targetOrigin = "http://test.bolawen.com/b.html";
const button = document.querySelector("button");
  button.addEventListener(
    "click",
    function () {
      const BPage = window.open(targetOrigin,"_blank");
      BPage.addEventListener("load", function () {
        BPage.postMessage("aa", targetOrigin);
      });
    },
    false
  );

function receiveMessage(e) {
    const { data,origin,source} = e;
    if(origin === targetOrigin){
        console.log("A 页面发送数据之后的回调数据",data);
    }
    console.log("A 页面接收的数据",data);
}
window.addEventListener("message", receiveMessage, true);

B Tab 页面

Html
Css
JavaScript

<h2>B 页面</h2>

function receiveMessage(e) {
    const { data, origin, source } = e;
    console.log("B 页面接收到的数据", data);
    source.postMessage("bb", origin);
}
window.addEventListener("message", receiveMessage);

场景二、浏览器中 Iframe 通信

A 页面

Html
Css
JavaScript

<h2>A 页面</h2>
<iframe src="./b.html"></iframe>

const targetOrigin = "*";
const iframePage = document.querySelector("iframe[src='./b.html']");
    iframePage.addEventListener("load", function () {
    iframePage.contentWindow.postMessage("aa", targetOrigin);
});

function receiveMessage(e) {
    const { data, origin, source } = e;
    if (origin === targetOrigin) {
        console.log("A 页面发送数据之后的回调数据", data);
    }
    console.log("A 页面接收的数据", data);
}
window.addEventListener("message", receiveMessage, true);

B Iframe 页面

Html
Css
JavaScript

<h2>B 页面</h2>

function receiveMessage(e) {
    const { data, origin, source } = e;
    console.log("B 页面接收到的数据", data);
    const targetOrigin = origin && origin !== "null" ? origin : "*";
    source.postMessage("bb", targetOrigin);
}
window.addEventListener("message", receiveMessage);

messageerror

messageerror 事件处理器是一个 EventListener，每当一个类型为 messageerror 的 EventListener 事件在一个窗口被触发 --也就是说，当它收到的消息不能是deserialized (en-US) 。

语法

window.onmessageerror = function() { ... };

offline

online

pagehide

pageHide 当浏览器在显示与会话历史记录不同的页面的过程中隐藏当前页面时，pagehide(页面隐藏) 事件会被发送到一个 Window

语法

window.addEventListener('pagehide', function(event) {
    console.log(event);
});

event.target
event.type
event.bubbles
event.cancelable
event.persisted

场景

触发条件

条件一: 后退/前进按钮

pageshow

pageShow 当一条会话历史记录被执行的时候将会触发页面显示 pageshow 事件。(这包括了后退/前进按钮操作，同时也会在 onload 事件触发后初始化页面时触发)

语法

window.addEventListener('pageshow', function(event) {
    console.log(event);
});

event.target
event.type
event.bubbles
event.cancelable
event.persisted

场景

触发条件

条件一: 后退/前进按钮
条件二: onload 事件之后

paste

popstate

popstate 每当激活同一文档中不同的历史记录条目时，popstate 事件就会在对应的 window 对象上触发。如果当前处于激活状态的历史记录条目是由 history.pushState() 方法创建的或者是由 history.replaceState() 方法修改的，则 popstate 事件的 state 属性包含了这个历史记录条目的 state 对象的一个拷贝。

语法

window.onpopstate = function(){

}

window.addEventListener('popstate',function(){

},false);

规则

popstate 事件只会在浏览器某些行为下触发，比如点击后退按钮（或者在 JavaScript 中调用 history.back() 方法）。即，在同一文档的两个历史记录条目之间导航会触发该事件。调用 history.pushState() 或者 history.replaceState() 不会触发 popstate 事件。

rejectionhandled

rejectionhandled 当 Promise 被 rejected 且有 rejection 处理器时会在全局触发 rejectionhandled 事件 (通常是发生在 window 下，但是也可能发生在 Worker 中)。应用于调试一般应用回退。当 Promise 被 rejected 且没有 rejection 处理器处理时会触发 unhandledrejection 事件。这两个事件协同工作。

语法

window.addEventListener("rejectionhandled", event => {
  console.log("Promise rejected; reason: " + event.reason);
}, false);

window.onrejectionhandled = ()=>{

}

场景

场景一、window.addEventListener 捕获rejections

Html
Css
JavaScript

<script>
    window.addEventListener(
    "rejectionhandled",
        (event) => {
            console.log("Promise rejected; reason: " + event.reason);
        },
        false
    );
</script>

<script>
    new Promise((resolve, reject) => {
    reject(1);
    }).then(
    () => {},
    (err) => {
        console.log(err);
    }
    );
</script>

场景二、window.onrejectionhandled 捕获 rejections

Html
Css
JavaScript

<script>
    window.onrejectionhandled = (event) => {
        console.log("Promise rejected; reason: " + event.reason);
    };
</script>

<script>
    new Promise((resolve, reject) => {
        reject(1);
    }).then(
    () => {},
    (err) => {
        console.log(err);
    }
    );
</script>

阻止默认事件

许多环境 (例如 Node.js ) 默认情况下会向控制台打印未处理的 Promise rejections。你可以通过为 rejectionhandled 事件添加一个处理程序来避免这种情况的发生，该处理程序除了执行你希望执行的任何其他任务之外，还可以调用 preventDefault() 来取消该事件，从而阻止该事件冒泡并由运行时的日志代码处理。这种方法之所以有效，是因为 rejectionhandled 事件是可以取消的。

window.addEventListener: 通过 e.preventDefault() 取消默认事件
window.onrejectionhandled: 通过 return true 来取消默认事件

resize

storage

unhandledrejection

unhandledrejection 当 Promise 被 reject 且没有 reject处理器的时候，会触发 unhandledrejection 事件；这可能发生在 window 下，但也可能发生在 Worker 中。这对于调试和为意外情况提供后备错误处理非常有用。

语法

window.addEventListener("unhandledrejection", event => {
  console.warn(`UNHANDLED PROMISE REJECTION: ${event.reason}`);
});

window.onunhandledrejection = event => {
  console.warn(`UNHANDLED PROMISE REJECTION: ${event.reason}`);
};

场景

场景一、通过window.addEventListener捕获rejection

Html
Css
JavaScript

<script>
    window.addEventListener("unhandledrejection", (event) => {
        event.preventDefault();
        console.log(`UNHANDLED PROMISE REJECTION: ${event.reason}`);
    });
</script>

<script>
    new Promise((resolve,reject)=>{
        reject(4);
    });
</script>

场景二、通过window.onunhandledrejection捕获rejection

Html
Css
JavaScript

<script>
    window.onunhandledrejection = (event) => {
        event.preventDefault();
        console.log(`UNHANDLED PROMISE REJECTION: ${event.reason}`);
    };
</script>

<script>
    new Promise((resolve,reject)=>{
        reject(4);
    });
</script>

阻止默认事件

许多环境 (例如 Node.js ) 默认情况下会向控制台打印未处理的 Promise rejections。你可以通过为 unhandledrejection 事件添加一个处理程序来避免这种情况的发生，该处理程序除了执行你希望执行的任何其他任务之外，还可以调用 preventDefault() 来取消该事件，从而阻止该事件冒泡并由运行时的日志代码处理。这种方法之所以有效，是因为 unhandledrejection 事件是可以取消的。

window.addEventListener: 通过 e.preventDefault() 取消默认事件
window.onunhandledrejection:

afterprint​

appinstalled​

beforeinstallprompt​

beforeprint​

beforeunload​

blur​

copy​

cut​

devicemotion​

deviceorientation​

deviceorientationabsolute​

DOMContentLoaded​

error​

focus​

gamepadconnected​

gamepaddisconnected​

hashchange​

languagechange​

load​

message​

messageerror​

offline​

online​

pagehide​

pageshow​

paste​

popstate​

rejectionhandled​

resize​

storage​

unhandledrejection​

unload​

vrdisplaypresentchange​

afterprint

appinstalled

beforeinstallprompt

beforeprint

beforeunload

blur

copy

cut

devicemotion

deviceorientation

deviceorientationabsolute

DOMContentLoaded

error

focus

gamepadconnected

gamepaddisconnected

hashchange

languagechange

load

message

messageerror

offline

online

pagehide

pageshow

paste

popstate

rejectionhandled

resize

storage

unhandledrejection

unload

vrdisplaypresentchange