从IE9开始已经支持事件捕获了。

删除通过DOM0级方法指定的事件处理程序，只要将事件处理程序的属性值设置为null即可。btn.οnclick=null;

attachEvent的事件名称是onclick，而addEventListener的事件名称是click

var btn = document.getElementById("btn");        btn.onclick = function () {            alert(this.id);        }                btn.addEventListener('click', function (e) {            alert("我是来测试chrome的");        }, false);        btn.attachEvent('onclick', function (e) {            alert("我是来测试ie的");        });

上述代码在ie9下居然三个alert都弹出来了，也就是说其实从ie9开始已经走的事件捕获模式了，趋向于dom标准，但是又没有完全废弃自己原先的一套规则，所以两种事件监听它都支持。

var btn = document.getElementById("btn");             btn.attachEvent('onclick', function (e) {            alert("1");        });        btn.attachEvent('onclick', function (e) {            alert("2");        });

上述代码在ie8及以下浏览器，弹出alert框的顺序为2,1,但在ie9下弹出alert框的顺序为1,2

var btn = document.getElementById("btn");         btn.addEventListener("click",function(e){            alert(1);        });        btn.addEventListener("click",function(e){            alert(2);        });

事实上DOM2级标准就是按照添加事件的顺序注册的，也就是说在firefox、chrome等浏览器下，弹出alert框的顺序是1,2

在ie下，事件处理程序是在全局作用域下运行的，所以事件处理程序中的this其实就是window（基于上面的经验，ie9开始趋向于DOM标准，我又特意做了测试，结果alert的也是true,我有点晕）

var btn = document.getElementById("btn");         btn.attachEvent('onclick', function (e) {            alert(this===window);   //true        });

在chrome等浏览器下，this指向的是当前对象

var btn = document.getElementById("btn");                btn.addEventListener("click",function(e){            alert(this===btn);    //true                });

在dom0级别的事件绑定中，ie8及以下浏览器中e输出的为undefined,而chrome下的e输出的对象跟dom2级别中的e完全一样

var btn = document.getElementById("btn");        btn.onclick = function (e) {            console.log(e);//此处在ie8及以下输出的是undefined而在ie9下输出的是object MouseEvent        }        btn.attachEvent('onclick', function (e) {            console.log(e);//在ie7下输出的是object，在ie8及以下输出的是object Event，而在ie9下输出的是object MSEventObj        });

var btn = document.getElementById("btn");        btn.onclick = function (e) {            console.log(e);//在chrome下，此处的e和下面的e输出的都是MouseEvent        }                btn.addEventListener("click", function (e) {            console.log(e);        });

看一下chome下输出的e是啥吧

说说这里面有哪些重要的属性/方法吧

bubbles-->Boolean-->事件是否冒泡

cancelable-->Boolean-->是否可以取消事件的默认行为

currentTarget-->Boolean-->事件处理程序当前正在处理事件的那个元素

defaultPrevented-->Boolean-->为true 表示已经调用了preventDefault()

detail-->Integer-->与事件相关的细节信息

eventPhase-->Integer-->调用事件处理程序的阶段：1表示捕获阶段，2表示“处于目标”，3表示冒泡阶段

preventDefault()-->Function-->取消事件的默认行为。如果cancelable是true，则可以使用这个方法

stopImmediatePropagation()-->Function-->取消事件的进一步捕获或冒泡，同时阻止任何事件处理程序被调用

stopPropagation()-->Function-->取消事件的进一步捕获或冒泡。如果bubbles为true，则可以使用这个方法

target-->Element-->事件的目标

type-->String-->被触发的事件的类型

其实我自己也没有搞清楚stopImmediatePropagation和stopPropagation的区别，太多方法

需要理解currentTarget和target的区别及联系，在事件处理程序内部，this始终等于currentTarget值，即currentTarget是指当前被触发或者说正在处理事件的那个元素，而target是指当前的目标元素；看看代码具体解释一下：`

var btn = document.getElementById("btn");    btn.onclick = function (e) {        console.log(e.currentTarget == this); // true        console.log(e.target == this);  // true    }`

对btn按钮触发点击事件，那么e.currentTraget指向了this，e.target也指向了this

而如果是对body绑定事件处理程序，那么e.currentTarget就指向了document.body了，那么e.target 指向与 btn那个元素

document.body.onclick = function(e){    console.log(e.currentTarget === document.body); // true    console.log(document.body === this);  // true    console.log(e.target === document.getElementById("btn")); //true};

由于ie下事件处理程序的作用域是在全局使用域下，所以它的event对象也是通过window.event来

一般最简化的跨浏览器的事件通用js如下：

var EventUtil = {    addHandler: function(element,type,handler) {        if(element.addEventListener) {            element.addEventListener(type,handler,false);        }else if(element.attachEvent) {            element.attachEvent("on"+type,handler);        }else {            element["on" +type] = handler;        }    },    removeHandler: 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;        }    },    getEvent: function(event) {        return event ? event : window.event;    },    getTarget: function(event) {        return event.target || event.srcElement;    },    preventDefault: function(event){        if(event.preventDefault) {            event.preventDefault();        }else {            event.returnValue = false;        }    },    stopPropagation: function(event) {        if(event.stopPropagation) {            event.stopPropagation();        }else {            event.cancelBubble = true;        }    },    getRelatedTarget: function(event){        if (event.relatedTarget){            return event.relatedTarget;        } else if (event.toElement){            return event.toElement;        } else if (event.fromElement){            return event.fromElement;        } else {            return null;        }    },    getWheelDelta: function(event) {        if(event.wheelDelta) {            return event.wheelDelta;        }else {            return -event.detail * 40        }    },    getCharCode: function(event) {        if(typeof event.charCode == 'number') {            return event.charCode;        }else {            return event.keyCode;        }    }};

哪些事件不能冒泡：在我知晓的范围内有focus、blur、unload、load、mouseEnter、mouseLeave