事件类型--UI事件

最新推荐文章于 2024-07-29 19:27:46 发布

kalinara

最新推荐文章于 2024-07-29 19:27:46 发布

阅读量557

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： UI事件 load unload resize scroll

本文链接：https://blog.youkuaiyun.com/kalinara/article/details/75017771

JavaScript 专栏收录该内容

45 篇文章

订阅专栏

本文详细介绍了网页中的UI事件，包括load、unload、resize、scroll等事件的触发时机、使用场景及注意事项。并通过实例展示了如何利用这些事件进行页面的加载监测、资源预加载以及窗口调整等功能。

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

UI事件
焦点事件
鼠标事件
滚轮事件
文本事件
键盘事件
合成事件
变动事件

【UI事件】

1. load   完全加载后触发（页面window/body、框架、图像img、嵌入的内容script）

!!可以在body上执行onload的原因：在window上面发生的任何事件都可以在body元素中通过相应特性来指定，
因为在HTML中无法访问window元素。

2. unload 完全卸载后触发（页面window/body、框架、嵌入的内容script）
3. resize 窗口大小变化时在window上触发，框架大小变化时在框架上触发
4. scroll 带滚动条元素滚动时触发
5. select 用户选择文本框（input/textarea）中的字符时触发
6. error  发生错误时触发
7. abort  用户停止下载时，若内容未加载完成，在object上触发

1. 【load】

当页面完全加载后（包括图像、js文件、css文件等外部资源），发生window上的load事件。

定义load事件的两种方法：

1. EventUlit.addHandler(对象,"load",操作函数);

2. 为目标元素添加一个onload特性

【注意】
1. 对新创建的img元素指定onload事件处理程序时，先指定事件再指定src属性

//要向DOM中添加元素，必须确定页面已经加载完成，所以先为window指定onload事件
EventUnit.addHandler(window,"load",function(){
    var image=document.createElement("img");
    //在指定src前指定事件
    EventUnit.addHandler(image,"load",function(event){
        event=EventUnit.getEvent(event);
        alert(EventUnit.getTarget(event).src);
    });
    document.body.appendChild(image);
    //只要设置了src属性，图片开始下载
    image.src="../images/1.jpg";
});

//实现图片预先加载，没将image节点添加到DOM树里
EventUnit.addHandler(window,"load",function(){
    var image=newImage();
    EventUnit.addHandler(image,"load",function(event){
        event=EventUnit.getEvent(event);
        alert(EventUnit.getTarget(event).src);
    });
    image.src="../images/1.jpg";
});

2.IE和Opera还支持link上的onload事件处理程序，以便开发人员确定样式表是否加载完毕

EventUnit.addHandler(window,"load",function(){
    var link = document.createElement("link");
    link.type = "text/css";
    link.rel = "stylesheet";
    EventUnit.addHandler(link,"load",function (event) {
        alert("css loaded!");
    });
    link.href="xx.css";
    document.getElementsByTagName("head")[0].appendChild(link);  //要指定src或href，以及把link添加到文档后才开始加载
});

3.script元素要求指定src和添加到文档后才开始加载，所以事件和src属性的先后顺序不作要求。

2. 【unload】

当用户从一个页面切换到另一个页面时，会发生unload事件。
定义unload事件方法：

1.EventUlit.addHandler(对象,"unload",操作函数);

2.为目标元素添加一个onunload特性

3. 【resize】

当浏览器窗口调整高度或宽度时，触发resize事件。

Firefox在用户停止调整窗口大小时才触发resize事件；
其他浏览器在窗口变化1像素时触发resize事件。

定义resize事件方法：

1.EventUlit.addHandler(对象,"resize",操作函数);

2.为`<body>`添加一个onresize特性

4. 【scroll】

在window对象上发生，但实际表示的是页面中相应元素的变化。

EventUnit.addHandler(window,"scroll",function(event){
    //标准模式
    if(document.compatMode=="CSS1Compat"){
        alert(document.documentElement.scrollTop);//页面的垂直滚动位置
        alert(document.documentElement.scrollLeft);//页面的水平滚动位置
    }
    //混杂模式和Safari
    else{
        alert(document.body.scrollTop);
        alert(document.body.scrollLeft);
    }
});