javascript中的事件Event（⼆）—事件类型
前⾯介绍了，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：嵌⼊的内容没有下载完，被⽤户阻⽌后触发。
<：加载的内容出现错误时触发。
当图⽚加载失败显⽰默认图⽚并重写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 (documentpatMode =='CSS1Compat') {
alert(document.documentElement.scrollTop)
} else {
alert(document.body.scrollTop)
}
})
⼆、焦点事件
焦点事件会在页⾯元素获得或失去焦点时触发，常⽤的焦点事事件包括blur,focus。
1.blur：元素失去焦点时触发，此事件不冒泡，所有浏览器都⽀持。
EventUtils.ElementById('test'), 'blur', function(){ console.log('test is blur')});
2. focus：元素获取焦点时触发，此⽅法不冒泡，所有浏览器都⽀持。
EventUtils.ElementById('test'), 'focus', function(){ console.log('test is focus')});
blur事件3.focusin：元素获得焦点时触发，与focus等价，但是冒泡，⽀持此⽅法的有IE5.5+，Safari5.1+，Opera11.5+，Chrome。
4.focusout：在元素失去焦点时触发，与blur同价，但是冒泡，⽀持此⽅法的有IE
5.5+，Safari5.1+，Opera11.5+，Chrome。
三、⿏标和滚轮事件
I）基本事件
1.click：点击事件，单击。
2.dbclick：双击事件。
注：
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 = ElementById('test');
EventUtils.addEvent(div, 'click', function(event) {
event  = Event(event);
console.log('clientX: ' + event.clientX + ",clientY: " + event.clientY);
})
2.点击事件在页⾯中的坐标位置：包含在Event对象的pageX，pageY属性中。IE8及之前的版本不⽀持此属性。 注：在页⾯没有滚动的情况下，pageX和pageY的值与clientX 和clientY的值相等。
获取页⾯坐标位置综合⽅法：
var div = ElementById('test');
EventUtils.addEvent(div, 'click', function(event) {
event  = Event(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左边

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。