JavaScript-事件模型

这次主要是向大家介绍一下浏览器的事件模型，主要分为两类：DOM第0级事件模型和DOM第2级事件模型。

DOM第0级事件模型：在特定的DOM元素上的任何一个事件类型都只能有一个监听器；

DOM第2级事件模型：一个事件类型可以有多个监听器

代码如下：

1、DOM第0级事件模型

1> 第一种方式

<div id="div1" onclick="test"></div>//直接将事件绑定在元素标签上,test函数为自定义函数
<script>
window.onload = function(){
function test(){
console.log("test");
}
}
</script>

2> 第二种方式

使用这种方式给同一个DOM元素绑定多个函数处理器时，后边的将会覆盖前边的函数处理器，最终的输出结果就是最后一个函数处理器所要输出的结果。

<script>
window.onload = function(){
var divObj = document.getElementById("div1");
divObj.onclick = function(){
console.log(1);
}
divObj.onclick = function(){
console.log(2);
}
}
</script>

2、DOM第2级事件模型

标准的DOM第2级事件模型

addEventListener

方法只支持标准的浏览器：Firefox、Chrome、Opera等，为了兼容IE浏览器，需要使用IE浏览器的

attachEvent

方法来实现

代码如下：

使用这种方式绑定事件时，不论有几个函数处理器，都可以正常执行

<script>
window.onload = function(){
var obj = document.getElementById("div");
if(obj.addEventListener){
div.addEventListener("click",function(){
console.log(1);
},true)
div.addEventListener("click",function(){
console.log(2);
},false)
}else if(obj.attachEvent){
div.attachEvent("onclick",function(){
console.log("IE");
})
}else{
div.onclick = function(){
console.log("DOM")
}
}

}
</script>