DOM事件

時間 2019-12-07

標籤 dom 事件欄目 HTML 简体版

原文原文鏈接

javascript與HTML之間的交互是經過事件實現的。事件就是文檔或者瀏覽器中發生的一些特定的交互瞬間。javascript

事件流

事件流描述的是頁面接受事件的順序，而IE和Netscape的瀏覽器開發團隊提出了兩種大相徑庭的，甚至是徹底相反的事件流概念。IE的事件流是事件冒泡，而Netscape的事件流是事件捕獲。html

事件冒泡

即事件開始時又最具體的元素接受，而後逐級向上傳播，現代的全部瀏覽器都支持事件冒泡，可是在具體實現上仍是有些差異的，IE5.5及更早的版本中事件冒泡會跳過<html>元素（從<body>直接到document）。而IE9, Firefox,Chrome，Safari則將事件一直冒泡到window對象。java

事件捕獲

事件捕獲的用意在於事件到達預約目標以前就捕獲它，在事件捕獲過程當中，document對象先接受到click事件，而後事件沿着DOM樹依次向下，一直傳播到事件的具體目標。web

DOM事件流

DOM2級事件(關於Dom0 Dom2 Dom3請參考這裏)規定的事件流包括三個階段：事件捕獲階段，處於目標階段，和事件冒泡階段。在Dom事件流中，實際的目標元素在捕獲階段是不會接受事件的，這意味着在捕獲階段，事件從document到<html>再到<body>後就中止了。下一個階段是「處於目標」階段，因而事件在<div>上發生，並在事件處理中被當作冒泡階段的一部分。而後冒泡階段發生，事件又傳播迴文檔。
瀏覽器

事件處理程序

事件就是用戶或者瀏覽器執行的某個動做，例如click，load，mouseover都是事件的名字。而相應某個事件的函數叫作事件處理程序。事件處理程序的名字以on開頭，例如onclick,onload。函數

HTML事件處理程序

每一個元素支持的每種事件，均可以使用一個與響應事件處理程序同名的HTML特性來制定，這個特性的值應該是可以執行的HTML代碼。this

<input type="button" value="click me" onclick="alert(clicked)"/>

Dom0級事件處理程序

經過JavaScript指定事件處理程序的傳統方式，就是將一個函數賦值給一個事件處理程序屬性。spa

var btn = document.getElementById('btn')
btn.onclick = function() {
    alert('clicked')
}

使用Dom0級事件處理程序被認爲是元素的方法，此時程序中的this會引用當前元素。同時以這種方式添加的事件處理程序會在冒泡階段被處理。code

Dom2級事件處理程序

Dom2級事件定義了兩個方法，addEventListener()和removeEventListener(),全部的Dom節點中都包含着兩個方法，它們都是接受三個參數，要處理的事件名，事件處理函數，和一個布爾值（爲true的時候表示在捕獲階段調用事件處理程序，false表示在冒泡階段調用事件處理程序）htm

var btn = document.getElementById('btn')
btn.addEventListener('click', function(){
    alert(this.value)    
}, false)

IE事件處理程序

IE中實現了與DOM中相似的兩個方法，attachEvent()和detachEvent()。這兩個方法接受相同的參數，事件處理程序名稱，事件處理程序函數，因爲在IE8之前不支持事件冒泡，因此事件處理程序函數會在冒泡階段執行。

var btn = document.getElementById('btn')
btn.attachEvent('ocClick', function() {
    alert('clicked')
})

此時在事件處理程序函數會在全局做用域中執行，也就是說此事的this是window。
同時若是爲同一個元素同時添加了兩個不一樣的事件處理程序，這些事件處理程序並非順序執行的而是以相反的順序被觸發。

事件對象event

在觸發Dom上的某個事件的時候，會產生一個事件對象event，這個對象包含着與事件有關的信息。

Dom事件對象

兼容Dom的瀏覽器會將一個event對象傳到事件處理程序中。

var btn = document.getElementById('btn')
btn.onclick = function(event) {
    alert(event.type)
}

當咱們想要阻止某個事件的特定行爲時可使用event對象的preventDefault()方法，而stopPropagation()方法則用於當即中止事件在DOM中的傳播，即取消進一步的事件冒泡或者捕獲。

IE中的事件對象

要訪問IE中的event對象有幾種不一樣的方式，在使用DOM0級方法添加事件處理程序時，event對象做爲window對像的一個屬性存在。

var btn = document.getElementById('btn')
btn.onclick = function() {
    var event = window.event
    alert(event.type)
}

可是當咱們用attachEvent的方式添加的，此時的event對象會被看成一個參數傳入事件處理程序中。當時此時也能夠經過window對象來訪問event對象。
在event對象中有一個srcElement屬性，指向事件的目標對象，由於事件的處理程序的做用域是根據指定它的方式來肯定的，因此this並不老是等於目標對象。此時爲了保險起見，建議使用srcElement

btn.onclick = function() {
    alert(window.event.srcElement) === this; //ture
}
btn.attachEvent("onclick", function(event) {
    alert(event.srcElement === this); //false
})

事件類型

Web瀏覽器中可能發生的事件類型有不少，不一樣的事件類型可能具備不一樣的信息。而DOM3級事件規定了一下幾類事件。

UI事件
UI事件指的是那些不必定與用戶操做有關的事件。好比load事件，當頁面徹底加載後在window上面觸發，當圖片加載完畢在<img>元素上觸發。以及腳本加載完畢在<script>元素上觸發。

焦點事件

focus: 在元素得到焦點的時候觸發，此事件不會冒泡。
focusin: 與foucs等價，可是會冒泡。
blur: 在失去焦點的時候觸發，不會冒泡。

鼠標與滾輪事件

客戶區座標位置：clientX,clientY
頁面座標位置：pageX,pageY
屏幕座標位置：screenX,screenY

鍵盤與文本事件

keydown:用戶按下鍵盤上任意鍵觸發，若是按住不放會重複觸發此事件。
keypress:用戶按下鍵盤上任意字符鍵觸發，若是按住不放會重複觸發此事件。
keyup: 用戶釋放鍵盤上的鍵時觸發。

變更事件在DOM結構發生變化時觸發，好比插入或者刪除節點。

相關標籤/搜索

每日一句

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