手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >JavaScript事件类型中UI事件详解
JavaScript事件类型中UI事件详解
摘要:“DOM3级事件”规定了一下几类事件UI事件,当用户与页面上的元素交互时除法;焦点事件,元素获得或失去焦点;鼠标事件,通过鼠标在页面上执行操...

“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

【JavaScript事件类型中UI事件详解】相关文章:

JavaScript中setMonth()方法的使用详解

javascript相关事件的几个概念

JavaScript中的small()方法使用详解

JQuery中DOM事件绑定用法详解

JavaScript中的toUTCString()方法使用详解

JavaScript中switch语句的用法详解

Javascript事件触发列表与解说

javascript事件冒泡实例分析

JavaScript中的acos()方法使用详解

详解JavaScript中的表单验证

精品推荐
分类导航