JS基礎 ---事件

事件分類

a.視窗事件,只在body和frameset元素中才有效
onload 頁面或圖片載入完成時
onunload 使用者離開頁面時

b.表單元素事件,在表單元素中才有效
onchange 框內容改變時
onsubmit 點選提交按鈕時
onreset 重新點選滑鼠按鍵時
onselect 文字被選擇時
onblur 元素失去焦點時
onfocus 當元素獲取焦點時

c.鍵盤事件,
onkeydown 按下鍵盤按鍵時
onkeypress 按下或按住鍵盤按鍵時
onkeyup 放開鍵盤按鍵時

d.滑鼠事件
click 滑鼠點選一個物件時
dblclick 滑鼠雙擊一個物件時
mousedown 滑鼠被按下時
mousemove 滑鼠被移動時
mouseout 滑鼠離開元素時
mouseover 滑鼠經過元素時
mouseenter 滑鼠進入元素時
mouseleave 滑鼠移出元素時
mouseup 釋放滑鼠按鍵時

mousedown --> [mousemove] --> mouseup --> click
mousemove --> mouseover --> mouseenter --> mousemove --> mouseout --> mouseleave

mouseover/mouseout 與 mouseenter/mouseleave 區別：前者會冒泡

e.其他
onresize 當視窗或框架被重新定義尺寸時
onabort 圖片下載被打斷時
onerror 當載入文件或圖片時發生錯誤時

事件階段

捕獲 —> target —> 冒泡

由圖片我們可以看到，事件是先捕獲再冒泡的，而第三個引數就決定了是先捕獲還是先冒泡，如果是true就是捕獲，反正則是冒泡，我們可以看個例子：

window.addEventListener('click',function() {
	console.log('window');
},true);
dom.addEventListener('click', function() {
	console.log('dom');
},true);

輸出結果：window dom （捕獲從上往下）

window.addEventListener('click',function() {
	console.log('window');
});
dom.addEventListener('click', function() {
	console.log('dom');
});

輸出結果：dom window （冒泡從下往上）

1. 阻止事件冒泡 e.stopPropagation()
2. 阻止事件冒泡（立即結束）e.stopImmediatePropagation()
3. 阻止預設事件 e.preventDefault

事件註冊

function onClick(e) {
	console.log('dom click');
}
dom.addEventListener('click', onClick ,true);	//dom新增一個click事件
dom.removeEventListener('click', onClick, true); //dom移除相應的click事件

事件代理

應用了設計模式中的觀察者模式：
一個ul下有很多li標籤，這些li標籤對click事件的處理都是一樣的，所以我們沒有必要每個li標籤都設定一個click事件，我們只需要給ul設定click事件，讓ul來觀察變化

<ul id="watcher">
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>

var watch = document.querySelector('#watcher');
watch.addEventListener('click', function(e){
	console.log(e.target.innerText);
});

e.currentTarget 指的是ul（即觀察者）
e.target 指的是點選的li