UI事件一览表
| 属性/方法 | 描述 |
| DOMActivate | 元素被用户通过鼠标或键盘操作激活时触发（比 click 或 keydown 更通用）。 这个事件在 DOM3 Events 中已经废弃。因为浏览器实现之间存在差异，所以不要使用它 |
| load | 在 window 上当页面加载完成后触发，在窗套（<frameset>）上当所有窗格（<frame>） 都加载完成后触发，在元素上当图片加载完成后触发，在元素上当相应对象加载完成后触发 |
| unload | 在 window 上当页面完全卸载后触发，在窗套上当所有窗格都卸载完成后触发，在元素上当相应对象卸载完成后触发 |
| abort | 在<object>元素上当相应对象加载完成前被用户提前终止下载时触发 |
| error | 在 window 上当 JavaScript 报错时触发，在<img>元素上当无法加载指定图片时触发， 在<object>元素上当无法加载相应对象时触发，在窗套上当一个或多个窗格无法完成加载时 触发 |
| select | 在文本框（或 textarea）上当用户选择了一个或多个字符时触发 |
| resize | 在文本框（或 textarea）上当用户选择了一个或多个字符时触发 |
| scroll | 当用户滚动包含滚动条的元素时在元素上触发。元素包含已加载页面的滚动条 |
一 load事件
1、使用场景：在 window 对象上，load 事件会在整个页面（包括 所有外部资源如图片、JavaScript 文件和 CSS 文件）加载完成后触发
2、指定方式：
- JavaScript 方式
window.addEventListener("load", (event) => {
console.log("Loaded!");
});- 向元素添加 onload 属性
<!DOCTYPE html>
<html>
<head>
<title>Load Event Example</title>
</head>
<body onload="console.log('Loaded!')">
</body>
</html>
// 一般来说，任何在 window 上发生的事件，都可以通过给<body>元素上对应的属性赋值来指定，这是因为 HTML 中没有 window 元素。3、场景处理
- 图片加载：DOM中的图片和非DOM中的图片
// 可以在HTML中直接给<img>元素的 onload 属性指定事件处理程序，比如：
<img src="smile.gif" onload="console.log('Image loaded.')">
// 使用 JavaScript 也可以为图片指定事件处理程序：
let image = document.getElementById("myImage");
image.addEventListener("load", (event) => {
console.log(event.target.src);
});属性：event.target.src
这个事件的目标是元素，因此可以直接从 event.target.src 属性中取得图片地址并打印出来
下载图片并不一定要把元素添加到文档，只要给它设 置了 src 属性就会立即开始下载
// DOM2 Events
// 在通过 JavaScript 创建新<img>元素时，也可以给这个元素指定一个在加载完成后执行的事件处理程序。在这里，关键是要在赋值 src 属性前指定事件处理程序，如下所示：
window.addEventListener("load", () => {
let image = document.createElement("img");
image.addEventListener("load", (event) => {
console.log(event.target.src);
});
document.body.appendChild(image);
image.src = "smile.gif";
});
// 也适用于 DOM0 的 Image 对象。在 DOM 出现之前，客户端都使用 Image 对象预先加载图片。可以像使用前面（通过 createElement()方法创建）的<img>元素一样使用 Image 对象，只是不能把后者添加到 DOM 树。下面的例子使用新 Image 对象实现了图片预加载：
window.addEventListener("load", () => {
let image = new Image();
image.addEventListener("load", (event) => {
console.log("Image loaded!");
});
image.src = "smile.gif";
});- 动态加载脚本
- <script>元素会在 JavaScript 文件加载完成后触发 load 事件，从而可以动态检测
- 与图片不同，要下载 JavaScript 文件必须同时指定 src 属性，并把<script>元素添加到文档中
// 这里 event 对象的 target 属性在大多数浏览器中是<script>节点。IE8及更早版本不支持<script>元素触发 load 事件
window.addEventListener("load", () => {
let script = document.createElement("script");
script.addEventListener("load", (event) => {
console.log("Loaded");
});
script.src = "example.js";
document.body.appendChild(script);
});
支持动态检测样式表是否加载完成
window.addEventListener("load", () => {
let link = document.createElement("link");
link.type = "text/css";
link.rel= "stylesheet";
link.addEventListener("load", (event) => {
console.log("css loaded");
});
link.href = "example.css";
document.getElementsByTagName("head")[0].appendChild(link);
});二 unload事件
1、使用场景：
- unload 事件会在文档卸载完成后触发
- unload 事件一般是在从一个页面导航到另一个页面时触发
- 最常用于清理引用，以避免内存泄漏
- 因为 unload 事件是在页面卸载完成后触发的，所以不能使用页面加载后才有的对象。此时要访问 DOM 或修改页面外观都会导致错误
2、指定方式
- JavaScript 方式
window.addEventListener("unload", (event) => {
console.log("Unloaded!");
});
- 给<body>元素添加 onunload 属性
<!DOCTYPE html>
<html>
<head>
<title>Unload Event Example</title>
</head>
<body onunload="console.log('Unloaded!')">
</body>
</html> 三 resize事件
1、使用事件
当浏览器窗口被缩放到新高度或宽度时，会触发 resize 事件。这个事件在 window 上触发，因此 可以通过 JavaScript 在 window 上或者为元素添加 onresize 属性来指定事件处理程序
window.addEventListener("resize", (event) => {
console.log("Resized");
}); 2、触发条件
- 不同浏览器在决定何时触发 resize 事件上存在重要差异。IE、Safari、Chrome 和 Opera 会在窗口缩放超过 1 像素时触发 resize 事件，然后随着用户缩放浏览器窗口不断触发。
- 浏览器窗口在最大化和最小化时也会触发 resize 事件
！！应该避免在这个事件处理程序中执行过多计算。否则可能由于执行过于频繁而导致浏览器响应明确变慢
四 scroll事件
1、使用场景
- 在混杂模式下， 可以通过元素检测 scrollLeft 和 scrollTop 属性的变化
- 在标准模式下，这些变化在除早期版的 Safari 之外的所有浏览器中都发生在元素上（早期版的 Safari 在上跟踪滚动位置）
window.addEventListener("scroll", (event) => {
if (document.compatMode == "CSS1Compat") {
console.log(document.documentElement.scrollTop);
} else {
console.log(document.body.scrollTop);
}
}); 
3860
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
