2. 程式人生 > >事件流（事件冒泡和捕獲，函式閉包等）

事件流（事件冒泡和捕獲，函式閉包等）

阿新 • • 發佈：2018-12-14

事件流

事件流描述的是從頁面中接受事件的順序，當幾個都具有事件的元素層疊在一起的時候，那麼你點選其中一個元素，並不是只有當前被點選的元素會觸發事件，而層疊在你點選範圍的所有元素都會觸發事件。

事件流包括兩種模式：冒泡和捕獲

事件捕獲：

父級元素先觸發，子集元素後觸發；（由外到內）

事件冒泡：

子集元素先觸發，父級元素後觸；（由內到外）

子集元素和父元素具備同樣的事件，當觸發子元素時，也會觸發父元素的事件。

事件冒泡和事件捕獲例項

<!DOCTYPE html>
<html>
	<head>
		<meta
 
 charset="UTF-8">
		<title>事件冒泡和事件捕獲</title>
		<style type="text/css">
			#bigDiv{
				width: 400px;
				height: 400px;
				border: 1px solid #000;
			}
			#innerDiv{
				width: 200px;
				height: 200px;
				border: 1px solid #AFEEEE;
			}
		</style>
		<script type="text/javascript">
 

			window.onload=function(){
				var bigDiv=document.getElementById('bigDiv');
				var innerDiv=document.getElementById('innerDiv');
				var arr=[bigDiv,innerDiv,document,document.body];
				for (var i=0;i<arr.length;i++) {
				//傳統方式
//					arr[i].onclick=function(){
//						console.log(this);
//					}
				//通過Dom的經典方式新增事件
 

//					addEventListener(引數1,引數2,引數3)
//					引數1表示的是事件的型別   click,load,mousedown,blur,focus
//					引數2表示的是事件的處理程式
//					引數3表示的是事件是否冒泡  true/false
				//表示的是事件的冒泡  設定值為false
					arr[i].addEventListener('click',show,false);
				//表示的是事件的捕獲  設定值為true
//					arr[i].addEventListener('click',show,true);
				}
				function show(){
					console.log(this);
				}
			}
		</script>
	</head>
	<body>
		<div id="bigDiv">
			<div id="innerDiv">
			</div>
		</div>
	</body>
</html>

通過Dom的經典方式新增事件

addEventListener(引數1,引數2,引數3)
引數1表示的是事件的型別 click,load,mousedown,blur,focus
引數2表示的是事件的處理程式
引數3表示的是事件是否冒泡 true/false

事件冒泡測試結果（由內到外）
在這裡插入圖片描述

事件捕獲測試結果（由外到內）
在這裡插入圖片描述

事件相容

(1)事件繫結

addEventListener 用於註冊事件處理程式，IE 中為 attachEvent。

addEventListener 是 DOM 中的標準內容

//語法結構
element.addEventListener(event, function, useCapture)
//通過Dom的經典方式新增事件
//		addEventListener(引數1,引數2,引數3)
//		引數1表示的是事件的型別   click,load,mousedown,blur,focus
//		引數2表示的是事件的處理程式
//		引數3表示的是事件是否冒泡  true/false
//		注意:不要使用 "on" 字首。 例如，使用 "click" ,而不是使用 "onclick"。
//		可以使用函式名，來引用外部函式

事件繫結例項一

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>事件繫結</title>
		<script type="text/javascript">
			window.onload=function(){
				var btn=document.getElementById('txt');
			//匿名函式
//				btn.addEventListener('click',function(){
//					alert('事件註冊了');
//				})
			//有名函式
				btn.addEventListener('click',show);
			//下面這個有名函式放在window裡面或外面都OK
				function show(){
					alert('事件註冊了');
				}
			}
		</script>
	</head>
	<body>
		<input type="button" id="txt" value="事件註冊（事件繫結）" />
	</body>
</html>

事件繫結例項二

通過 addEventListener（新增點選事件監聽器）形式的繫結事件不會互相抵消，從而實現一個按鈕控制多個事件

(2)事件移除

**removeEventListener（）**移除事件監聽器（不能使用匿名函式）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>事件繫結和移除</title>
		<script type="text/javascript">
			window.onload=function(){
			//獲取頁面元素button
				var	btn2=document.getElementById('btn2');
			//註冊事件處理程式	addEventListener()
				btn2.addEventListener('click',show);
			//移除事件監聽器		removeEventListener()
//				btn2.removeEventListener('click',show);
			//下面這個有名函式放在window裡面或外面都OK
				function show(){
					console.log('第一個事件');
					console.log('第二個事件');
				}
			}
		</script>
	</head>
	<body>
		<button id="btn2">按鈕2</button>
	</body>
</html>

上面程式碼事件繫結測試結果為：
在這裡插入圖片描述

(3)獲取事件物件

事件物件封裝了事件發生的詳細資訊，尤其是滑鼠、鍵盤事件。如滑鼠事件發生的位置、鍵盤事件的鍵盤鍵等。

IE 中的事件物件：IE 中的事件物件是一個隱式可用的全域性物件：event，它是 window物件的一個屬性。

標準 DOM 的事件物件：在標準 DOM 瀏覽器檢測發生了某個事件時，將自動建立一個 Event物件，並隱式地將該物件作為事件處理函式的第一個引數傳入

案例一：

返回事件目標的名稱 使用屬性tagName

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>事件物件</title>
		<script type="text/javascript">
			window.onload=function(){
				var btn=document.getElementById('btn');
				btn.ondblclick=Myheader;
				function Myheader(e){
					if(window.event){
						e=window.event;
					}
				//相容低版本的IE瀏覽器
				var MyIE;
				if(e.srcElement){
					MyIE=e.srcElement;
				}else{
					MyIE=e.target;
				}
			//返回事件目標的名稱	使用屬性tagName
				alert(MyIE.tagName);
				}
			}
			
		</script>
	</head>
	<body>
		<button id="btn">請雙擊我</button>
	</body>
</html>

​ 上面程式碼事件繫結測試結果為：
在這裡插入圖片描述

案例二（常用滑鼠事件物件）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>常用滑鼠事件物件</title>
		<style type="text/css">
			#leftDIV{
				width: 200px;
				height: 200px;
				background: pink;
				float: left;
			}
			#rightDIV{
				width: 200px;
				height: 200px;
				border: 1px solid #000;
				float: left;
				overflow: auto;
			}
		</style>
	</head>
	<body>
		<div id="leftDIV"></div>
		<div id="rightDIV"></div>
		<script type="text/javascript">
//			var MyMouse=document.getElementById('leftDIV');
			var MyMouse=document.getElementById('leftDIV');
			var txt=document.getElementById('rightDIV');
			MyMouse.onclick=Myheader;
			MyMouse.ondblclick=Myheader;
			MyMouse.onmouseleave=Myheader;
			MyMouse.onmousedown=Myheader;
			MyMouse.onmouseup=Myheader;
			function Myheader(OEvent){
				if(window.event){
					OEvent=window.event;
				}
				txt.innerHTML+=OEvent.type+'\n';
			}
		</script>
	</body>
</html>

上面程式碼事件繫結測試結果為：
在這裡插入圖片描述

(4)阻止冒泡

event.stopPropagation() 阻止事件冒泡的產生

阻止冒泡案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>阻止事件冒泡</title>
		<style>
			#bigDIV{
				width: 400px;
				height: 400px;
				border: 20px solid greenyellow;
				position: relative;
			}
			#innerDIV{
				width: 200px;
				height: 200px;
				border: 20px solid orangered;
				position: absolute;
				left: 80px;
				top: 80px;
			}
			#span{
				display: inline-block;
				background: pink;
				margin: 90px 9px;
			}
		</style>
	</head>
	<body>
		<div id="bigDIV">
			<div id="innerDIV">
				<span id="span">這裡是最裡面的span標籤</span>
			</div>
		</div>
		<script type="text/javascript">
			var bigDIV=document.getElementById('bigDIV');
			var innerDIV=document.getElementById('innerDIV');
			var span=document.getElementById('span');
		//有名函式
//			bigDIV.addEventListener('click',show,false);
//			innerDIV.addEventListener('click',show,false);
//			span.addEventListener('click',show,false);
//			function show(event){
//				alert(this);
//			//阻止事件冒泡的產生	event.stopPropagation()
//				event.stopPropagation();
//			}
		//匿名函式
			bigDIV.addEventListener('click',function(event){
				alert('你點選了最外面的div');
				event.stopPropagation();
			},false);
			innerDIV.addEventListener('click',function(event){
				alert('你點選了第二層的div');
				event.stopPropagation();
			},false);
			span.addEventListener('click',function(event){
				alert('你點選了最裡面的span標籤');
				event.stopPropagation();
			},false);
		</script>
	</body>
</html>

(5)阻止預設

w3c 的方法是 e.preventDefault()，

IE 則是使用 e.returnValue =false;

preventDefault 它是事件物件(Event)的一個方法，作用是取消一個目標元素的預設行為。比如超連結a

	<body>
		<a href="事件冒泡.html" target="_blank">啦啦啦啦啦</a>
		<script type="text/javascript">
			var a1=document.getElementsByTagName('a')[0];
		//傳統用法阻止事件的預設發生
//			a1.onclick=function(e){
//				e.preventDefault();
//			}
		//使用DOM方法來阻止預設發生
			a1.addEventListener('click',show);
		//相容
			function show(e){
				if (e.preventDefault) {
					e.preventDefault();
				} else{
					window.event.returnValue=false;
				}
			}
		</script>
	</body>

函式閉包

閉包是指有許可權訪問另一個函式作用域中的變數的函式。在 javascript 語言中，閉包就是函式和該函式作用域的組合。從這個概念上來講，在 js 中，所有函式都是閉包（函式都是物件並且函式都有和他們相關聯的作用域鏈 scope chain），但是巢狀的函式閉包作用會更大。

巢狀函式：

js中特殊的作用域鏈，父物件的所有變數對子物件都是可見的，反之則不成立。

閉包的應用（兩大作用）

①讀取函式內部的變數

②就是讓這些變數的值始終保持在記憶體中

案例一

		<script type="text/javascript">
		//閉包是指有許可權訪問另一個函式作用域中的變數的函式
		// 閉包就是函式和該函式作用域的組合
		//在js中，所有函式都是閉包（函式都是物件且函式都有他們相關聯的作用域鏈），但是巢狀的函式閉包作用會更大。
		//函式的巢狀：
			//js中特殊的作用域鏈:
			//父物件的所有變數,對子物件都是可見的，反之則不成立。
				function PiKaQiu(){
					var color='yellow';
					var weight=30;
					var height=20;
					function PiKaQiu_01(){
						alert(color);
					}
					PiKaQiu_01();
				}
				PiKaQiu();
				
			//使用return
				function cat(){
					var color='white';
					var height=20;
					var weight=50;
					function cat_01(){
						return color;
					}
					return cat_01();
				}
				alert(cat());
		</script>

案例二

		<script type="text/javascript">
			function cat(){
				var color='橘黃色';
				var height='又矮又胖';
				var weight='大肥貓';
				function cat_01(){
					return '這是一隻'+color+'的而且'+height+'的'+weight;
				}
				return cat_01();
			}
//			alert(cat());
			function Person(){
				alert(cat());
			}
			Person();
		//閉包函式的兩大作用：
			//1、可以讀取函式內部的變數
			//2、讓變數的值始終保持在記憶體中
		</script>

案例二程式碼測試結果為：
在這裡插入圖片描述

相關推薦

事件流（事件冒泡和捕獲，函式閉包等）

事件流 事件流描述的是從頁面中接受事件的順序，當幾個都具有事件的元素層疊在一起的時候，那麼你點選其中一個元素，並不是只有當前被點選的元素會觸發事件，而層疊在你點選範圍的所有元素都會觸發事件。 事件流包括兩種模式：冒泡和捕獲 事件捕獲： 父級元素先觸發，子集元素後觸發；（由外到

JavaScript——事件流（事件冒泡和事件捕獲）

1、事件流 當瀏覽器發展到第4代時，瀏覽器開發團隊遇到了一個問題：頁面中的哪個元素會擁有某個特定的事件？當你單擊某個按鈕時，顯然該單擊事件並不僅僅發生在按鈕上，它還發生在按鈕的所有祖先元素上，比如按鈕的容器元素，容器元素的父元素，甚至整個頁面document。但是，哪個元素

JS事件流（事件冒泡和事件捕獲）

事件流是描述從頁面接收事件的順序。但是有意思的是，IE和Netscape開發團隊提出了差不多完全相反的事件流概念。IE的事件流是事件冒泡流，而Netspace Communicator的事件流是事件捕獲流。 事件冒泡 IE的事件流叫做事件冒泡（event

事件流（事件冒泡、事件捕獲以及DOM事件流）

事件流：描述的是從頁面中接收事件的順序。 事件冒泡：IE的事件流叫做事件冒泡，即事件開始時由最具體的元素（文件中巢狀層次最深的那個節點）接收，然後逐級上傳播到較為不具體的節點（文件）。 示例程式碼： <!DOCTYPE html> <html> <

綜合對接流（圖片到位元組陣列，位元組陣列到檔案）

 跟檔案複製類似，把圖片檔案讀進去，以位元組陣列輸出來，在把位元組陣列都進寫出到檔案，完成圖片複製 package com.jianshun; import java.io.ByteArrayInputStream; import java.io.ByteArrayOut

Python使用技巧（環境，第三方庫包等）（持續更新）

一.使用freeze將python環境的安裝包備份 使用 pip free 可以將python所安裝的庫包生成一個第三方庫列表 requirements.txt檔案，下次程式碼部署或裝配環境可以很方便的使用： pip freeze > require

數字格式化轉成字串（保留兩位小數，前面補0等）

http://www.hangge.com/blog/cache/detail_699.html 1，下面是一個浮點型別的數字轉成String字串的例子 1 2 var f = 123.32342342 var s:String = "\(f)" 

ECharts 1.4.0 更新（新增多圖聯動，炫光特效等）

修改記錄 [+]新增 [-]刪除 [^]升級 [#]修復 【】重要 1.4.0（2014-04-02） 【+】 多圖聯動，try this »，support #248 » this » 【+】 標註（markPoint）、標線（markLine）炫光特效，try 百度遷徙（模擬） » 中國

Jquery全面控制文字框技巧大全！（獲取值和賦值、清空等）

$("#Text1").val("公交"); //賦值 $("#Text1").val(""); //清空 var mbt = $("#Text1").val(); // 獲取值 $(”#Tex

web介面之表格顯示的幾點功能（包括js修改樣式，ajax資料互動等）

實現功能：資料的套打功能 前期工作：已經將要套打的樣式按照固定位置，在HTML頁面完全固定好，將資料傳入就可以準確套打。 具體需求：將資料以excel檔案上傳，上傳成功先進行資料的展示，然後再存入資料庫中，接著進行資料的管理，包括：增刪改查以及列印。 所用技術：

事件流：事件冒泡和事件捕獲

top 選擇器 itl listener doc 三個參數 NPU 默認 捕獲 事件流：事件冒泡和事件捕獲 1. 兩者概念 事件捕獲指的是從document到觸發事件的那個節點，即自上而下的去觸發事件。， element.addEventListener(event,fu

關於JS中事件捕獲，事件冒泡與事件代理（事件委託），及e.target與e.currentcurrentTarget的區別

事件捕獲：        表示事件的觸發順序，當繫結事件方法的第三個引數值設定為true時，事件觸發的順序為捕獲。        當一個元素的事件被觸發的時候（如onclick事件），該事件會從document開

【事件流】事件冒泡和事件捕獲

事件流： 　　通俗的說就是：元素觸發時，傳播的過程。   冒泡型事件流：事件的傳播是從最具體的事件目標到最不具體的事件目標。即從DOM樹的葉子到根。 　　　　　　　<div>—》<body>—》<html>—》document &n

事件流：事件冒泡和事件捕獲的理解

事件流：事件冒泡和事件捕獲 1. 兩者概念 事件捕獲指的是從document到觸發事件的那個節點，即自上而下的去觸發事件。， element.addEventListener(event,function(),false); 事件冒泡是自下而上的去觸發

js事件流機制冒泡和捕獲

JavaScript與HTML之間的互動是通過事件實現的。事件，就是文件或瀏覽器視窗中發生的一些特定的互動瞬間。 事件流 從頁面中接收事件的順序稱為事件流。 IE --> 事件冒泡流 Netscape --> 事件捕獲流 事件冒泡 IE的事件流叫做事件冒泡(event bubbling)，即事件

js 事件流的事件冒泡和事件捕獲與阻止事件傳播

head 阻止事件冒泡 觸發 事件冒泡 單擊 期望 就會 簡單的 出現異常 為了方便引入事件流的概念，我們先來說說什麽是事件。 事件就是用戶或瀏覽器自身執行的某種動作。換句話說，我們在瀏覽網頁或者 APP 時，通常會在設備上產生很多交互性的操作，例如點擊、選擇、滾動屏幕、鍵

冒泡與捕獲，事件繫結，阻止事件冒泡，阻止預設行為

Internet Explorer 8 及更早IE版本不支援 addEventListener() 方法，Opera 7.0 及 Opera 更早版本也不支援。 但是，對於這些不支援該函式的瀏覽器，你可以使用 attachEvent() 方法來新增事件控制代碼。對於事件繫結相

事件冒泡+事件捕獲+事件代理（事件委託）的區別

按照我的理解：事件代理就是基於事件冒泡原理，在父元素做事件的處理， 可以實現減少dom操作次數和降低記憶體使用（不能給每個元素都新增同樣的函式）。 問題是不能針對性處理，那麼就是要進一步細化，做針對性處理。

Javascript 冒泡和捕捉，取消冒泡，阻止預設事件；

冒泡：從下到上捕獲：從上到下我們之前介紹到，addEventListener函式的第三個引數false為冒泡，true為捕獲，1.先看一下冒泡的情況，如下程式碼<!DOCTYPE html> <html lang="en"> <head>

需求用例文件編寫建議 --事件流程（基本流程和擴充套件流 (

每個用例表示使用者為實現某個目標與系統的一次互動，而事件流程則是對實現該目標的描述，事件流程包括基本流程（又稱為主成功流程）和可選流程（又稱為擴充套件流程）；對這部分的編寫應該清晰的描述不同的物件（使用者、系統）完成目標的活動序列，例如，像這種方式：球員甲將球傳給球員乙，球員乙運球，球員乙將球傳給球員丙。