DOM事件流

DOM事件流：

1.事件捕获阶段
2.处于目标阶段
3.事件冒泡阶段
事件捕获
当事件发生时，首先发生的是事件捕获，为父元素截获事件提供了机会

window.addEventListener('click', function() {
  console.log('4. You click window');
}, true);

处于目标与事件冒泡阶段
事件到了具体元素时，在具体元素上发生，并且被看成冒泡阶段的一部分。随后，冒泡阶段发生，事件开始冒泡。

考试必备题：

防止冒泡和捕获
w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true
stopPropagation也是时间对象（Event）的一个方法，作用是阻止目标元素的冒泡事件，但是会不阻止默认行为
什么是冒泡事件？如在一个按钮是绑定一个”click”事件，那么”click”事件会依次在它的父级元素中被触发 。stopPropagation就是阻止目标元素的事件冒泡到父级元素。
未阻止事件冒泡：

<div id='div' onclick='clickDiv()'>
	<ul onclick='clickUl()'>
		<li onclick='clickLi()'>test</li>
	</ul>
</div>
<script type="text/javascript">
 function clickDiv(){
	alert("div");
}
function clickUl(){
	alert("ul");
}
function clickLi(){
	alert("li");
}
</script>

阻止事件冒泡：
未阻止事件冒泡行为时会弹3下，如果加上以下这段话，可以阻止事件冒泡

<script type="text/javascript">
 function clickDiv(){
 	//阻止事件冒泡
 	window.event? window.event.cancelBubble = true : e.stopPropagation();
	alert("div");
}
</script>

取消事件默认行为
event.preventDefault()方法是用于取消事件的默认行为，但此方法并不被ie支持，在ie下需要用window.event.returnValue = false; 来实现。

    function stopDefault( e ) {     
    	if ( e && e.preventDefault ){     
    		e.preventDefault();
         } else {     
          	window.event.returnValue = false;
         }  
    }

可以处理ie firefox下图片拖动的问题。

    document.onmousemove=function(ev){
    　var oEvent=ev||event;
    　if(oEvent.preventDefault){
    　	oEvent.preventDefault();
    　}else{
    　	oEvent.returnValue=false;
    　}
    }