事件流描述的是从页面中接收事件的顺序。
html事件
<script>
function showMsg(){
console.log(this)//window
alert('type:'+event.type)
}
</script>
<input type="button" onclick="showMsg()">
<input type="button" onclick="console.log(this)">
会创建一个封装这元素属性值的函数，函数中有一个局部变量交event。此时的this值等于事件的目标元素。
缺点：
1.如果函数在按钮的下方，用户再html元素一出现就点击按钮，如果事件尚未加载完成，会导致报错
2.html与js代码紧密耦合
DOM0级事件
var btn=document.getElementById('myBtn')
btn.onclick=function(){
console.log(this.id) //myBtn
}
this指向当前元素
btn.onclick=null //删除事件处理程序
DOM0级只能添加一个事件处理程序，后添加的会覆盖前面添加的。
DOM2级事件
DOM2级事件（IE8及更早的不支持）规定的事件包括三个阶段：事件捕获阶段、处于目标阶段、冒泡阶段。
DOM2级事件定义了两个方法,addEventListener()、removeEventListener()。3个参数：事件名、事件处理函数、布尔值（是否在捕获阶段调用事件处理函数）
var btn=document.getElementById('myBtn')
btn.addEventListener('click',function(){
console.log(this.id)//myBtn
},false)
使用DOM2级方法可以添加多个事件处理程序，并且按照添加他们的顺序触发。(jquery添加多个事件也是如此)。
要移除事件只能使用removeEventListener，移除时传入的参数要和添加时传入的参数相同，也就是说不能使用匿名函数。
IE9、Firefox、Safari、Chrome、Opera都支持DOM2级事件处理程序。
IE事件
IE实现了与DOM中类似的两个方法，attachEvent、detachEvent。接收两个参数，事件名、事件处理函数。由于Ie8及更早的版本只支持事件冒泡。所以attachEvent添加的事件都会被添加到冒泡阶段。
var btn=document.getElementById('myBtn')
btn.attachEvent("onclick",function(){
console.log(this)//window
})
注意，attachEvent的第一个参数是onclick，并且事件处理程序中的this指向window。attachEvent也可以为一个元素添加多个事件处理程序，不过触发的顺序和DOM2相反，最后添加的先触发。可以通过detachEvent删除事件。
IE、Opera支持IE事件处理程序
跨浏览器的事件处理程序
事件对象
在触发DOM上的事件时，会产生一个事件对象Event，这个对象包含事件的元素、事件的类型、以及其与他特定事件相关的信息，比如鼠标操作导致的事件对象中，包含鼠标的位置信息。
事件处理程序中，无论使用什么方法（DOM0级、DOM2级）都会传入event对象。在通过html特性指定事件处理程序是，变量event中保存event对象。
<input type="button" onclick="alert(event.type)" value="btn">
event对象都会有以下成员
currentTarget :事件处理程序所注册的元素
target ： 触发事件的元素
type ：事件类型
preventDefault()：取消事件的默认行为
stopPropagation()：取消事件的进一步捕获或冒泡
stopImmediatePropagation()：取消事件的进一步捕获或冒泡，同时阻止任何事件处理程序被调用（DOM3级事件中新增）
IE中的事件对象
cancelBubble：默认值为false，将其设置为true就可以取消事件冒泡（与DOM中的stopPropagation作用相同）
returnValue ：默认true，设置为false取消事件的默认行为（同DOM中preventDefault作用相同）
srcElement ： 触发事件的元素（与DOM中的target一样）
网友评论