https://www.jianshu.com/p/3ac912a5a1f8
Dom事件
事件是一種異步編程的實現方式，本質上是程序各個組成部分之間的通信。DOM支持大量的事件
(一) EventTarget接口
DOM的事件操作（監聽和觸發），都定義在EventTarget接口。Element節點、document節點和window對象，都部署了這個接口。
EventTarget接口有三個方法：
addEventListener：綁定事件的監聽函數
removeEventListener：移除事件的監聽函數
dispatchEvent：觸發事件
(1) addEventListener() 方法
addEventListener方法用於在當前節點或對象上，定義一個特定事件的監聽函數。
target.addEventListener(type, listener, options);
addEventListener方法接受三個參數。
type：事件名稱，大小寫敏感。
listener：監聽函數。事件發生時，會調用該監聽函數。
useCapture：布爾值，表示監聽函數是否在捕獲階段（capture）觸發，默認爲false（監聽函數只在冒泡階段被觸發）。老式瀏覽器規定該參數必寫，較新版本的瀏覽器允許該參數可選。爲了保持兼容，建議總是寫上該參數。addEventListener方法可以爲當前對象的同一個事件，添加多個監聽函數。這些函數按照添加順序觸發，即先添加先觸發。如果爲同一個事件多次添加同一個監聽函數，該函數只會執行一次，多餘的添加將自動被去除（不必使用removeEventListener方法手動去除）。
addEventListener方法指定的監聽函數，內部的this對象總是指向觸發事件的那個節點。
window.onload = function() { var a = document.getElementById('a'); var go = function() { console.log('這是addEventListener函數')
} var to = function() { console.log('addEventListener可以爲當前對象的同一事件，綁定不同的監聽函數，先綁定的先執行')
}
a.addEventListener('click', go, false) // 爲a的 click事件 綁定了 監聽函數go，在冒泡階段觸發
a.addEventListener('click', to, false) // 爲當前對象 同一事件 綁定不同的 監聽函數}
--------------------------------------------------------------------------------function hello() { console.log('Hello world');
}document.addEventListener('click', hello, false);document.addEventListener('click', hello, false);// 執行上面代碼，點擊文檔只會輸出一行Hello world如果希望向監聽函數傳遞參數，可以用匿名函數包裝一下監聽函數。
function print(x) { console.log(x);
}var el = document.getElementById('div1');
el.addEventListener('click', function () { print('Hello'); }, false);
---------------------------------------------window.onload = function () { var a = document.getElementById('a'); var go = function(x,e) { console.log(x) console.log(e,'每一個事件都會生成一個事件對象，作爲參數，傳給監聽函數') //比如e.target等
};
a.addEventListener('click', function(e){ go('wang',e) }, false) var b = new Event('click'); var c = a.dispatchEvent(b); console.log(c,'dispatchEvent()方法返回布爾值')
};(2) removeEventListener() 方法
removeEventListener方法用來移除addEventListener方法添加的事件監聽函數。
參數： 與 addEventListener()方法一致 有三個參數，分別是：
1.事件名稱，
.2監聽函數，
3.布爾值是否在捕獲階段觸發，默認是false注意：
removeEventListener方法移除的監聽函數，必須與對應的addEventListener方法的參數完全一致，而且必須在同一個元素節點，否則無效。
(3) dispatchEvent() 方法-------------觸發事件
dispatchEvent方法在當前節點上觸發指定事件，從而觸發監聽函數的執行。該方法返回一個布爾值，只要有一個監聽函數調用了Event.preventDefault()，則返回值爲false，否則爲true。
dispatchEvent方法的參數是一個Event對象的實例。
如果dispatchEvent方法的參數爲空，或者不是一個有效的事件對象，將報錯。
dispatchEvent() 在當前節點上觸發指定事件------從而觸發事件上綁定的監聽函數去執行
dispatchEvent() 方法返回一個布爾值，只要有一個監聽函數調用了 Event.preventDefault()，就會返回false，否則返回true-------( 同一個事件，可以綁定多個監聽函數 )`
para.addEventListener('click', hello, false);var event = new Event('click');
para.dispatchEvent(event);// 上面代碼在當前節點觸發了click事件。---------------------------------------------------- var c = document.getElementById('c'); function dispatch() { console.log( 'dispatchEvent()作用是觸發事件，參數是Event對象的實例，觸發事件，從而出發事件綁定的監聽函數'
)
}
c.addEventListener('click', dispatch, false); var click = new Event('click'); var d = c.dispatchEvent(click); // dispatchEvent()事件執行後，返回一個布爾值
console.log(d) // true
// ------(只要有一個監聽函數調用了 Event.preventDefault()，就會返回false，否則返回true)(二) 監聽函數
監聽函數（listener）是事件發生時，程序所要執行的函數。
DOM提供三種方法，可以用來爲事件綁定監聽函數。
(1) HTML標籤的on-屬性
HTML語言允許在元素標籤的屬性中，直接定義某些事件的監聽代碼。
使用這個方法指定的監聽函數，只會在冒泡階段觸發。
“HTML標籤的on-屬性”，違反了HTML與JavaScript代碼相分離的原則；
<body onload="doSomething()">
<div onclick="console.log('觸發事件')">// 上面代碼爲body節點的load事件、div節點的click事件，指定了監聽函數。// 使用這個方法指定的監聽函數，只會在冒泡階段觸發。注意，使用這種方法時，on-屬性的值是將會執行的代碼，而不是一個函數。
<!-- 正確 --><body onload="doSomething()"> // on-屬性 方法，標籤中 屬性的值 是將要執行的代碼，而不是函數(即 執行函數，而不是定義函數 )<!-- 錯誤 --><body onload="doSomething">
Element元素節點的setAttribute方法，其實設置的也是這種效果。
el.setAttribute('onclick', 'doSomething()');
等同於
<body onclick="doSomething()"> // 這裏的c，大小寫都可以(2) Element節點的事件屬性
Element節點對象有事件屬性，同樣可以指定監聽函數。
使用這個方法指定的監聽函數，只會在冒泡階段觸發。
“Element節點的事件屬性”的缺點是，同一個事件只能定義一個監聽函數，也就是說，如果定義兩次onclick屬性，後一次定義會覆蓋前一次。
window.onload = doSomething;
div.onclick = function(event){ console.log('觸發事件');
};// 使用這個方法指定的監聽函數，只會在冒泡階段觸發。(3) addEventListener方法
在上面三種方法中:
第一種“HTML標籤的on-屬性”，違反了HTML與JavaScript代碼相分離的原則；
第二種“Element節點的事件屬性”的缺點是，同一個事件只能定義一個監聽函數，也就是說，如果定義兩次onclick屬性，後一次定義會覆蓋前一次。
因此，這兩種方法都不推薦使用，除非是爲了程序的兼容問題，因爲所有瀏覽器都支持這兩種方法。
addEventListener是推薦的指定監聽函數的方法。有如下三個優點：
1.可以針對同一個事件，添加多個監聽函數。2.能夠指定在哪個階段（捕獲階段還是冒泡階段）觸發回監聽函數。3.除了DOM節點，還可以部署在window、XMLHttpRequest等對象上面，等於統一了整個JavaScript的監聽函數接口。
(4) 在監聽函數中 this的指向
實際編程中，監聽函數內部的this對象，常常需要指向觸發事件的那個Element節點。
addEventListener方法指定的監聽函數，內部的this對象總是指向觸發事件的那個節點。
如果將監聽函數部署在Element節點的on-屬性上面，this不會指向觸發事件的元素節點。
// HTML代碼爲// <p id="para">Hello</p>var id = 'doc';var para = document.getElementById('para');function hello(){ console.log(this.id); // addEventListener監聽函數中的this，總是指向 觸發事件的那個節點}
para.addEventListener('click', hello, false);總結
總結一下，以下寫法的this對象都指向Element節點。
// JavaScript代碼element.onclick = print
element.addEventListener('click', print, false)
element.onclick = function () {console.log(this.id);}// HTML代碼<element onclick="console.log(this.id)">
--------------------------------------------------------以下寫法的this對象，都指向全局對象。
// JavaScript代碼element.onclick = function (){ doSomething() };
element.setAttribute('onclick', 'doSomething()');// HTML代碼<element onclick="doSomething()">(三) 事件的傳播
當一個事件發生以後，它會在不同的DOM節點之間傳播（propagation）。這種傳播分成三個階段：
第一階段：從window對象傳導到目標節點，稱爲“捕獲階段”（capture phase）。
第二階段：在目標節點上觸發，稱爲“目標階段”（target phase）。
第三階段：從目標節點傳導回window對象，稱爲“冒泡階段”（bubbling phase）。
這種三階段的傳播模型，會使得一個事件在多個節點上觸發。比如，假設點擊<div>之中嵌套一個<p>節點。( phase是階段的意思 )---------( bubbling是冒泡的意思 )
用戶點擊網頁的時候，瀏覽器總是假定click事件的目標節點，就是點擊位置的嵌套最深的那個節點（嵌套在<div>節點的<p>節點）。所以，<p>節點的捕獲階段和冒泡階段，都會顯示爲target階段。
事件傳播的最上層對象是window，接着依次是document，html（document.documentElement）和body（document.body）。
也就是說，如果<body>元素中有一個<div>元素，點擊該元素。事件的傳播順序:
(1) 在捕獲階段依次爲window、document、html、body、div。
(2) 在冒泡階段依次爲div、body、html、document、window。
(四) 事件的代理
由於事件會在 冒泡階段 向上傳播到父節點，因此可以把子節點的監聽函數定義在父節點上，由父節點的監聽函數統一處理多個子元素的事件。這種方法叫做事件的代理（delegation）。
這樣做的好處是，只要定義一個監聽函數，就能處理多個子節點的事件，而且以後再添加子節點，監聽函數依然有效。
var ul = document.querySelector('ul');
ul.addEventListener('click', function(event) { if (event.target.tagName.toLowerCase() === 'li') { // some code
}
});
---------------------------------------
實例：
--
html部分: <div id="bubb" style="padding:20px;background:yellow; ">
<p style="background:blueviolet">這是div中的p元素</p>
<button style="background:royalblue">這是div中的按鈕</button>
</div>--
js部分：var e = document.getElementById('bubb'); var func = function (event) { var tagname = event.target.tagName.toLowerCase(); // 目標節點的標籤名
if( tagname === 'p') { console.log('這是p元素')
} else if( tagname === 'button') { console.log('這是button')
} else { console.log('這是div父元素')
}
};
e.addEventListener('click', func)stopPropagation方法
如果希望事件到某個節點爲止，不再傳播，可以使用事件對象stopPropagation方法。
p.addEventListener('click', function(event) {
event.stopPropagation(); // stopPropagation() 阻止冒泡});// 用上面的代碼以後，click事件在冒泡階段到達<p>節點以後，就不再向上（父節點的方向）傳播了。stopImmediatePropagation方法
但是，stopPropagation方法只會阻止當前監聽函數的傳播，不會阻止<p>節點上的其他click事件的監聽函數。如果想要不再觸發那些監聽函數，可以使用stopImmediatePropagation方法。
p.addEventListener('click', function(event) {
event.stopImmediatePropagation();
});
p.addEventListener('click', function(event) { // 不會被觸發});(5) Event對象
事件發生以後，會生成一個事件對象，作爲參數傳給監聽函數。瀏覽器原生提供一個Event對象，所有的事件都是這個對象的實例，或者說繼承了Event.prototype對象。
事件發生後，會生成一個事件對象，作爲傳給監聽函數的參數
所有事件都是Event對象的實例，即 ( 所有事件都繼承了Event.prototype對象 )
Event對象本身就是一個構造函數，可以用來生成新的實例。
(1) Event構造函數接受兩個參數：
第一個參數是字符串，表示事件的名稱；
第二個參數是一個對象，表示事件對象的配置。該參數可以有以下兩個屬性。
bubbles：布爾值，可選，默認爲false，表示事件對象是否冒泡。
cancelable：布爾值，可選，默認爲false，表示事件是否可以被取消。
event = new Event(typeArg, eventInit);
var ev = new Event( 'look',
{ 'bubbles': true, 'cancelable': false
}
);document.dispatchEvent(ev);// 上面代碼新建一個look事件實例，然後使用dispatchEvent方法觸發該事件。例二：
para.addEventListener('click', hello, false);var event = new Event('click');
para.dispatchEvent(event); // 觸發事件例三：window.onload = function () { var a = document.getElementById('a'); var go = function(x,e) { console.log(x) console.log(e,'每一個事件都會生成一個事件對象，作爲參數，傳給監聽函數，') console.log(e.bubbles,'e.bubbles') // 在監聽函數中，獲取是否冒泡，只讀
};
a.addEventListener('click', function(e){ go('wang',e) }, false) var b = new Event('click',{bubbles: true}); // 在創建click方法實例的時候，定義是否冒泡
var c = a.dispatchEvent(b); console.log(c,'dispatchEvent()方法返回布爾值')
};(2) event.bubbles
bubbles屬性返回一個布爾值，表示當前事件是否會冒泡。該屬性爲只讀屬性，只能在新建事件時改變。除非顯式聲明，Event構造函數生成的事件，默認是不冒泡的。
bubbles是冒泡的意思 (bubbling)
event.bubsles 返回布爾值，表示當前事件是否會冒泡，默認是false
event.bubbles 是隻讀屬性
(3) event.eventPhase
eventPhase屬性返回一個整數值，表示事件目前所處的階段。
phase 是階段的意思
0，事件目前沒有發生。1，事件目前處於捕獲階段，即處於從祖先節點向目標節點的傳播過程中。該過程是從Window對象到Document節點，再到HTMLHtmlElement節點，直到目標節點的父節點爲止。2，事件處目標階段,事件到達目標節點，即target屬性指向的那個節點。3，事件處於冒泡階段，即處於從目標節點向祖先節點的反向傳播過程中。該過程是從父節點一直到Window對象。只有bubbles屬性爲true時，這個階段纔可能發生。--------3階段，即冒泡階段只有bubbles爲true纔有可能會發生
(4) event.cancelable
cancelable屬性返回一個布爾值，表示事件是否可以取消。該屬性爲只讀屬性，只能在新建事件時改變。除非顯式聲明，Event構造函數生成的事件，默認是不可以取消的。
如果要取消某個事件，需要在這個事件上面調用preventDefault方法，這會阻止瀏覽器對某種事件部署的默認行爲。
(5) defaultPrevented
defaultPrevented屬性返回一個布爾值，表示該事件是否調用過preventDefault方法。
(6) currentTarget
currentTarget屬性返回事件當前所在的節點，即正在執行的監聽函數所綁定的那個節點。
作爲比較，target屬性返回事件發生的節點。如果監聽函數在捕獲階段和冒泡階段觸發，那麼這兩個屬性返回的值是不一樣的。
currentTarget 返回的是正在執行的監聽函數所綁定的那個節點。
(7) target
target屬性返回觸發事件的那個節點，即事件最初發生的節點。如果監聽函數不在該節點觸發，那麼它與currentTarget屬性返回的值是不一樣的。
target 返回觸發事件的那個節點
![]()
事件代理中的 currentTarget 和 target
(8) event.type
type屬性返回一個字符串，表示事件類型，大小寫敏感。
event.type 返回的是字符串，表示事件類型：比如click事件，mouseover事件等
大小寫敏感
(9) event.detail
detail屬性返回一個數值，表示事件的某種信息。具體含義與事件類型有關，對於鼠標事件，表示鼠標按鍵在某個位置按下的次數，比如對於dblclick事件，detail屬性的值總是2。
返回一個數值
(10) event.timeStamp
timeStamp屬性返回一個毫秒時間戳，表示事件發生的時間。
(11) isTrusted
isTrusted屬性返回一個布爾值，表示該事件是否爲真實用戶觸發。
用戶觸發的事件返回true，腳本觸發的事件返回false。
(12) event.preventDefault()
preventDefault方法取消瀏覽器對當前事件的默認行爲
event.preventDefault方法生效的前提是：事件對象的cancelable屬性爲true，如果爲false，則調用該方法沒有任何效果。
該方法不會阻止事件的進一步傳播（stopPropagation方法可用於這個目的）。只要在事件的傳播過程中（捕獲階段、目標階段、冒泡階段皆可），使用了preventDefault方法，該事件的默認方法就不會執行。
(13) event.stopPropagation()
stopPropagation方法阻止事件在 DOM 中繼續傳播，防止再觸發定義在別的節點上的監聽函數，但是不包括在當前節點上新定義的事件監聽函數。
事件類型
(一) 鼠標事件
(1) click事件
當用戶在Element節點、document節點、window對象上單擊鼠標（或者按下回車鍵）時，click事件觸發。
“鼠標單擊”定義爲，用戶在同一個位置完成一次mousedown動作和mouseup動作。它們的觸發順序是：mousedown首先觸發，mouseup接着觸發，click最後觸發。
(2) dblclick事件
dblclick事件當用戶在element、document、window對象上，雙擊鼠標時觸發。該事件會在mousedown、mouseup、click之後觸發。
(3) mousedown事件
mousedown在按下鼠標鍵時觸發。
(4) mouseup 事件
mouseup在釋放按下的鼠標鍵時觸發。
(5) mousemove事件
mousemove事件當鼠標在一個節點內部移動時觸發。當鼠標持續移動時，該事件會連續觸發。爲了避免性能問題，建議對該事件的監聽函數做一些限定，比如限定一段時間內只能運行一次代碼。
mousemove事件在節點內部移動時觸發。
當鼠標持續移動時，會連續觸發
性能優化，對監聽函數做限制，如：一定時間內只能運行一次代碼
(6) mouseover事件 和 mouseenter事件
mouseover事件和mouseenter事件，都是鼠標進入一個節點時觸發。
兩者的區別是：
mouseenter事件只觸發一次，
而只要鼠標在節點內部移動，mouseover事件會在 (子節點) 上觸發多次。!!! ( 重要 )
(7) mouseout 事件，mouseleave 事件
mouseout事件和mouseleave事件，都是鼠標離開一個節點時觸發。
兩者的區別是:
mouseout事件會冒泡，mouseleave事件不會。
子節點的mouseout事件會冒泡到父節點，進而觸發父節點的mouseout事件。
mouseleave事件就沒有這種效果，所以離開子節點時，不會觸發父節點的監聽函數。
(8) contextmenu 事件
contextmenu事件在一個節點上點擊鼠標右鍵時觸發，或者按下“上下文菜單”鍵時觸發。
(二) 滾輪事件
(1) wheel事件
wheel事件是與鼠標滾輪相關的事件，目前只有一個wheel事件。用戶滾動鼠標的滾輪，就觸發這個事件。
wheel是滾輪的意思
wheel事件除了繼承了MouseEvent、UIEvent、Event 的屬性，WheelEvent 還有幾個自己的屬性。
deltaX：返回一個數值，表示滾輪的水平滾動量。deltaY：返回一個數值，表示滾輪的垂直滾動量。deltaZ：返回一個數值，表示滾輪的Z軸滾動量。deltaMode：返回一個數值，表示滾動的單位，適用於上面三個屬性。0表示像素，1表示行，2表示頁。瀏覽器提供一個WheelEvent構造函數，可以用來生成滾輪事件的實例。它接受兩個參數，第一個是事件名稱，第二個是配置對象。
var syntheticEvent = new WheelEvent("syntheticWheel", {"deltaX": 4, "deltaMode": 0});(三) 鍵盤事件
(1)鍵盤事件用來描述鍵盤行爲，主要有keydown、keypress、keyup三個事件。
keydown：按下鍵盤時觸發該事件。
keypress：只要按下的鍵並非Ctrl、Alt、Shift和Meta，就接着觸發keypress事件。
keyup：鬆開鍵盤時觸發該事件。
(2) 如果用戶一直按鍵不鬆開，就會連續觸發鍵盤事件，觸發的順序如下。
keydown keypress keydown keypress （重複以上過程） keyup
(3) 鍵盤事件使用 KeyboardEvent 對象表示，該對象繼承了UIEvent和MouseEvent對象。瀏覽器提供KeyboardEvent構造函數，用來新建鍵盤事件的實例。
(4) altKey，ctrlKey，metaKey，shiftKey
altKey：alt鍵
ctrlKey：ctrl鍵
metaKey：meta鍵（mac系統是一個四瓣的小花，windows系統是windows鍵）
shiftKey：shift鍵
var inpu = document.getElementById('input'); var keyDown = function (e) { console.log(e.ctrlKey, '是否按下了ctrl鍵') console.log(e.altKey, '是否按下了alt鍵') console.log(e.metaKey, '是否按下了win鍵') console.log(e.shiftKey, '是否按下了shift鍵') console.log(e.key,'e.key返回一個字符串，表示按下的鍵名') // 這裏要注意：keypress 事件中ctrlKey，altKey，shiftKey，metaKey事件是undefined
// 在keydown 和 keyup事件中是true和false
}
inpu.addEventListener('keydown', keyDown, false); // keydown事件，觸發keyDoen監聽函數(5) key 屬性
key屬性返回一個字符串，表示按下的鍵名。
如果同時按下一個控制鍵和一個符號鍵，則返回符號鍵的鍵名。
比如，按下Ctrl+a，則返回a。
var inpu = document.getElementById('input'); var keyDown = function (e) { console.log(e.key,'e.key返回一個字符串，表示按下的鍵名')
} // keypress事件的監聽函數中，傳入的參數keyboardEvent，沒有ctrl,alt,meta,shift屬性inpu.addEventListener('keydown', keyDown, false); // keydown事件，觸發keyDoen監聽函數(四) 進度事件
進度事件用來描述一個事件進展的過程，比如XMLHttpRequest對象發出的HTTP請求的過程、<img>、<audio>、<video>、<style>、<link>加載外部資源的過程。下載和上傳都會發生進度事件。
abort事件：當進度事件被中止時觸發。如果發生錯誤，導致進程中止，不會觸發該事件。
error事件：由於錯誤導致資源無法加載時觸發。
load事件：進度成功結束時觸發。
oadstart事件：進度開始時觸發。
loadend事件：進度停止時觸發，發生順序排在error事件\abort事件\load事件後面。
progress事件：當操作處於進度之中，由傳輸的數據塊不斷觸發。
timeout事件：進度超過限時觸發。
image.addEventListener('load', function(event) {
image.classList.add('finished');
});
image.addEventListener('error', function(event) {
image.style.display = 'none';
});
上面代碼在圖片元素加載完成後，爲圖片元素的class屬性添加一個值“finished”。
如果加載失敗，就把圖片元素的樣式設置爲不顯示。有時候，圖片加載會在腳本運行之前就完成，尤其是當腳本放置在網頁底部的時候，因此有可能使得load和error事件的監聽函數根本不會被執行。所以，比較可靠的方式，是用complete屬性先判斷一下是否加載完成。
由於DOM沒有提供像complete屬性那樣的，判斷是否發生加載錯誤的屬性，所以error事件的監聽函數最好放在img元素的HTML屬性中，這樣才能保證發生加載錯誤時百分之百會執行。
<img src="/wrong/url" onerror="this.style.display='none';" />這樣寫能保證，發生加載錯誤時，onerror事件百分百會執行
(1) 進度事件使用ProgressEvent對象表示
ProgressEvent實例有以下屬性。
lengthComputable：返回一個布爾值，表示當前進度是否具有可計算的長度。如果爲false，就表示當前進度無法測量。
total：返回一個數值，表示當前進度的總長度。如果是通過HTTP下載某個資源，表示內容本身的長度，不含HTTP頭部的長度。如果lengthComputable屬性爲false，則total屬性就無法取得正確的值。
loaded：返回一個數值，表示當前進度已經完成的數量。該屬性除以total屬性，就可以得到目前進度的百分比。
(五) 拖拉事件
拖拉指的是，用戶在某個對象上按下鼠標鍵不放，拖動它到另一個位置，然後釋放鼠標鍵，將該對象放在那裏。
拖拉的對象有好幾種，包括Element節點、圖片、鏈接、選中的文字等等。在HTML網頁中，除了Element節點默認不可以拖拉，其他（圖片、鏈接、選中的文字）都是可以直接拖拉的。爲了讓Element節點可拖拉，可以將該節點的draggable屬性設爲true。
Element節點默認不可以拖拉，爲了讓Element節點默認可以拖拉，要將 draggable屬性設爲true
draggable屬性可用於任何Element節點，但是圖片（img元素）和鏈接（a元素）不加這個屬性，就可以拖拉。對於它們，用到這個屬性的時候，往往是將其設爲false，防止拖拉。
注意，一旦某個Element節點的draggable屬性設爲true，就無法再用鼠標選中該節點內部的文字或子節點了。
(六) 觸摸事件
觸摸API由三個對象組成。
Touch
Touch對象表示觸摸點（一根手指或者一根觸摸筆），用來描述觸摸動作，包括位置、大小、形狀、壓力、目標元素等屬性。TouchList
有時，觸摸動作由多個觸摸點（多根手指或者多根觸摸筆）組成，多個觸摸點的集合由TouchList對象表示。TouchEvent
TouchEvent對象代表由觸摸引發的事件，只有觸摸屏纔會引發這一類事件。
(七) 表單事件
(1)input事件 ----------- 輸入時觸發
input事件當<input>、<textarea>的值發生變化時觸發。此外，打開contenteditable屬性的元素，只要值發生變化，也會觸發input事件。
input事件的一個特點，就是會連續觸發，比如用戶每次按下一次按鍵，就會觸發一次input事件。
(2) select事件 ----------- 選中裏面值時 觸發
select事件當在<input>、<textarea>中選中文本時觸發。
(3) Change事件 -------- 值改變且失去焦點時 觸發，分下面三種情況
Change事件當<input>、<select>、<textarea>的值發生變化時觸發。
它與input事件的最大不同，就是不會連續觸發，只有當全部修改完成時纔會觸發。
而且input事件必然會引發change事件。具體來說，分成以下幾種情況。
激活單選框（radio）或複選框（checkbox）時觸發。用戶提交時觸發。比如，從下列列表（select）完成選擇，在日期或文件輸入框完成選擇。當文本框或textarea元素的值發生改變，並且喪失焦點時觸發
(4) reset事件，submit事件
以下事件發生在表單對象上，而不是發生在表單的成員上。
(1) reset事件
reset事件當表單重置（所有表單成員變回默認值）時觸發。(2) submit事件
submit事件當表單數據向服務器提交時觸發。注意，submit事件的發生對象是form元素，而不是button元素（即使它的類型是submit），因爲提交的是表單，而不是按鈕。
(八) 文檔事件
(1) hashchange事件，popstate事件
以下事件與文檔的URL變化相關。
(1) hashchange事件
hashchange事件在URL的hash部分（即#號後面的部分，包括#號）發生變化時觸發。如果老式瀏覽器不支持該屬性，可以通過定期檢查location.hash屬性，模擬該事件
hashchange事件對象除了繼承Event對象，還有oldURL屬性和newURL屬性，分別表示變化前後的URL。
(2) popstate事件
popstate事件在瀏覽器的history對象的當前記錄發生顯式切換時觸發。注意，調用history.pushState()或history.replaceState()，並不會觸發popstate事件。該事件只在用戶在history記錄之間顯式切換時觸發，比如鼠標點擊“後退/前進”按鈕，或者在腳本中調用history.back()、history.forward()、history.go()時觸發。
作者：省局到
鏈接：https://www.jianshu.com/p/3ac912a5a1f8
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯繫作者獲得授權並註明出處。