DOM 事件与事件的冒泡/委派/绑定

DOM事件处理模型与事件的冒泡/委派/绑定

• 基本事件类型

事件就是用户和浏览器之间的交互行为，如点击按钮、鼠标移动和关闭窗口等。可以为对应的对象绑定事件处理函数来响应事件。
常用事件类型有：
点击类：onclick
文档加载：onload --页面加载后才触发，常为window绑定。
鼠标类：onmousemove onmousedown onmouseup onmousewheel --鼠标事件，绑定给document
键盘类：onkeydown onkeyup onkeypress --一般都会绑定给一些可以获取到焦点的对象，如input，document
滚动条：onscroll --元素的滚动条滚动时触发，常用于判定滚动条是否到底

> 当满足以下条件时，元素的滚动条到底：
> if判断 scrollHeight-scrollTop == clientHeight时，说明垂直滚动条滚动到底;
> if判断 scrollWidth-scrollLeft == clientWidth时，说明水平滚动条滚动到底。

• 事件对象

当事件的响应函数被触发时，浏览器每次都会讲一个事件对象event作为实参传递进响应函数；即使不指定形参，也会默认自动传递进入。
在事件对象中，封装了当前事件相关的一切信息，比如鼠标的坐标，滚动方向等。
属性：
clientX 获取鼠标指针在当前可见窗口的水平坐标
clientY 获取鼠标指针在当前可见窗口的垂直坐标
pageX 获取鼠标指针相对于当前整个页面的水平坐标（IE8及以下不支持）
pageY 获取鼠标指针党对于当前整个页面的垂直坐标（IE8及以下不支持）

在IE8及以下浏览器中，响应函数被触发时传递的不是事件对象event，而是将事件对象作为window的属性保存的。因此，在响应函数中使用事件对象时，先执行如下处理方式：
event=event||window.event;

//获取鼠标指针的当前坐标值
var posX=0,posY=0;
event=event||window.event
if(event.pageX||event.pageY){
posX=event.pageX;
posY=event.pageY;
}else{
posX=event.clientX+document.body.scrollLeft||document.documentElement.scrollLeft;
posY=event.clientY+document.body.scrollTop||document.documentElement.scrollTop;
/*在chrome中认为浏览器的滚动条是body的，而火狐等浏览器认为是html的*/

• 事件的冒泡/委派/绑定

冒泡（Bubble）：指事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发。

在开发中，大部分情况下事件的冒泡都是有用的。如果不希望发生，可以通过事件对象来取消。
在w3c中使用stopPropagation()方法；
在IE中使用：event.cancelBubble=true;

委派：指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。

事件的委派是利用了冒泡原则，通过委派可以减少事件绑定的次数，提高程序性能。
但有时需要结合事件对象的target属性以定位后代元素。
如：ul.οnclick=function(event){
event=event||window.event;
if(event.target.className=“link”){代码块;}
};

绑定：使用对象.事件=响应函数的形式，只能同时为一个元素的一个事件绑定一个响应函数，绑定多个时会被覆盖。通过事件的绑定方法，可以为元素的一个相同事件同时绑定多个响应函数。
语法：
addEventListener()
参数：1.事件的字符串，不用on 2.回调函数 3.是否在捕获阶段触发事件，一般为false
attachEvent()
参数：1.事件的字符串，加on 2.回调函数

addEventListener()先绑定的先执行，IE8及以下版本不支持；
attachEvent()后绑定的先执行，IE8支持。

//封装设置如下函数，以兼容不同浏览器;另外attachEvent()中的this是window,而不是objcet，所以使用call来处理下
function bind(object,Str,callback){
if(object.addEventListener){
object.addEventListener(Str,callback,false);
}else{
object.attachEvent("on"+Str,function(){callback.call(object)});}
}

补充：
事件的捕获，目标与冒泡阶段

阻止捕获：
在w3c中使用preventDevault()方法；
在IE中使用：event.returnValue=false。