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