UI事件
UI事件指的是哪些不一定与用户操作有关的事件。
load
当页面完全加载后,在window上触发,当所有框架都加载完毕时在框架上触发,当图像加载完毕时在img元素上触发,或当嵌入的内容加载完毕时在object元素上触发。
有两种方式可以指定onload事件,
第一种是用javascript事件(1)中定义的EventUtil对象来定义:
EventUtil.addHandler(window,'load',function(){
alert('Loaded!');
});
第二种是直接在body元素上添加一个onload特性:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body onload="alert('Loaded!')">
</body>
</html>
图像上的load事件
可以在HTML中为任何图像指定onload事件处理程序:
<img src="image.jpg" alt="" onload="alert('Image loaded.')">
也同样可以用javascript来实现:
var image=document.getElementById('myImage');
EventUtil.addHandler(image,'load',function(){
alert('Image loaded.');
});
新创建的img元素,可以为其指定一个事件处理程序,以便图像加载完毕后给出提示。注意:
要在指定src属性之前指定事件。新的图像元素只要设置了src属性就会开始加载,不管它有没有添加到文档中:
EventUtil.addHandler(window,'load',function(){
var image=document.createElement('img');
EventUtil.addHandler(image,'load',function(event){
event=EventUtil.getElement(event);
alert(EventUtil.getTarget(event).src);
});
document.body.appendChild(image);
image.src='iamge.jpg';
});
script元素上的load事件
script元素也会触发load事件,但是与img元素不同的是:只有在设置了script元素的src属性并将它们添加到文档后,才会开始下载javascript文件。所以,script元素指定src属性和执行事件处理程序的顺序先后并不重要:
EventUtil.addHandler(window,'load',function(){
var script=document.createElement('script');
EventUtil.addHandler(script,'load',function(){
alert('Loaded!');
});
script.src='example.js';
document.body.appendChild(script);
});
unload事件
unload事件在文档被完全卸载后触发,在所有框架都卸载后在框架集上触发,或当嵌入的内容卸载完毕后在object元素上触发。
同样也有两种方式可以指定onunload事件,
第一种是用javascript事件(1)中定义的EventUtil对象来定义:
EventUtil.addHandler(window,'unload',function(){
alert('Unloaded!');
});
第二种是直接在body元素上添加一个onunload特性:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body onunload="alert('Unloaded!')">
</body>
</html>
resize事件
当窗口或框架大小变化时window或框架上触发。
可以用javascript事件(1)中定义的EventUtil对象来定义resize事件:
EventUtil.addHandler(window,'resize',function(){
alert('Resized!');
});
同样也可以通过body元素的onresize特性来指定处理程序。
关于何时触发resize事件,不同浏览器有不同的机制,IE、Safari、Chrome和Opera会在浏览器窗口变化了1px时就触发resize事件,然后随着变化不断重复触发。Firefox则只会在用户停止调整窗口大小时才会触发resize事件。因此,尽量不要在resize事件处理程序中加入大量的计算代码,以避免代码被频繁执行而影响性能。
scroll事件
当用户滚动带滚动条的元素内容时,在该元素上就会触发scroll事件。
在混杂模式下,可以通过body元素的scrollLeft和scrollTop来监控这一变化;在标准模式下,除safari之外的所有浏览器都会通过html元素来反映这一变化:
EventUtil.addHandler(window,'scroll',function(){
if(document.compatMode=='CSS1Compat'){
alert(document.documentElement.scrollTop);
}else{
alert(document.body.scrollTop);
}
});
因此,我们经常会看到这样的代码:
var scroll_top=document.documentElement.scrollTop || document.body.scrollTop;
焦点事件
焦点事件会在页面获得或失去焦点时触发。主要有以下几个:
blur事件
在元素事情焦点时触发。这个事件不会冒泡,所有浏览器都支持它。
focus事件
在元素获得焦点时触发。这个事件不会冒泡,所有浏览器都支持它。
鼠标与滚轮事件
鼠标事件是web开发中最常用的一类事件。DOM3事件中定义了9个鼠标事件:
click事件
在用户单击主鼠标按钮或者按下回车键时触发。
dblclick事件
在用户双击主鼠标按钮时触发。
mousedown事件
在用户按下了任意鼠标按钮时触发。不能通过键盘触发这个事件。
mouseenter事件
在鼠标光标从元素外部首次移动到元素范围之内时触发。这个事件不冒泡,而且在光标移动到后代元素上不会触发。
mouseleave事件
在元素上方的鼠标光标移动到元素范围之外时触发。这个事件不冒泡,而且在光标移动到后代元素上不会触发。
mousemove事件
当鼠标指针在元素内部移动时重复触发。不能通过键盘触发这个事件。
mouseout事件
在鼠标指针位于一个元素上方,然后用户将其移入另一个元素时触发。又移入的另一个元素可能位于前一个元素的外部,也可能是这个元素的子元素。不能通过键盘触发这个事件。
mouseover事件
在鼠标指针位于一个元素外部,然后用户将其首次移入另一个元素边界之内时触发。不能通过键盘触发这个事件。
mouseup事件
在用户释放鼠标按钮时触发。不能通过键盘触发这个事件。