事件（二）

•  跨浏览器的事件对象

虽然DOM和IE中的event对象不同，但基于它们之间的相似性依旧可以拿出跨浏览器的方案出来：

var EvnetUtil={

  addHandler:function(element,type,handler){

//省略的代码

},

getEvent:function(event){

  return event?event:window.event;

},

getTarget:function(){

  return event.target||event.srcElement;

},

preventDefault:function(event){

 if(event.preventDefault){

 event.preventDefault();

}else{

   Event.returnValue=false;

}

},

removeHandler:function(element,type,handler){

//省略的代码

},

stopPropagation:function(event){

 if(event.stopPropagation){

  event.stipPropagation();

}else{

  event.cancelBubble=true;

}

}

}

•  事件类型

1. UI事件，当用户与页面上的元素交互时触发；
2. 焦点事件，当元素获得或失去焦点时触发；
3. 鼠标事件，当用户通过鼠标在页面上执行操作时触发；
4. 滚轮事件，当使用鼠标滚轮时触发；
5. 文本事件，当在文档中输入文本时触发；
6. 键盘事件，当用户通过键盘在页面上执行操作时触发；
7. 合成事件，当为IME输入字符串时触发；
8. 变动事件，当底层DOM结构变化时触发。

• load事件（UI事件）

js中最常用的事件，当页面完全加载后（包括图片，js文件，css文件），就会触发window上面的load事件，load事件的定义方式：

EventUtil.addHandler(window,”load”,function(event){

   alert(“Loaded!”);

})

这种方式通过js添加load事件，在兼容DOM的浏览器中，event.target属性的值会被设置为document，而ie并不会为了这个事件设置srcElement属性。

根据DOM2级事件规范，应该在document而非window上面触发load事件，但是，所有浏览器都在window上面实现了该事件，以确保向后兼容。

图片也可以触发load事件，例如在图片加载完毕后就会显示一个弹窗：

var image=document.getElementById(“myImage”);

EventUtil.addHandler(image,”load”,function(event){

  event=EventUtil.getEvent(event);

  alert(EvenUtile.getTarget(event).src);

});

还有一个例子是在js声明image对象：

EventUtil.addHandler(window,”load”,function(){

  var image=new Image();

  EventUtil.addHandler(imgage,”load”,function(event){

  alert(“Image loaded!”);

})

Image.src=”smile.gif”;

});

• unload事件（UI事件）

这个事件在文档被完全卸载后触发，只要用户从一个页面切换到另一个页面，就会触发unload事件，而利用这个事件最多的情况是清除引用，以避免内存泄漏。

• resize事件（UI事件）

当浏览器窗口被调整到一个新的高度或宽度时，就会触发resize事件，这个事件在window上面触发，例如：

EventUtil.addHandler(window,”resize”,function(evnet){

alert(“Resized”);

});

关于何时回触发resize事件，不同浏览器有不同的机制，ie、Safari、Chrome和Opera会在浏览器窗口变化了1像素时触发resize事件，然后随着变化不断重复触发，Firefox则只会在用户停止调整窗口大小时才会触发resize事件，由于存在这个差别，应该注意不要在这个事件处理程序中加入大量的代码，以为这些代码有可能被频繁执行，导致浏览器反应明显变慢。

• scroll事件（UI事件）

虽然scroll事件在window对象上发生的，但它实际表示的则是页面中元素的变化。

• 焦点事件

1. blur：在元素失去焦点时触发。这个事件不会冒泡。
2. focus：在元素获得焦点时触发，这个事件不会冒泡。
3. focusin：在元素获得焦点时触发，这个事件冒泡。
4. focusout：在元素失去焦点时触发，这个事件冒泡。

当焦点从页面中的一个元素移动到另一个元素，触发顺序如下：

1. focusout
2. focusin
3. blur
4. focus

•  鼠标与滚轮事件

1. click：在用户单击鼠标按钮或者按下回车键时触发。
2. dblclick：在用户双击鼠标按钮时触发。
3. mousedown：在用户按下任意鼠标按钮时触发。
4. mouseenter：在鼠标光标从元素外部首次移动到元素范围之内时触发。事件不冒泡
5. mouseleave：在位于元素上方的鼠标光标移动到元素范围之外时触发。事件不冒泡
6. mousemove：当鼠标指针在元素内部移动时重复触发，不能公国键盘触发这个事件。
7. mouseout：在鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发。
8. mouseover：在鼠标指针位于一个元素外部，然后用户将其首次移入另一个元素边界之内时触发。
9. mouseup：在用户释放鼠标按钮时触发。

• 客户区坐标位置

鼠标事件都在浏览器视口中的特定位置上发生的，这个位置信息保存对象的clientX和clientY属性，例如：

• 页面坐标位置

通过客户区坐标能够知道鼠标是在视口中什么位置发生的，而页面坐标通过事件对象的pageX和pageY属性，能告诉你事件是在页面中的什么位置发生的。这两个属性表示鼠标光标在页面中的位置，因此坐标是从页面本身而非视口的左边和顶边计算的。

在页面没有滚动的情况下，pageX和pageY的值与clientX和clientY的值相等。

• 屏幕坐标位置

鼠标事件发生时，不仅会有相对于浏览器窗口的位置，还有一个相对于整个电脑屏幕的位置，而通过screenX和screenY属性就可以确定鼠标事件发生时鼠标指针相对于整个屏幕的坐标信息。

• 修改建

虽然鼠标事件主要是使用鼠标来触发的，但在按下鼠标时键盘上的某些键的状态也可以影响到所要采取的操作，这些修改建就是shift、ctrl、alt和Meta，它们经常被用来修改鼠标事件的行为，dom为此规定了4个属性：shiftKey、ctrlKey、altKey和metaKey，这些属性中包含的都是布尔值，如果相应的键被按下，则值为true，否则为false。例如：

var div=document.getElementById(“myDiv”);

EventUtil.addHandler(div,”click”,function(event){

  Event=EventUtil.getEvnet(event);

  event=EventUtil.getEvent(event);

  var keys=new Array();

  if(event.shiftKey){

   keys.push(“shift”);

}

if(event,ctrlKey){

  keys.push(“ctrl”);

}

if(event.altKey){

  keys.push(“alt”);

}

if(event.metaKey){

  keys.push(“meta”);

}

alert(“Keys:”+keys.join(“,”));

});