Javascript學習筆記：JS事件

1.常見事件

• 用戶點擊頁面上的某項內容
• 鼠標經過特定的元素
• 用戶按下鍵盤上某個按鍵
• 用戶滾動窗口或改變窗口大小
• 頁面元素加載完成或失敗

2.事件句柄

事件句柄，又稱事件處理函數、事件監聽函數。

<div id='btn'>點擊我</div>
<script>
	var btn = document.getElementById("btn");
	btn.addEventListener('click',function(){
		//處理語句
	});
</script>

3.事件定義

爲特定事件定義監聽函數有三種方式：

• 1.直接在HTML中定義元素的事件相關屬性

<button onclick="alert('Fuck!')">點擊我呦</button>

缺點：強耦合（把JS和HTML寫在了一起），不利於代碼複用。

• 2.DOM0級事件
  參考另一篇博文：https://blog.csdn.net/qq_18404993/article/details/104313872
  缺點：元素有且僅能綁定一個事件，若綁定了多個，默認會執行最後一次綁定的事件。
• 3.DOM2級事件
  高級事件處理方式，一個事件可以綁定多個監聽函數。

<div id='btn'>點擊我</div>
<script>
	var btn = document.getElementById("btn");
	btn.addEventListener('click',function(){
		alert("click");
	},false);
	btn.addEventListener('click',function(){
		alert("click2");
	},false);
</script>

4.DOM事件流

移除事件：removeEventListener()

var btn = document.getElementById("btn");
var show = function(){
	alert("click");
}
btn.addEventListener('click',show,false);
//解綁事件
btn.removeEventListener('click',show)

注意 一定要保證addxxx和removexxx裏面的參數一致，才能解綁成功

5.IE事件流（IE事件處理程序）

IE8以及以下：
添加事件：attchEvent()
移除事件：deattchEvent()

DOM0級事件綁定：兼容所有瀏覽器
DOM2級事件綁定：Chrome、Firefox、IE9+等
attchEvent：IE8-

6.跨瀏覽器事件處理程序

寫一個可以通用的事件綁定。

7.事件冒泡和事件捕獲

事件週期：解釋器創建一個event對象後，會按如下過程將其在html元素間進行傳播

• 第一階段：事件捕獲，事件對象沿DOM樹向下傳播
• 第二階段：目標觸發，運行事件監聽函數
• 第三階段：事件冒泡，事件沿DOM樹向上傳播
  

<script>
	var parent = document.getElementById("parent");
	var child = document.getElementById("child");

	parent.addEventListener("click",function(e){
		alert("parent事件被觸發"+this.id);
	})
	child.addEventListener("click",function(e){
		alert("child事件被觸發"+this.id);
	})
</script>

結果：先觸發child事件，再觸發parent事件。
事件冒泡：以直系親屬樹結構向上冒泡，子-->父-->爺，addEventListener()第三個參數默認爲false，表示事件冒泡。

<script>
	var parent = document.getElementById("parent");
	var child = document.getElementById("child");

	parent.addEventListener("click",function(e){
		alert("parent事件被觸發"+this.id);
	},true)
	child.addEventListener("click",function(e){
		alert("child事件被觸發"+this.id);
	},true)
</script>

結果：先觸發parent事件，再觸發child事件。
事件捕獲：以直系親屬樹結構向下冒泡，爺-->父-->子，addEventListener()第三個參數默認爲true，表示事件捕獲。
大部分情況用事件冒泡

8.事件委託

原理：事件冒泡
給ul綁定事件，點擊li，利用事件冒泡，會觸發ul綁定的事件，可以用target獲取具體點擊的是哪個li，這種方法稱作事件委託，能減少事件綁定的次數。

9.event對象常用屬性和方法

type：事件的類型
srcElement(IE8-)/target：事件源，currentTarget指事件綁定的實際對象
cancelBubble：布爾屬性，設爲true時將停止事件進一步起泡到包容層次的元素，e.cancelBubble==true(IE8-)相當於e.stopPropagation()
renturnValue：布爾屬性，設爲false時可以阻止瀏覽器執行默認事件動作，e.returnValue=false(IE8-)相當於e.preventDefault()，例如a標籤使用該屬性的false值，會阻止鏈接跳轉。
clientY：瀏覽器頂部底邊到鼠標點擊位置的垂直距離。
pageY：cilentY+滾動軸的距離
screenY：屏幕的頂部到鼠標點擊位置的垂直距離。

10.event對象瀏覽器兼容寫法

11.常見事件類型

11.1 UI事件類型

load：頁面加載完成後在window上面觸發
可用於圖片預加載（提前把圖片緩存到內存中）

var image = new Image();
EventUtil.addHandler(image,"load",function(event){
	alert("Image load!");
});
image.src="smile.gif";

可用於JS和CSS動態加載

var script = document.createElement("script");
EventUtil.addHandler(script,"load",function(event){
	alert("js load!");
});
script.src="jquery.js";
document.body.appendChild(script);

unload：用戶從一個頁面切換到另一個頁面
resize：窗口大小發生變化時觸發
scroll：頁面滾動時觸發

11.2 焦點事件

blur：input元素失去焦點時觸發
focus：獲取焦點時，不支持冒泡
focusin：同上，支持冒泡
focusout：同blur
DOMFocusIn：元素獲取焦點時觸發（Opera）
DOMFocusOut：元素失去焦點時觸發（Opera）

11.3 鼠標事件

click：點擊
doublecilck：雙擊
mousedown：鼠標按下
mouseup：鼠標鬆開
mousemove：鼠標在元素上移動
mouseout：鼠標離開元素（包括子元素）
mouseover：鼠標進入目標元素（包括子元素）
mouseenter：鼠標進入目標元素，只能進入目標元素時才觸發（若目標元素內部有其他元素，鼠標懸停子元素時不觸發，下同）
mouseleave：鼠標離開目標元素，只能離開目標元素時才觸發
一些屬性：
event.shiftkey：shift鍵被按下
event.ctrlkey：ctrl鍵被按下
event.altkey：alt鍵被按下
鼠標按下時的屬性：
event.button：0–鼠標左鍵，1–鼠標中鍵，2–鼠標右鍵

11.4 鍵盤事件

keydown：鍵碼，按下任意鍵觸發，配合event.keycode使用
keyup：釋放任意鍵觸發，配合event.keycode使用
keypress：鍵碼，按下字符鍵觸發，配合event.charCode使用，獲取ASCII碼
textInput：輸入框，配合event.data使用

11.5 文檔事件

DOMNodeRemoved：綁定元素中的任意元素被刪除時觸發。
DOMSubtreeModified：綁定元素中的元素樹發生任何改變是觸發。
DOMNodeRemovedFromDocument：從文檔中移除之前被觸發。
DOMNodeInserted：綁定元素中添加了任意元素時被觸發。
DOMNodeInsertedIntoDocument：從文檔中添加之前被觸發

11.6 HTML5新增事件

DOMContentLoaded：在DOM樹之後就會觸發，不理會圖像、js、css或其他資源是否已經加載，速度一定快於load事件。
hashchange：只能給window添加，#號後面的值發生變化時觸發

11.7 移動端常用事件

touchstart：手指觸摸屏幕時觸發
touchmove：手指在屏幕上滑動時觸發
touchend：手指離開屏幕
touchcancel：當系統停止跟着觸摸時觸發
一些event的屬性：
event.touches：當前觸摸屏幕的觸摸點數組
event.changedTouches：數組中只包含引起事件的觸摸點信息
event.targetTouches：只包含放在事件對象上的觸摸點信息