前面介绍了,javascript中的事件流,事件处理程序以及事件对象Event包含的属性和方法。
这篇开始介绍Event的类型,包括常用的UI事件,焦点事件以及鼠标事件等。
一、UI事件
UI事件是页面级事件,包括的基本的事件有如下:
1. load : 当页面完全加载完后(包括图片,js文件,css文件等外部资源)触发window上面的load事件。
其中在img元素 ,script标签,style标签中都可以添加各自的load事件。
与图片不同的是,只有在设置了<script>元素的src属性并将改元素添加到文档后,才会开始下载js文件。
定义load事件的2中方式:
1) EventUtils.addHandler(window, 'load', function(){...})
2) 在<body>元素上添加一个onload的特性
2. unload: 当页面完全卸载完后,或框架,图片等元素卸载完毕后触发。
和load类似,可单独在image,js,css中添加unload事件。
注册方式和load类似,略。
3.abort:嵌入的内容没有下载完,被用户阻止后触发。
4.error:加载的内容出现错误时触发。
当图片加载失败显示默认图片并重写error事件:
<img src="$src" οnerrοr="this.src=\'..images/default.png\';this.οnerrοr=null;" />
5.select:当用户选择文档框<input /><textarea>元素时触发。
6. resize:当框架或窗口大小发生变化时触发。
7.scroll:当用户滚动元素时发生。混杂模式下,可以通过<body>元素的scrollLeft和scrollTop来监控到这一变化。 标准模式下,通过<html>元素来反应这一变化除了safari。
EventUtils.addHandler(window, 'scroll', function(event) {
if (document.compatMode =='CSS1Compat') {
alert(document.documentElement.scrollTop)
} else {
alert(document.body.scrollTop)
}
})
二、焦点事件
焦点事件会在页面元素获得或失去焦点时触发,常用的焦点事事件包括blur,focus。
1.blur:元素失去焦点时触发,此事件不冒泡,所有浏览器都支持。
EventUtils.addEvent(body.getElementById('test'), 'blur', function(){ console.log('test is blur')});
2. focus:元素获取焦点时触发,此方法不冒泡,所有浏览器都支持。
EventUtils.addEvent(body.getElementById('test'), 'focus', function(){ console.log('test is focus')});
3.focusin:元素获得焦点时触发,与focus等价,但是冒泡,支持此方法的有IE5.5+,Safari5.1+,Opera11.5+,Chrome。
4.focusout:在元素失去焦点时触发,与blur同价,但是冒泡,支持此方法的有IE5.5+,Safari5.1+,Opera11.5+,Chrome。
三、鼠标和滚轮事件
I)基本事件
1.click:点击事件,单击。
2.dbclick:双击事件。
3.mouseenter:鼠标移入元素范围之内事件
4.mouseleave:鼠标移出元素范围事件
5.mousemove:鼠标在元素范围之内移动事件
6.mousedown:用户按下任意鼠标键触发。
注:
1)在同一元素上相继触发mousedown和mouseout事件,才能触发click事件。
2)事件触发的顺序:mousedown =>mouseup => click => mousedown => mouseup => dbclick
3)IE8及以前版本中的触发顺序:mousedown => mouseup => click => dbclick
II)事件的一些基本信息
1.点击事件在浏览器视图中位置(客户端位置):包含在Event对象的clientX,clientY属性中。所有浏览器都支持这2个属性。
var div = document.getElementById('test');
EventUtils.addEvent(div, 'click', function(event) {
event = EventUtils.getEvent(event);
console.log('clientX: ' + event.clientX + ",clientY: " + event.clientY);
})
2.点击事件在页面中的坐标位置:包含在Event对象的pageX,pageY属性中。IE8及之前的版本不支持此属性。
注:在页面没有滚动的情况下,pageX和pageY的值与clientX 和clientY的值相等。
获取页面坐标位置综合方法:
var div = document.getElementById('test');
EventUtils.addEvent(div, 'click', function(event) {
event = EventUtils.getEvent(event);
var pageX = event.pageX, pageY = event.pageY;
if (pageX === undefined) {
pageX = event.clientX + (document.body,scrollLeft ||
document.documentElement.scrollLeft) ;
}
if (pageY === undefined) {
pageY = event.clientY + (document.body,scrollTop ||
document.documentElement.scrollTop) ;
}
console.log('pageX : ' + pageX + ",pageY : " + pageY );
})
注:document.body是混杂模式(极速模式),document.documentElement是标准模式。
3.点击事件屏幕坐标位置:包含在Event对象screenX和screenY属性中,代码略。
4.detail信息:DOM2级事件规范在Event对象中提供了detail属性。
5.IE为鼠标事件提供如下属性:
offsetX:光标相对于目标元素边界的x坐标
offsetY:光标相对于目标元素边界的y左边