事件模型、事件委托（实现一个事件委托）

说一下事件模型

JavaScript事件模型主要分为3种：原始事件模型、DOM2事件模型、IE事件模型。

原始（Dom0级）事件模型中没有事件流，事件一旦发生将马上进行处理 ;

DOM2事件模型:一次事件的发生包含三个过程：(1).事件捕获阶段，(2).事件目标阶段，(3).事件冒泡阶段。

IE事件模型: 只有两步，先执行元素的监听函数，然后事件沿着父节点一直冒泡到document（顶层对象）。

W3C制定的标准模型:Dom2事件模型

事件捕获：当某个元素触发某个事件（如onclick），顶层对象document就会发出一个事件流，随着DOM树的节点向目标元素节点流去，直到到达事件真正发生的目标元素。在这个过程中，事件相应的监听函数是不会被触发的。

事件目标：当到达目标元素之后，执行目标元素该事件相应的处理函数。如果没有绑定监听函数，那就不执行。

事件冒泡：从目标元素开始，往顶层元素传播。途中如果有节点绑定了相应的事件处理函数，这些函数都会被一次触发。

attention

所有的事件类型都会经历事件捕获但是只有部分事件会经历事件冒泡阶段,例如submit事件就不会被冒泡。

事件的传播是可以阻止的：
　　• 在W3c中，使用stopPropagation（）方法
　　• 在IE下设置cancelBubble = true；
　　在捕获的过程中stopPropagation（）；后，后面的冒泡过程就不会发生了

DOM中的事件对象 （event）

event对象中都有些什么？

事件定位相关属性（共6对）：

• x/y与clientX/clientY值一样，表示距浏览器可视区域（工具栏除外区域）左/上的距离；

• pageX/pageY，距页面左/上的距离，它与clientX/clientY的区别是不随滚动条的位置变化；

• screenX/screenY，距计算机显示器左/上的距离，拖动你的浏览器窗口位置可以看到变化；

• layerX/layerY与offsetX/offsetY值一样，表示距有定位属性的父元素左/上的距离。

常用属性

• target：发生事件的节点；（下面有一道理解事件委托的题用到它）

• currentTarget：当前正在处理的事件的节点，在事件捕获或冒泡阶段；

• timeStamp：事件发生的时间，时间戳。

• bubbles：事件是否冒泡。

• cancelable：事件是否可以用preventDefault()方法来取消默认的动作；

• keyCode：按下的键的值；

常用方法

• event. preventDefault()//阻止元素默认的行为，如链接的跳转、表单的提交；

• event. stopPropagation()//阻止事件冒泡

• event.initEvent()//初始化新事件对象的属性，自定义事件会用，不常用

• event. stopImmediatePropagation()：取消事件的进一步捕获或者冒泡，同时阻止任何事件处理程序被调用

什么是事件委托**

得用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件；

给ul下的li绑定不同的事件，js代码如下：

//给ul下的li元素绑定不同事件
var list = document.getElementById('myList');
list.addEventListener('click',function(event){
    event = event || window.event;
    var target = event.target || event.srcElement;
    switch(target.id){
        case "list1" : console.log('list1'); 
            break;
        case "list2" : console.log("list2");
            break;
        case "list3" : console.log("list3");
            break;
        case "list4" : console.log("list4");
            break;
    }
},false);