DOM事件

一、事件流

　　事件冒泡，从最相关的元素（比如点击的按钮）扩散到最不相关的元素（整个document）。

　　事件捕获，从外层最不相关的元素触发到最相关的元素。

二、事件处理程序

　　1.HTML事件处理程序。

　　　　在HTML中添加，比如

<input type="button" value="按钮" id="btn" onclick="showMessage()" />

　　　　缺点：与js耦合度高，更改时两者都要更改。

　　2.DOM0级事件处理程序。

　　　　这是较为传统的方式，简单，具有跨浏览器优势；

　　　　在js中获得要添加事件的元素，然后再给它添加事件，例如

var btn = document.getElementById("btn");
btn.onclick = showMessage();
或直接赋匿名函数
btn.onclick = function(){
　　alert("hello");
}
要去除事件，则：
btn.onclick = null;

　　3.DOM2级事件处理程序。

　　　　DOM2级事件定义了两个方法，用于处理指定和删除事件处理程序的操作，addEventListener()和removeEventListener();

　　　　两个方法均接收三个参数，要处理的事件名、作为事件处理程序的函数、布尔值，布尔值true为捕获，false冒泡；

　　　　注意：事件名要去掉on

btn.addEventListener('click', showMessage, false);

　　　　DOM2级事件并不被IE浏览器支持。

　　4.IE事件处理程序。（IE和Opera）

　　　　也是支持两个方法，attachEvent()添加事件，detachEvent()删除事件；（IE8及之前版本只支持事件冒泡）

　　　　接收两个参数，要处理的事件名、作为事件处理程序的函数；

　　　　注意：IE事件处理程序的事件名要有on.

　　5.跨浏览器的事件处理程序。

　　　　封装在一个对象里，这个对象包括两个方法，分别是添加和删除事件。

var eventUtil = {
        addEvent: function(element, type, func){
                if(element.addEventListener){
                        element.addEventListener(type, func, false);
                }
                else if(element.attachEvent){
                        element.attachEvent('on'+type, func);
                }
                else{
                        element['on'+type] = func;
                }
        },
        removeEvent: function(element, type, func){
                if(element.removeEventListener){
                        element.removeEventListener(type, func, false);
                }
                else if(element.detachEvent){
                        element.detachEvent('on'+type, func);
                }
                else{
                        element['on'+type] = null;
                }
        }
}
//使用示例
eventUtil.addEvent(btn, click, showMessage);

三、事件对象（Event）

　　1、DOM中的事件对象

　　　　type 属性   获取事件类型      (event.type)

　　　　target 属性   获取事件的作用目标     (event.target        event.target.nodeName)

　　　　stopPropagation() 方法    用于阻止事件冒泡（写在函数里，传递event参数进去，然后event.stopPropagation();）

　　　　preventDefault() 方法    阻止事件的默认行为（例如，阻止<a>标签的跳转）

　　2、IE中的事件对象

　　　　type 属性    用于获取事件类型

　　　　srcElement 属性    用于获取事件的目标

　　　　cancelBubble 属性    用于阻止事件冒泡（设置为true表示阻止冒泡）

　　　　returnValue 属性    用于阻止事件的默认行为（设置为false表示阻止事件的默认行为）