你不知道的Event

時間 2019-12-07

標籤不知道 event 简体版

原文原文鏈接

event,事件對象，在咱們前端開發中，event對象上的各種方法確定是熟悉的不能在熟悉了，什麼onclick,onload,onmouseover,onkeydown這些咱們是常用的事件都屬於event，可是咱們強大的event遠不止事件觸發這些事件類型，它自己還有不少屬性，來告知咱們觸發該事件所包含的信息，那麼咱們的event有哪些是很是具備實用價值，可是咱們又不是辣麼熟悉的呢，今天一塊兒來扒一扒event事件對象吧。javascript

1.event事件對象

咱們在網頁頁面上進行操做，就會觸發事件，會產生一個事件對象，做爲參數傳給監聽函數。瀏覽器原生提供一個Event對象，全部的事件都是這個對象的實例，或者說繼承了Event.prototype對象。而Event對象自己就是一個構造函數，能夠用來生成新的實例。html

`前端

var even = new Event(type, options);
複製代碼

` Event構造函數接收兩個參數，參數一是事件名稱，參數二是個對象，這個對象表示事件對象的配置，主要包含兩個屬性：java

bubbles：布爾值，可選，默認爲false，表示事件對象是否冒泡；
cancelable：布爾值，可選，默認爲false，表示事件是否能夠被取消，即可否用Event.preventDefault()取消這個事件。

如今咱們的問題來了，咱們new出來的這個event實例有什麼用呢，今天咱們的第一個知識點，自定義事件，什麼是自定義事件呢，說白了就是咱們本身定義一個事件名字，而後觸發這個事件行爲，下面看代碼：瀏覽器

` // 普通事件 document.onclick = function () { console.log('普通點擊事件') }函數

// 自定義事件
var dialog = new Event('dialog', {'bubbles': false,'cancelable': false});
document.addEventListener('dialog', function () {   // 監聽事件
			var bool = confirm('我要彈出一個對話框')
			if (bool) {
				console.log('點擊肯定了')
			} else {
				console.log('點擊取消了')
			}
		}, false);
複製代碼

`性能

到這一步，咱們的自定義事件其實已經定義完成了，可是可能你們會發現，這個自定義事件不論怎樣都是執行不了的，是的，確實執行不了，由於咱們尚未觸發它，由於自定義事件不像普通事件，有具體的觸發行爲來觸發事件並執行方法，自定義事件還有一個觸發的方法dispatchEvent(): `spa

document.dispatchEvent(dialog)  // 觸發自定義事件
複製代碼

`prototype

到這裏，咱們的自定義事件就已經能夠正常運行了。其實這個自定義事件，在咱們的document文檔對象這個節點上也定義了一個自定義事件的接口document.createEvent()，document.createEvent()方法生成一個事件對象實例，document.createEvent方法的參數是事件類型，好比UIEvents、MouseEvents、MutationEvents、HTMLEvents,下面咱們看具體代碼：代理

<body>
        <div id='div1'>自定義alert事件</div>
    </body>
    var div1 = document.getElementById('div1');
    var alertEven = document.createEvent('HTMLEvents'); // 建立事件對象
	alertEven.initEvent('alert', false, false);     // 初始化自定義事件名稱
	div1.addEventListener('alert', function () {    // 監聽事件
				alert('alert一下吧')
			}, false)
	div1.dispatchEvent(alertEven)   // 觸發事件
複製代碼

用這種方式咱們一樣能夠完成一個自定義事件。這兩種方式本質上並無什麼區別，它們都有一樣的步驟，建立事件實例，addEventListener()監聽事件，dispatchEvent()觸發執行，並且它們都是繼承製EventTarget接口。

2.事件傳播

在咱們平常工做當中，事件冒泡這個事件行爲，確定是有遇到的，先不說是不是常常，遇到後你們也知道使用event.stopPropagation()來阻止冒泡，還有在使用element.addEventListener(type,fn,false)事件監聽的方式綁定事件時，它的第三個參數是個布爾值，默認false，表示冒泡階段觸發,若是設置爲true則表示捕獲階段觸發，問題來了：觸發事件後的事件傳播是怎樣的呢？其實一個事件發生後，事件會在子元素和父元素之間傳播，共三個階段：

階段1：從window對象傳導到目標節點（上層傳到底層），稱爲「捕獲階段」（capture phase）;
階段2：在目標節點上觸發，稱爲「目標階段」（target phase）;
階段3：從目標節點傳導回window對象（從底層傳回上層），稱爲「冒泡階段」（bubbling phase）。

那麼咱們怎麼判斷咱們的事件觸發後處於在哪一個階段呢，在event實例對象上有一個屬性event.eventPhase返回一個整數常量，就是用來表示事件目前所處的階段：

0 表示事件目前沒有發生，
1 表示事件目前處於捕獲階段，從父節點向目標節點傳送過程(從上向下傳遞)，
2 表示事件到達目標節點，即Event.target屬性指向的那個節點，
3 表示事件冒泡階段，即從目標節點向父節點傳遞(從下向上傳遞)。

有了上面的認識，咱們下面看個例子： `

<span id='s1'><button id='b1'>click me</button></span>

var s1 = document.getElementById('s1'), tx1 = document.getElementById('tx1');

b1.addEventListener('click', eventObj, false);
b1.addEventListener('click', eventObj, true);
s1.addEventListener('click', eventObj, false);
s1.addEventListener('click', eventObj, true);

function eventObj (event) {
    // event.stopPropagation();
	var el = event.currentTarget.tagName;
	console.log(el , event.eventPhase)
}   // 則能夠看見span的事件會輸出1，3，button的事件會輸出兩次2
// 若是咱們放開event.stopPropagation()的註釋，則只會輸出1
複製代碼

有了這些認識，你們首先想的確定是它的實際應用價值，有什麼用呢？最最經常使用的，就是：事件代理，事件代理是基於事件冒泡的特性擴展出來的開發方式，事件代理的優點是由父節點監聽子節點的事件行爲，並統一處理子節點觸發的事件函數，這樣作就減小了瀏覽器對事件的監聽，處理程序對內存的開銷，進而提升性能。簡單來講就是,你去盯五我的的稍和盯一我的的稍，你會以爲哪一個容易一點？道理就這麼簡單。而咱們最常應用事件代理的地方就是分頁控件。

3.經常使用事件屬性和方法

event事件對象是個龐大的對象，下面又擁有衆多的屬性和方法，總有一些是咱們經常使用的和不經常使用的，下面咱們稍微列一下咱們經常使用的屬性和方法，供你們參考：

element.addEventListener()：二級DOM事件綁定方法，接收三個參數：參數一:事件類型，參數二，執行的方法，參數三布爾值，什麼節點捕獲事件。
element.removeEventListener()：移除二級DOM事件，注意：該方法要和綁定的事件類型，綁定的元素，捕獲階段都要保持一至。
element.dispatchEvent()：方法在當前節點上觸發指定自定義事件，從而觸發監聽函數的執行。
event.eventPhase：返回觸發的事件目前所處階段，詳細請看上面的介紹。
event.cancelBubble：屬性是個布爾值，設置爲true時能夠取消事件冒泡。
event.preventDefault()：取消瀏覽器對當前事件的默認行爲。
event.currentTarget，event.target：獲取事件觸發的目標節點元素，currentTarget返回事件當前所在的節點，即正在執行的監聽函數所綁定的那個節點,target返回原始觸發事件的那個節點，即事件最初發生的節點。
event.type：返回一個字符串，表示觸發的事件類型。
event.stopPropagation()：方法阻止事件在 DOM 中繼續傳播,通常用於阻止事件冒泡這類行爲的。
event.stopImmediatePropagation()：該方法一樣能夠阻止事件冒泡，不一樣的是在觸發一次後，它會完全註銷掉傳播的事件監聽的函數。
mouseEvent.clientX，mouseEvent.clientY：鼠標事件觸發時，返回鼠標指針相對於瀏覽器窗口的水平座標和垂直座標值。
mouseEvent.button：鼠標事件，返回一個數值，表示按下了鼠標哪一個鍵：0表示左鍵，1表示滾輪，2表示右鍵，默認0。
mouseEvent.ctrlKey：布爾值，是否同時按下了 Ctrl 鍵，默認值爲false。
mouseEvent.shiftKey：布爾值，是否同時按下了 Shift 鍵，默認值爲false。
mouseEvent.altKey：布爾值，是否同時按下 Alt 鍵，默認值爲false。
mouseEvent.metaKey：布爾值，是否同時按下 Meta 鍵，默認值爲false。
KeyboardEvent.keyCode：鍵盤事件，返回按下鍵盤按鈕的鍵碼。
KeyboardEvent.code:鍵盤事件，返回按下鍵的code。
KeyboardEvent.key:鍵盤事件，返回按下鍵的鍵名，好比按下數字1，返回就是1，按下a，返回就是a。

總結

在上面我列舉了我的認爲經常使用的一些事件屬性和方法，其實還有很多並未列舉到，詳細的你們能夠去網道這裏查看吧，這裏是我參考的地方。今天本文呢主要目的是和你們分享一些event很是有使用，可是又不經常使用的一些特性，好比上面的自定義事件，和事件傳播的概念，但願本文對你有所幫助，正所謂碼字不易，喜歡的朋友煩請點個贊，謝謝。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。