这篇文章主要介绍了 JavaScript 事件类型中 UI 事件详解的相关资料, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
"DOM3 级事件" 规定了一下几类事件
UI 事件,当用户与页面上的元素交互时除法;
焦点事件,元素获得或失去焦点;
鼠标事件,通过鼠标在页面上执行操作;
滚轮事件,使用鼠标滚轮或类似设备;
文本事件,当用户在文档中输入文本;
键盘事件,通过键盘在页面上执行操作;
合成事件,当为 IME(Input Method Editor,输入法编辑器)输入字符时除法;
变动事件(mutation),底层 DOM 结构发生变化;
变动名称事件,当元素或属性名变动时,此类事件已被废弃。
下文着重说明 UI 事件的内容
UI 事件指的是那些不一定与用户操作有关的事件。
- DOMActivate,元素已经被用户操作(鼠标或键盘)激活。已经被废弃。
- load,页面完全加载完后在window上触发,所有框架加载完毕后在框架集上触发,图像加载完毕在img元素上触发,当嵌入内容加载完毕在object元素上触发。
- unload,页面完全卸载(window),所有框架都卸载后(框架集),嵌入内容卸载完毕后(object)。
- abort,当用户停止下载过程,如果嵌入内容没有加载完,则在object元素上除法。
- error,当js错误时(window),当无法加载图像时(img),当无法加载嵌入内容时(object),当一或多个框架无法加载(框架集)。
- select,当用户选择文本框(texterea或input)中的一个或多个字符时触发。
- resize:当窗口或框架的大小变化时(window或框架)
- scroll:当用户滚动带滚动条的元素中的内容时(在该元素上触发)
load 事件
js 中最常用的一个事件就是 load,当页面完全加载完毕后(所有图像、js 文件、CSS 文件等),就会触发 window 上面的 load 事件。如:
- window.onload = function () {
- console.log('loaded');
- }
一般来说,在 window 上面发生的任何事件都可以在 body 元素中通过相应的特征来指定,因为在 html 中无法访问 window 元素。这只是为了保证向后兼容的一种权宜之计。如:
- document.body.onload = function () {
- console.log('loaded');
- }
同样也可以在图像元素上使用:
- var img = document.getElementById("img");
- img.onload = function () {
- console.log(event.target.src);
- }
又如下面代码,在 window 加载完毕后,想 body 追加一个 img 元素,在 img 元素加载完毕后再提示图像的 src 以及一个提示信息:
- window.onload = function () {
- var image = document.createElement("img");
- document.body.appendChild(image);
- image.src = "scr.png"
- image.onload = function () {
- console.log(event.target.src);
- console.log('img is loaded');
- };
- }
另外,script 元素也以非标准的方式支持 load 事件。
部分浏览器还支持 link 元素上的 load 事件,以便开发人员确定样式表是否加载完毕。
unload 事件
这个事件在文档被完全卸载后触发。只要用户从一个页面切换到另一个页面,就会发生 unload 事件。
- window.onunload = function () {
- alert("8888");
- }
应该小心编写 onunload 事件处理程序中的代码,因为页面加载后存在的那些对象,此时就不一定存在了。
resize 事件
当浏览器窗口被调整到一个新的高度或宽度,就会触发该事件。
- window.onresize = function () {
- console.log(document.body.clientWidth);
- }
因为部分浏览器在窗口变化了 1 像素就触发该事件,并随着变化不断触发;也有浏览器则只会在用户停止调整窗口大小时才会触发。所以应该避免在这个事件的处理程序中加入大量的计算代码,避免浏览器反应变慢。
scroll 事件
该事件虽然在 window 对象上发生的,但实际表示的是页面中响应元素的变化。混杂模式下,通过 body 元素的 scrollLeft 和 scrollTop 来监控变化;而在非标准模式下,除 Safari 之外的所有浏览器都会通过 html 元素(documentElement)来反映这个变化:
- window.onscroll = function () {
- console.log(document.documentElement.scrollTop || document.body.scrollTop);
- }
因为浏览器随着变化不断触发, 所以应该避免在这个事件的处理程序中加入大量的计算代码,避免浏览器反应变慢。
abort 事件
关于 abort、error、select 等事件请关注后续 update
error 事件
关于 abort、error、select 等事件请关注后续 update
select 事件
关于 abort、error、select 等事件请关注后续 update
来源: http://www.phperz.com/article/17/0215/267579.html