快捷導(dǎo)航

深入理解JS DOM事件機(jī)制

更新時(shí)間：2016年08月06日 09:48:40 投稿：jingxian

下面小編就為大家?guī)硪黄钊肜斫釰S DOM事件機(jī)制。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

1、事件流

html 元素觸發(fā)事件的順序。

2、事件冒泡IE的事件流叫做事件冒泡(event bubbling)，即事件開始時(shí)由最具體的元素（文檔中嵌套層次最深的那個(gè)節(jié)點(diǎn)）接收，然后逐級向上傳播到較為不具體的節(jié)點(diǎn)（文檔）。3、事件捕獲事件捕獲的思想是不太具體的節(jié)點(diǎn)應(yīng)該更早的接收到事件，而最具體的節(jié)點(diǎn)應(yīng)該在最后接收到節(jié)點(diǎn)。事件捕獲的用意在于事件到達(dá)預(yù)定目標(biāo)之前捕獲它。

DOM事件流
“DOM2級事件流”規(guī)定的事件流包括三個(gè)階段：事件捕獲階段、處于目標(biāo)階段和冒泡階段。首先發(fā)生的是事件捕獲，為截獲事件提供了機(jī)會。然后是實(shí)際的目標(biāo)接收到事件。最后一個(gè)階段是冒泡階段，可以在這個(gè)階段對事件作出響應(yīng)。以簡單的HTML頁面為例，單擊<div>元素會按照下圖順序觸發(fā)事件。

在DOM事件流中，實(shí)際的目標(biāo)（<div>元素）在捕獲階段不會接收到事件。這意味著在捕獲階段，事件從document到<html>再到<body>后就停止了。下一個(gè)階段是“處于目標(biāo)”階段，于是事件在<div>上發(fā)生，并在事件處理中被看成冒泡階段的一部分。然后冒泡階段發(fā)生，事件又傳播回文檔。
多數(shù)支持DOM事件流的瀏覽器都實(shí)現(xiàn)了一種特定行為；即使“DOM2級事件”規(guī)范明確要求捕獲階段不會涉及事件的目標(biāo)，但Safari、Chrome、Firefox和Opera9.5及更高版本都會在捕獲階段觸發(fā)事件對象上的事件。結(jié)果，就是有兩個(gè)機(jī)會在目標(biāo)對象上面操作事件。

阻止事件冒泡

實(shí)驗(yàn)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<script type="text/javascript">
		function onBtn() {
			alert('button');
			//cancelBubble(); 阻止事件冒泡
		}
		//獲取事件對象
		function getEvent(){
			//如果為ie或chrome
			if(window.event){return window.event;}

			//針對firefox
			func = getEvent.caller; //獲取函數(shù)調(diào)用者
			while(func != null){
				var arg0 = func.arguments[0]; //獲取調(diào)用者第一個(gè)參數(shù)
				//判斷參數(shù)是否為空
				if(arg0){
					//判斷arg0是否為事件對象
				  if((arg0.constructor == Event || arg0.constructor == MouseEvent
				    || arg0.constructor == KeyboardEvent)
				    ||(typeof(arg0) == "object" && arg0.preventDefault
				    && arg0.stopPropagation)){
				     return arg0;
				   }
				}
				//獲取func調(diào)用者
				func = func.caller;
			}
			return null;
		}
		//阻止事件冒泡
		function cancelBubble() {
			event = getEvent();
			 // Firefox chrome
		  if(event.preventDefault) {  
		   
		    event.preventDefault();  
		    event.stopPropagation(); 

		   } else { 
		   	//ie 
		    event.cancelBubble=true;  
		    event.returnValue = false;
		   }  
		}
	</script>
</head>
<body onclick="alert('body')">
	<div onclick="alert('div');" style="background-color:green">
		<button onclick="onBtn()">dsd</button>
	</div>
</body>
</html>

上面的html代碼執(zhí)行的事件觸發(fā)順序。

默認(rèn)情況：依次會彈出 'button' ---》彈出'div' -----》彈出'body'

如果加上cancelBubble()代碼：只會彈出'button'

以上這篇深入理解JS DOM事件機(jī)制就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: