定義
事件就是用戶或瀏覽器自身執行的某種動作，click、load、mouseover，都是事件的名字。而響應某個事件的函數就叫做事件處理程序，click的事件處理程序就是onclick,load事件處理程序就是onload
三種方式
1、Html事件處理程序
<input type="button" value="Click me" onclick="alert(clicked)" />
在HTML中指定事件處理程序有兩個缺點，一是存在時間差，如果頁面已經出現了HTML元素，但是js還沒加載完，這時候就會報錯。還有就是會造成js代碼與HTML代碼耦合。
2、將一個函數賦值給一個事件處理程序屬性
var btn = document.getElementById('mybtn');
btn.onclick = function () {
alert(this.id); //mybtn
}
可以使用 btn.onclick = null取消
3、添加事件監聽
addEventListener()和 removeEventListener()。
所有DOM節點都包含這兩個方法，並且它們都接收三個參數，要處理的事件名、事件處理函數、一個布爾值。最後一個參數如果是true，表示在捕獲階段調用，如果是false，表示在冒泡階段調用。
事件流
同時點擊多個元素時的事件觸發順序
事件流包含三個階段，事件捕獲階段、處於目標階段和事件冒泡階段。
<div id="calldiv">
<p id="callp">
<span id="callspan">
sss
</span>
</p>
</div>
var mydiv = document.getElementById('calldiv');
var myp = document.getElementById('callp');
var myspan = document.getElementById('callspan');
mydiv.addEventListener('click', calldiv, true);
myp.addEventListener('click', callp, true);
myspan.addEventListener('click', callspan, true);
function calldiv() {
alert('div');
}
function callp() {
alert('p')
}
function callspan() {
alert('span')
}
事件委託：也稱事件代理 就是利用冒泡的原理 把加事件加到父級上，觸發執行效果
事件對象
綁定的函數會默認傳入一個事件對象，事件對象的currentTarget == this
在元素標籤中用onclick等綁定的事件沒有事件對象，this == window
event.preventDefault()：取消事件對象的默認動作。
event.stopPropagation()/ event.cancelBubble = true：阻止事件傳播。
事件
事件可以是用戶行爲，也可以是瀏覽器行爲
用戶行爲
鼠標事件
click：單擊事件。
dblclick：雙擊事件。
mousedown：按下鼠標鍵時觸發。
mouseup：釋放按下的鼠標鍵時觸發。
mousemove：鼠標移動事件。
mouseover：移入事件。
mouseout：移出事件。
mouseenter：移入事件。
mouseleave：移出事件。
contextmenu：右鍵事件。
鍵盤事件
keydown：按鍵按下
keyup：按鍵擡起
keypress：按鍵按下擡起
HTML事件
load：文檔加載完成
select：被選中的時候
change：內容被改變
focus：得到光標
resize：窗口尺寸變化
scroll：滾動條移動
表單事件
onblur 元素失去焦點時觸發
onchange 該事件在表單元素的內容改變時觸發
onfocus 元素獲取焦點時觸發
onfocusin 元素即將獲取焦點時觸發
onfocusout 元素即將失去焦點時觸發
oninput 元素獲取用戶輸入時觸發
onreset 表單重置時觸發
onsearch 用戶向搜索域輸入文本時觸發 ( <input="search">)
onselect 用戶選取文本時觸發 ( <input> 和 <textarea>)
onsubmit 表單提交時觸發
瀏覽器行爲
onload 頁面加載完成後觸發
ononline 該事件在瀏覽器開始在線工作時觸發。
onoffline 該事件在瀏覽器開始離線工作時觸發。
onstorage 該事件在 Web Storage(HTML 5 Web 存儲)更新時觸發
onwheel 該事件在鼠標滾輪在元素上下滾動時觸發
transitionend 該事件在 CSS 完成過渡後觸發。
animationend 該事件在 CSS 動畫結束播放時觸發
animationiteration 該事件在 CSS 動畫重複播放時觸發
animationstart 該事件在 CSS 動畫開始播放時觸發