mj之-DOM事件流的三个阶段

DOM事件流的三个阶段

事件发生时会在元素节点之间按照特定的顺序进行传播，这个传播过程就是DOM的事件流。W3C制定的事件模型中，一次事件的发生分为三阶段：
1.捕获阶段：当元素触发某个事件如onclick时，顶层对象document就会发出一个事件流，随着DOM树的节点向目标元素节点流去，直到目标元素，在这个过程中，事件相应的监听函数不会被触发。
2.目标阶段：当到达目标元素后，如果给目标元素绑定了监听函数那就执行，否则不执行。
3.冒泡阶段：从目标元素往顶层元素对象document传播，途中如果有节点绑定了相应的事件处理函数，这些函数会被一次性触发。即如果绑定一个事件，那么这个时间就会依次在它的父级元素中被触发。
注意：所有的事件类型都会经历事件捕获但是只有部分事件会经历事件冒泡，如submit

阻止事件传播：

阻止冒泡事件：
在W3C中，用e.stopPropagation()来阻止，在IE中使用e.cancelBubble=true。它们只阻止事件的冒泡，不会阻止事件的默认行为。

这里要注意一个事：
var e=event || window.event;//这句话是为了兼容。在ie下，事件对象是全局的，作为window的一个属性，event在其他浏览器中作为方法的第一个参数传入。
包括这代码也是为了兼容：

//window.event?window.event.cancelBubble=true:e.stopPropagation();
function stopb(e){
	if(e&&e.stopPropagation){
	//非IE浏览器
		e.stopPropagation();
	}else{
		//IE浏览器
		window.envet.cancelBubble=true;
	}
}

阻止默认事件：
在W3C中，用e.preventDefault()来阻止，在IE中使用e.returnValue=false。

a.onclick=function(e){
//同样是兼容性
	if(e&&e.preventDefault){
		e.preventDefault();
	}
	else{
		window.event.returnValue=false;//event代表事件的状态，如触发其对象元素，鼠标键盘位置、状态等。它只有在事件发生过程中才有效。
	}
}

return false在js中只阻止默认行为，在jquery里既阻止默认行为又阻止冒泡。
IE浏览器和opeta中全局变量是window.event,firefox中是event,事件对象在ie中是window.event.srcElement,firefox中是event.target。opeta两者皆可。