事件模型及事件代理委托

一、事件：

我们都知道在JS中，事件分三个阶段：捕获、目标、冒泡。

捕获：由外向内，由不具体到最具体，由document到元素目标：就是事件触发的元素冒泡：由内向外，由最具体到最不具体，由元素到document

二、事件处理程序：

1.DOM0级事件处理程序：

即直接在dom对象上注册时间名称，就是DOM0级写法，DOM0事件模型，所以的浏览器都支持。 先取元素，再以对象属性的形式添加事件，遵循覆盖的原则，后面绑定的事件会覆盖之前绑定的。

1）在HTML上添加

缺点：高耦合，修改不方便，html与js联系太紧密 <button type="button" onclick="dele()" id="btn">delete</button> <script> function dele(){ alert(this);//window } </script>

这样注册的事件，相当于动态调用函数(有点eval的意思)，因此不会传入event对象，同时，this指向的是window，不再是触发事件的dom对象，当然如果调用时传入this则指代调用对象

<button type="button" onclick="dele(this)" id="btn">delete</button> <script> function dele(){ alert(this);//button } </script>

2）获取元素添加

var btn = document.getELementById("btn"); btn.onclick = function(){//会被后面的绑定覆盖 alert("ok") } btn.onclick = function(){//实际会输出'btn' alert(this.id) }

因为事件就是在id为btn的dom节点上注册的，事件触发时，this就代表这个dom节点，可以理解为事件是被这个dom节点调用的

3）解绑DOM0级事件

原理就是最后注册的事件要覆盖之前的，最后一次注册事件设置成null，也就解除了事件绑定。

btn.onclick = null;

2.DOM2级事件处理程序：

与DOM0级相比，DOM2级有两大优点： 1. 可以给一个元素添加多个事件处理程序，会按顺序执行，也可以添加多个事件 2. DOM2新增了捕获和冒泡的概念，使得我们可以进行事件的代理委托，为动态生成的元素绑定事件

DOM2事件通过addEventListener和removeEventListener管理，分别用于绑定事件和解除绑定

1）绑定事件：addEventListener

有三个参数： “事件名称”： -string 事件名不用写on “事件回调”： -function 默认传入一个event参数 “捕获/冒泡”：-boolean false为冒泡，true为捕获 这里必须要再祭出非常重要的事件过程图了：

var div = document.getElementById("div"); //冒泡事件 div.addEventListener("click", function(e){ alert("ok"); }, false); //捕获事件 div.addEventListener("click", function(e){ alert("ok1"); }, true);

2）解除绑定：removeEventListener

解除绑定同样有三个参数： “事件名称”： -string 解除的事件名称 “事件回调”： -function 解除的回调函数，必须和注册时的一致,要想注册过的事件能够被解除，必须将回调函数保存起来，否则无法解除。 “捕获/冒泡”：-boolean 必须和注册事件时的类型一致

var div= document.getElementById("div"); //将回调存储在变量中 var fn = function(e){ alert("ok"); }; //绑定 div.addEventListener("click", fn, false); //解除 div.removeEventListener("click", fn, false);

3.IE事件处理程序：

DOM2级绑定事件确实给我们带来了许多的便利，但是IE总是不能让我们愉快的玩耍，对于反人类的低版本IE（IE8及其以下版本浏览器），addEventListener和removeEventListene是无法使用的，必须使用IE的方法：attachEvent和detachEvent

1）绑定事件：attachEvent

有两个参数： “事件名称”： -string 事件名必须写on “事件回调”： -function 默认传入一个event参数

var div = document.getElementById("div"); div.attachEvent("onclick", function(e){ alert("ok"); });

2）解除绑定：removeEventListener

也是有两个参数： “事件名称”： -string 事件名必须写on “事件回调”： -function 解除的回调函数，必须和注册时的一致,要想注册过的事件能够被解除，必须将回调函数保存起来，否则无法解除。

var div= document.getElementById("div"); //将回调存储在变量中 var fn = function(e){ alert("ok"); }; //绑定 div.attachEvent("onclick", fn); //解除 div.detachEvent("onclick", fn);

4.跨浏览器的事件处理程序：

为了浏览器的兼容，我们使用能力检测实现在各浏览器中使用事件绑定和解除事件绑定：

var eventUtil = { //添加句柄 addHandler:function(ele,type,handler){ if(ele.addEndEventListener){ ele.addEndEventListener(type,handler,false); }else if(ele.attachEvent){ ele.attachEvent('on'+type,handler); }else{ ele['on'+type] = handler; } }, //删除句柄 removeHandler:function(ele,type,handler){ if(ele.removeEndEventListener){ ele.removeEndEventListener(type,handler,false); }else if(ele.detachEvent){ ele.detachEvent('on'+type,handler); }else{ ele['on'+type] = null; } } } //调用 var btn = document.getElementById('btn'); var clickHandler = function(){ alert(123) } eventUtil.addHandler(btn,'click',clickHandler);//绑定事件 eventUtil.removeHandler(btn,'click',clickHandler);//解除绑定

三、事件对象

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

1.DOM中的事件对象（event）

1）type 事件类型 2）target 事件目标 3）stopPropagation() 阻止事件冒泡 4）preventDefault() 取消默认行为

2.IE中的事件对象（event||window.event）

在低版本IE（IE8-）中事件对象为window.event，所以取得事件对象的兼容写法为

target = target || window.target;

1）type 事件类型 2）srcElement 事件目标 兼容写法：

var ele = event.target||event.srcElement;

3）cancleBubble - boolean 阻止事件冒泡属性 true阻止；false不阻止； 4）returnValue -boolean 取消默认行为属性 true不取消；false取消；