13.4.1 UI 事件 | 易学教程

事件	说明
DOMActivate	表示元素已经被用户操作（通过鼠标或键盘）激活，在 DOM3 中被废弃，不建议使用
load	当页面完全加载后在 window 上触发，当所有的框架都加载完毕时在框架集上触发，当图像加载完毕时在 img 元素上触发，当嵌入的内容加载完毕时在 object 元素上触发
unload	当页面完全卸载后在 window 上触发，当所有的框架都卸载后在框架集上触发，当嵌入的内容卸载完毕后在 object 元素上触发
abort	在用户停止下载过程时，如果嵌入的内容没有加载完，则在 object 元素上触发
error	当发生 JS 错误时在 window 上触发，当无法加载图像时在 img 元素上触发，当无法嵌入内容时在 object 元素上触发，当有一个或多个框架无法加载时在框架集上触发
select	当用户选择文本框（ input 或 textarea ）中的一个或多个字符时触发
resize	当窗口或框架的大小变化时在 window 或框架上触发
scroll	当用户滚动带滚动条的元素中的内容时，在该元素上触发。body 元素中包含所加载页面的滚动条

一、load 事件

window 上的 load 可以通过 JS 添加

EventUtil.addHandler(window,'click',function(event) {
    console.log('loaded');
});

或在 body 元素添加对应的特性

<body οnlοad='alert("loaded")'></body>

img 元素上的 load 也可以通过以上两种方式添加，需要注意的是，使用 JS 时，需先指定事件处理程序再添加 src 属性，这里是因为只要设置了 src 属性，新图像元素就会开始下载

EventUtil.addHandler(window,'load',function() {
    var image = document.createElement('img');
    EventUtil.addHandler(image,'load',function(event) {
        event = EventUtil.getEvent(event);
        alert(EventUtil.getTarget(event).src);
    });
    document.body.appendChild(image);
    image.src = 'smile.gif';
});

script 元素在设置 src 属性并且将元素添加到文档中之后才会开始下载 JS 文件
link 元素在设置 href 属性并且将元素添加到文档中之后才会开始下载 CSS 文件

二、unload 事件

对应于 load 事件在 window 上触发的两种方式

三、resize 事件

在 window 上触发，不同的浏览器有不同的机制，IE、Safari、Chrome 和 Opera 会在窗口发生了1像素变化时触发，Firefox 会在用户停止调整窗口大小时触发

四、scroll 事件

该事件会在文档被滚动期间重复触发

来源：CSDN

作者：糖小昔

链接：https://blog.csdn.net/weixin_44774877/article/details/104105343

标签

event

ui框架