javascript的事件

時間 2019-11-10

原文原文鏈接

javascript的事件

事件，就是文檔或瀏覽器窗口中發生的一些特定的交互瞬間。而 javaScript 與 HTML 之間的交互是經過事件實現的，可使用偵聽器（或處理程序）來預訂事件，以便事件發生時執行相應的代碼。這種在傳統軟件工程中被稱爲觀察員模式的模型，支持頁面的行爲（JavaScript 代碼）與頁面的外觀（HTML 和 CSS 代碼）之間的鬆散耦合。javascript

一、DOM事件流

DOM事件流包括了3個階段：事件捕獲階段、處於目標階段、時間冒泡階段。
html

<!DOCTYPE html>
<html>
<head>
<title>Event Bubbling Example</title>
</head>
<body>
<div id="myDiv">Click Me</div>
</body>
</html>

a、事件捕獲：事件捕獲的思想是不太具體的節點應該更早接收到事件，而最具體的節點應該最後接收到事件。事件捕獲的用意在於在事件到達預約目標以前捕獲它。從document元素一直傳遞到事件發生的元素（從大範圍縮小到目標元素）java

b、事件冒泡：即事件開始時由最具體的元素（文檔中嵌套層次最深的那個節點）接收，而後逐級向上傳播到較爲不具體的節點（文檔）。從最具體的元素傳播到document元素（從小範圍到大範圍）瀏覽器

c、當點擊div元素時，在 DOM 事件流中，實際的目標（ <div> 元素）在捕獲階段不會接收到事件。這意味着在捕獲階段，事件從 document 到 <html> 再到 <body> 後就中止了。而後是「處於目標」階段，因而事件在 <div>上發生。而後，冒泡階段發生，事件又傳播迴文檔。dom

二、事件處理

a、addEventListener()；給元素增長事件的函數。
編輯器

格式：addEventListener("event_name",callback,use-capture);
event_name：事件名稱。
callback：事件處理方法
use-capture：false--》冒泡階段/ture-->捕獲階段。
ps:大多數狀況下，都是將事件處理程序添加到事件流的冒泡階段，這樣能夠最大限度地兼容各類瀏覽器

測試函數

<!DOCTYPE html>
<html>
<head>

</head>
<html id="myHtml">
	<body id="myBody">
		<div id="myDiv">Click Me</div>
	</body>
<script>
	
	var bd=document.getElementById("myBody");
	var dv=document.getElementById("myDiv");
	var ht=document.getElementById("myHtml");
	<!--冒泡-->
	bd.addEventListener("click",function(){
		console.log("body冒泡："+(new Date()).toLocaleString());
	},false);
	dv.addEventListener("click",function(){
		console.log("div冒泡："+(new Date()).toLocaleString());
	},false);
	ht.addEventListener("click",function(){
		console.log("html冒泡："+(new Date()).toLocaleString());
	},false);	
	<!--捕獲-->
	bd.addEventListener("click",function(){
		console.log("body捕獲："+(new Date()).toLocaleString());
	},true);
	dv.addEventListener("click",function(){
		console.log("div捕獲："+(new Date()).toLocaleString());
	},true);
	ht.addEventListener("click",function(){
		console.log("html捕獲："+(new Date()).toLocaleString());
	},true);	
</script>	
</html>

b、removeEventListener()；刪除元素的事件。測試

格式:removeEventListener("event_name",callback,use-capture)

ps:IE的事件處理方式：attachEvent()和detachEvent()。
this

格式:
attachEvent("event_name",callback);
detachEvent("event_name",callback);

三、事件對象

在觸發 DOM 上的某個事件時，會產生一個事件對象 event ，這個對象中包含着全部與事件有關的信息：致使事件的元素、事件的類型以及其餘與特定事件相關的信息。spa

<!DOCTYPE html>
<html>
<head>
<script>
	function doThis(){
		//console.log(this);
		console.log(event);
	}
</script>
</head>
<body>
	<div>
		<input type="button" value="Click Me" onclick="doThis()"/>
	</div>
</body>
</html>

查看下事件的傳播途徑

事件的屬性

四、事件類型

主要的事件類型：

UI（User Interface，用戶界面）事件，當用戶與頁面上的元素交互時觸發；
焦點事件，當元素得到或失去焦點時觸發；
鼠標事件，當用戶經過鼠標在頁面上執行操做時觸發；
滾輪事件，當使用鼠標滾輪（或相似設備）時觸發；
文本事件，當在文檔中輸入文本時觸發；
鍵盤事件，當用戶經過鍵盤在頁面上執行操做時觸發；
合成事件，當爲 IME（Input Method Editor，輸入法編輯器）輸入字符時觸發；
變更（mutation）事件，當底層 DOM 結構發生變化時觸發。

最新的具體的事件類型能夠查看W3C的數據：http://www.w3school.com.cn/jsref/dom_obj_event.asp

a、UI事件：用戶與頁面上的元素交互時觸發

b、焦點事件：焦點事件會在頁面元素得到或失去焦點時觸發

c、鼠標、滾動事件：當用戶經過鼠標操做頁面時觸發。

鼠標事件的屬性

d、鍵盤事件：用戶在使用鍵盤時會觸發鍵盤事件

e、觸摸事件：移動端的事件類型。

touch事件的其它其它屬性：