浏览器事件模型：
- DOM 0级事件模型
- DOM 2级事件模型
DOM 0级事件模型：
- <input type="button" onclick="doSomething()" />
- input.onclick=function(){...}
- event =event||window.event;兼容性问题
- var target=event.target||event.srcElement;
<!--DOM 0级事件模型,只能添加一个处理函数，后面添加的就会把前面的覆盖-->
<p id="example" onclick="console.log('Click')">
</p>
<script>
document.getElementById('example').onclick=function(event){
console.log('click me')
}
</script>事件冒泡：当我们点击最内层的元素时，四个事件的处理函数都被执行了。事件模型会依次检查父元素，一层一层往上检查，看看有没有事件处理函数。有的话事件处理函数会依次触发。从子元素一直触发到父元素。
</p>
<div id="p1">
<div id="p1-1">
<div id="p1-1-1">
<div id="p1-1-1-1">
<p>
DOM 0级事件模型,只能添加一个处理函数，后面添加的就会把前面的覆盖DOM 0级事件模型,只能添加一个处理函数，后面添加的就会把前面的覆盖DOM 0级事件模型,只能添加一个处理函数，后面添加的就会把前面的覆盖DOM 0级事件模型,只能添加一个处理函数，后面添加的就会把前面的覆盖DOM 0级事件模型,只能添加一个处理函数，后面添加的就会把前面的覆盖
</p>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script>
document.getElementById('p1').onclick=function(event){
console.log('click p1')
}
document.getElementById('p1-1').onclick=function(event){
console.log('click p1-1')
}
document.getElementById('p1-1-1').onclick=function(event){
console.log('click p1-1-1')
}
document.getElementById('p1-1-1-1').onclick=function(event){
console.log('click p1-1-1-1')
}
</script>阻止事件冒泡：
<script>
document.getElementById('p1').onclick=function(event){
console.log('click p1')
}
document.getElementById('p1-1').onclick=function(event){
console.log('click p1-1')
}
document.getElementById('p1-1-1').onclick=function(event){
console.log('click p1-1-1')
}
document.getElementById('p1-1-1-1').onclick=function(event){
/*event.stopPropagation();*/
event.cancelBubble=true;
console.log('click p1-1-1-1')
}
</script>
DOM 0级事件模型最大的缺陷就是只支持一个DOM事件处理函数。
DOM 2级事件模型改进了DOM 0级事件模型的缺陷。
- addEventListener(eventType,listener,useCapture)注册事件处理函数。eventType事件类型，减去了onXXX().
- attachEvent(eventName,handler) ie9以前的浏览器没有完全支持DOM 2级事件模型有自己机制。
//三个事件处理函数都执行了，而且是依次执行。不会互相覆盖。DOM 2级事件模型比0好的地方。
<!--DOM 0级事件模型,只能添加一个处理函数，后面添加的就会把前面的覆盖-->
<p id="example">
DOM 0级事件模型,只能添加一个处理函数，后面添加的就会把前面的覆盖DOM 0级事件模型,只能添加一个处理函数，
</p>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script>
var element=document.getElementById('example');
element.addEventListener('click',function(event){
console.log('Click');
},false);
element.addEventListener('click',function(event){
console.log('Click2');
},false);
element.addEventListener('click',function(event){
console.log('Click3');
},false);
</script>
<!--DOM 0级事件模型,只能添加一个处理函数，后面添加的就会把前面的覆盖-->
<p id="example">
DOM 0级事件模型,只能添加一个处理函数，后面添加的就会把前面的覆盖DOM 0级事件模型,只能添加一个处理函数， DOM 0级事件模型,只能添加一个处理函数，后面添加的就会把前面的覆盖DOM 0级事件模型,只能添加一个处理函数， DOM 0级事件模型,只能添加一个处理函数，后面添加的就会把前面的覆盖DOM 0级事件模型,只能添加一个处理函数，
</p>
<div id="p1">
<div id="p1-1">
<div id="p1-1-1">
<div id="p1-1-1-1">
<p>
DOM 0级事件模型,只能添加一个处理函数，后面添加的就会把前面的覆盖DOM 0级事件模型,只能添加一个处理函数，后面添加的就会把前面的覆盖DOM 0级事件模型,只能添加一个处理函数，后面添加的就会把前面的覆盖DOM 0级事件模型,只能添加一个处理函数，后面添加的就会把前面的覆盖DOM 0级事件模型,只能添加一个处理函数，后面添加的就会把前面的覆盖
</p>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script>
//false只执行冒泡的过程，没有执行捕获的过程。所以从子元素依次往上。一直到祖先元素。
document.getElementById('p1').addEventListener('click',function(event){
console.log('Click p1');
},false);
document.getElementById('p1-1').addEventListener('click',function(event){
console.log('Click p1-1');
},false);
document.getElementById('p1-1-1').addEventListener('click',function(event){
console.log('Click p1-1-1');
},false);
document.getElementById('p1-1-1-1').addEventListener('click',function(event){
console.log('Click p1-1-1-1');
},false);
</script>
<script>
//true成为事件捕获的过程而不是事件冒泡。
document.getElementById('p1').addEventListener('click',function(event){
console.log('Click p1');
},true);
document.getElementById('p1-1').addEventListener('click',function(event){
console.log('Click p1-1');
},true);
document.getElementById('p1-1-1').addEventListener('click',function(event){
console.log('Click p1-1-1');
},true);
document.getElementById('p1-1-1-1').addEventListener('click',function(event){
console.log('Click p1-1-1-1');
},true);
</script>
如果我们即想实现捕获又想实现冒泡：
<script>
document.getElementById('p1').addEventListener('click',function(event){
console.log('Click p1');
},false);
document.getElementById('p1-1').addEventListener('click',function(event){
console.log('Click p1-1');
},false);
document.getElementById('p1-1-1').addEventListener('click',function(event){
console.log('Click p1-1-1');
},false);
document.getElementById('p1-1-1-1').addEventListener('click',function(event){
console.log('Click p1-1-1-1');
},false);
document.getElementById('p1').addEventListener('click',function(event){
console.log('Click p1');
},true);
document.getElementById('p1-1').addEventListener('click',function(event){
console.log('Click p1-1');
},true);
document.getElementById('p1-1-1').addEventListener('click',function(event){
console.log('Click p1-1-1');
},true);
document.getElementById('p1-1-1-1').addEventListener('click',function(event){
console.log('Click p1-1-1-1');
},true);
</script>
扫描二维码关注公众号，回复：
3005175 查看本文章
老的浏览器只支持冒泡不支持捕获。attachEvent(eventName,handler) 。
//兼容性问题
removeEvent:function(element,type,callback){
if(typeof removeEventListener !=='undefined'){
element.removeEventListener(type,callback,false);
}else if(typeof DetachEvent !=='undefined'){
element.detachEvent('on'+type,callback);
}else{
element['on'+type]=null;
}
}