1.两种事件流

早期浏览器ie采用冒泡事件流，而Netscape采用事件捕获流。现代浏览器都支持这两种事件流。
冒泡事件流，从触发事件的html元素向上冒泡到Document
捕获流，从Document到触发事件的html元素。

2.Dom0级事件处理程序

var btn = document.getElementById('Btn')  
btn.onclick = function () {  
    alert('Click');
    // 移除事件，btn.onclick = null;
}  

3.Dom2级事件处理程序

处理指定事件程序：addEventListener()
删除事件处理程序：removeEventListener()
都接受三个参数：处理的事件名，作为事件处理程序，布尔值，最后一个参数若是true，表示捕获阶段调用事件处理程序；如果是false，表示冒泡阶段调用事件处理程序。

var btn = document.getElementById('btn')  
btn.addEventListener("click", function(){  
    alert('dddd')  
}, false)  

要移除事件，必须向removeEventListener()传入同addEventListener时完全一样的参数。
以下代码无用:

var btn = document.getElementById('btn')  
btn.addEventListener("click", function(){  
    alert(this.id)  
}, false)  
btn.removeEventListener("click", function(){  
    alert(this.id)  
},false)  

因为第二个参数，不是完全相同的
将第二个参数改为以下传入：

handle = function () {  
    alert(this.id)  
}  

浏览器支持：IE，Firefox，Safari，Chrome和Opera支持DOM2级事件处理程序。

4.IE事件处理

IE有两个类似的事件处理程序：attachEvent()和detachEvent().接受两个参数：事件处理程序名称和事件处理处理程序。

var btn = document.getElementById("btn")  
btn.attachEvent("onclick", function(){  
    alert("click")  
})  

detachEvent()事件与removeEventListener()事件类似，移除最好是将相同的函数引用单独拿出来。
支持IE事件的浏览器为：IE和Opera

兼容浏览器

因为冒泡模式大部分主流浏览器都是支持的，因此检测冒泡即可。编写EventUtil方法：

var EventUtil = {  
    addHandler: function (element, type, handler) {  
        if (element.addEventListener){  
            element.addEventistener(type, handler, false)  
        } else if (element.attachEvent) { // IE  
            element.attachEvent("on" + type, handler)  
        } else {  
            element["on" + type] = handler  
        }  
    },  
    removeHandler: function (element, type, handler) {  
        if (element.removeEventListener) { // IE9以上，Firefox等  
            element.removeEventListener()  
        } else if (element.detachEvent) { // IE9以下的部分版本  
            element.detachEvent("on" + type, handler)  
        } else {  
            element["on" + type] = null  
        }  
    }  
}  

5.事件对象

在触发Dom的某个事件时，会产生一个event，这个对象包含所有与事件有关的信息
举一个vue的例子

<div @click=handleClick(event)>ok</div>  
<script>  
    handleClick (event) {  
    console.log(e.target) // ok  
}  
</script>  

event中的属性

属性	描述
bubbles	返回布尔值，指示事件是否是起泡事件类型。
cancelable	返回布尔值，指示事件是否可拥可取消的默认动作。
currentTarget	返回其事件监听器触发该事件的元素。
eventPhase	返回事件传播的当前阶段。
target	返回触发此事件的元素（事件的目标节点）。
type	返回当前 Event 对象表示的事件的名称。
点击查看更多属性

在事件处理程序内部，对象this始终等于currentTarget的值，而target则只包含事件的实际目标。如果直接将事件处理程序指定给目标元素，则this，currentTarget和target包含相同的值。
要阻止特定事件的默认行为，可以使用preventDefault()方法。如a标签有一个点击跳转的行为，使用该方法可以取消行为。

var link = document.getElementById("myLink")  
link.onclick = function (event) {  
    event.preventDefault() // 取消行为  
}  

只有在cancelable属性设置为true时，才可以使用preventDefault()取消其默认行为。
stopPropagation()方法用于立即停止事件在DOM层次中的传播，即取消进一步的事件捕获或冒泡。如以下例子：

var btn = document.getElementById('Btn')  
btn.onclick = function (event) {  
    alert('click-0')  
    stopPropagation()  
}  
var btn2 = document.getElementById('Btn')  
btn2.onclick = function (event) {  
    alert('click-1')  
}  

btn1执行后，btn2就不会执行。
♠只有在事件处理程序执行期间，event对象才会存在，一旦程序执行完毕，event对象就会销毁

6.IE中的事件对象

访问IE中的event对象有几种方式，取决于指定事件处理程序的方法

var btn = document.getElementById('btn')  
btn.onclick = function () {  
    var event = window.event  
    alert(event.type)  
}  

如果事件处理程序使用attachEvent()添加，event会被作为参数传入事件处理程序。

var btn = document.getElementById('btn')  
btn.attachEvent("onclick", function (event) {  
    alert(event.type)  
})  

ie的event对象包含下表属性和方法

| 属性/方法 | 类型 | 读/写 | 说明 |
| ------------ | ------------ |
| cancelBubble | Boolean | 读/写 | 默认值false，但将其置为true就可以取消事件冒泡(与Dom中的stopPropagation()方法作用相同) |
| returnValue | Boolean | 读/写 | 默认值true，但将其置为false就可以取消事件的默认行为(与DOM中的preventDefault()方法作用相同) |
| srcElement | Element | 只读 | 事件目标(与target作用相同) |
| type | String |只读 |被触发的事件类型|

因为事件处理程序的作用域是根据指定它的方式来确定，所以不能认为this会始终等于事件目标。

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