Oct 25th

事件流：描述的是从页面中接受事件的顺序 （IE：事件冒泡流 / Netscape事件捕获流）

事件冒泡：即事件最开始由最具体的无素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到最不具体的那个节点（文档）

事件捕获：不太具体的节点应该更早接收到元素，而最具体的节点最后接收到事件。

使用事件处理程序：

1、HTML事件处理程序，现在不建议使用了。 1. 事件直接加在HTML代码中: 缺点：HTML和js代码高耦合，如果修改，就要修改两个地方：HTML元素内和script函数。

2、DOM 0级事件处理程序：
(1)通过var btn=document.getElementById('btn')获取元素；
(2)通过btn.onclick=function(){alert('Hello')}在元素上添加事件；

优点：可以给一个元素上添加多个事件处理程序，会按照程序顺序实行程序

3、DOM2级事件处理程序：

定义了两个方法，用于处理指定和删除事件处理程序的操作

addEventListener()

removeEventListener()

接收三个参数：要处理的事件名（预定义好的事件名前不加on，如onclick要改为click）、作为事件处理程序的函数、布尔值（useCapture, 一个bool类型。当为false时为冒泡获取(由里向外)，true为capture捕捉方式(由外向里)）

定义了两个方法---用于处理指定和删除事件处理程序的操作。【addEventListener()---给某元素添加一个事件监听程序】和【removeEventListener()---删除一个事件。必须传入添加事件时相同的参数】（通过前者添加的事件，只能通过后者删除。如obj.click= null无效）

DOM2级事件处理程序，ie不支持，ie有专用的事件处理程序。

DOM2和DOM0级共同优点：可以给一个元素上添加多个事件处理程序，会按照顺序执行。

*this表示可以引用触发的元素

4、IE事件处理程序

attachEvent()添加事件

detachEvent()删除事件

接受相同的两个参数：事件处理程序的函数（预定义好的事件名前要加on，如click要改为onclick）和事件处理程序的函数

不使用第三个参数的原因是：ie8以及更早的浏览器版本只支持事件冒泡

支持ie事件处理程序的浏览器主要有ie和opera两个浏览器。

5、跨浏览器事件处理

var eventUtil={
            //添加句柄
            addEventHandler:function(element,type,handler){
　　　　　　　　　　//dom2级处理程序事件
                if(element.addEventListener){
                    element.addEventListener(type,handler,false);
　　　　　　　　　　//ie处理程序事件
                }else if(element.attachEvent){
                    element.attachEvent('on'+type,handler);
                }else{
                    element['on'+type]=handler;
                }
            },

            //删除句柄
            removeEventHandler:function(element,type,handler){
                if(element.removeEventListener){
                    element.removeEventListener(type,handler,false);
                }else if(element.detachEvent){
                    element.detachEvent('on'+type,handler);
                }else{
                    element['on'+type]=null;
                }
            }
        }

        var btn=document.getElementById('btn1');
        eventUtil.addEventHandler(btn,'click',function(){
            alert("这是一个按钮！");
        });

事件对象

IE8之前 window.event  之后用 event

1、DOM的事件对象(在触发DOM事件上都会产生一个事件对象)

(1)、type属性 用于获取事件的类型

(2)、target属性 用于获取事件的目标

(3)、stopPropagation() 用于阻止事件冒泡

(4)、preventDefault() 阻止事件默认行为 <a href="#"></a> 就是阻止比如a标签的跳转行为

2、ie的事件对象

(1)、type属性 用于获取事件的类型

(2)、srcElement属性 用于获取事件的目标

(3)、cancelBubble属性 用于阻止事件冒泡

true值表示阻止冒泡，false表示不阻止冒泡

(4)、returnValue属性 阻止事件默认行为