JS事件流分析及兼容浏览器使用

最近遇到了浏览器兼容的问题。就梳理了一下JS的事件流的问题。

首先给一个小的Demo, Demo的后面是原理分析。
例：给按钮btn1 添加/移除 点击事件

<input type="Button" id="btn1">

JS部分

function showMessage(){
    alert("hello world");
};
var btn1 = document.getElementById("btn1");
var eleUtil = {
    //添加事件处理
    eventAdd: function()(element, event, function){
        if(element.addEventListener){
            element.addEventListener(event, function, false);
        }else if(element.attachEvent){
            element.attachEvent('on'+event, function);
        }else{
            element['on'+event] = function;
        }
    }
    //移除事件处理
    eventRemove: function()(element, event, function){
        if(element.removeEventListener){
            element.removeEventListener(event, function, false);
        }else if(element.detachEvent){
            element.detachEvent('on'+event, function);
        }else{
            element['on'+event] = null;
        }
    }
}

//添加事件
eleUtil.eventAdd(btn1, 'click', showMessage);
//删除事件
eleUtil.eventRemove(btn1, 'click', showMessage);

事件流分为事件冒泡流和事件捕获流。其中事件捕获流是由natScape浏览器独自开发的一种事件流结构，后来也被火狐、chrome、IE9及以上等主流浏览器支持。而支持事件冒泡流结构的浏览器则涵盖了当下基本所有的浏览器，包括IE8及以前版本。
给某个Dom对象(比如某个按钮等)添加事件处理程序的方法主要分为三种：HTML事件处理程序、Dom0级事件处理程序和Dom2级处理程序。各个版本的浏览器对这三种写法的支持程度是不同的。其中Dom0级事件处理程序被支持度最为广泛，涵盖了IE系列浏览器。
这三种方法的主要写法和示例如下(以点击事件为例)：
1.HTML事件处理程序

首先body中的Dom对象中直接添加onclick方法

<input type="button" id="btn1" onclick="showMessage()">

然后再js文件或者js代码段内添加事件处理程序定义

function showMessage(){

    alert("hello world");

}

2.Dom0级事件处理程序

假设要给btn2按钮添加点击事件处理程序

<input type="button" id="btn2">

在js代码区添加事件处理程序和绑定关系

var btn2 = document.getElementById("btn2");

btn2.onclick = function showMessage(){

    alert("hello world");

}

如果要移除该点击事件处理程序

btn2.onclick = null;

3.Dom2级事件处理程序

body中的按钮对象为btn3

<input type="button" id="btn3">

js区添加事件处理程序和绑定关系

function showMessage(){

    alert("hello world");

}

(1)在IE8及以下中的写法, IE9、IE10也支持，IE11不再支持

var btn3 = document.getElementById("btn3");

btn3.attachEvent("onclick", showMessage)；

btn3.detachEvent("onclick", showMessage);

(2)在Chrome浏览器中的写法，IE9及以上版本也支持

btn3.addEventListener("click", showMessage, false);
btn3.removeEventListener("click", showMessage, false);

注意：
1.这里的第一个参数和IE8浏览器第一参数的区别，方式1中为“onclick”, 方式2中为“click”。方式2中需要将我们平常习惯的事件处理方法名前面的 ‘on’去掉。
2.方式2中的第三个参数，true标示事件捕获流，false标示事件冒泡流。

按照惯例，附上参考文献供大家学习使用。
http://www.imooc.com/video/2138