Dom事件

事件是一種異步編程的實現(xiàn)方式，本質(zhì)上是程序各個組成部分之間的通信。DOM支持大量的事件

(一) EventTarget接口

DOM的事件操作（監(jiān)聽和觸發(fā)），都定義在EventTarget接口。Element節(jié)點、document節(jié)點和window對象，都部署了這個接口。

EventTarget接口有三個方法：

• addEventListener：綁定事件的監(jiān)聽函數(shù)
• removeEventListener：移除事件的監(jiān)聽函數(shù)
• dispatchEvent：觸發(fā)事件

(1) addEventListener() 方法

addEventListener方法用于在當(dāng)前節(jié)點或?qū)ο笊希x一個特定事件的監(jiān)聽函數(shù)。

target.addEventListener(type, listener, options);

• addEventListener方法接受三個參數(shù)。
  type：事件名稱，大小寫敏感。
  listener：監(jiān)聽函數(shù)。事件發(fā)生時，會調(diào)用該監(jiān)聽函數(shù)。
  useCapture：布爾值，表示監(jiān)聽函數(shù)是否在捕獲階段（capture）觸發(fā)，默認為false（監(jiān)聽函數(shù)只在冒泡階段被觸發(fā)）。老式瀏覽器規(guī)定該參數(shù)必寫，較新版本的瀏覽器允許該參數(shù)可選。為了保持兼容，建議總是寫上該參數(shù)。
• addEventListener方法可以為當(dāng)前對象的同一個事件，添加多個監(jiān)聽函數(shù)。這些函數(shù)按照添加順序觸發(fā)，即先添加先觸發(fā)。如果為同一個事件多次添加同一個監(jiān)聽函數(shù)，該函數(shù)只會執(zhí)行一次，多余的添加將自動被去除（不必使用removeEventListener方法手動去除）。
• addEventListener方法指定的監(jiān)聽函數(shù)，內(nèi)部的this對象總是指向觸發(fā)事件的那個節(jié)點。

window.onload = function() {
    var a = document.getElementById('a');
    var go = function() {
        console.log('這是addEventListener函數(shù)')
    }
    var to = function() {
        console.log('addEventListener可以為當(dāng)前對象的同一事件，綁定不同的監(jiān)聽函數(shù)，先綁定的先執(zhí)行')
    }
    a.addEventListener('click', go, false)   // 為a的 click事件 綁定了 監(jiān)聽函數(shù)go，在冒泡階段觸發(fā)
    a.addEventListener('click', to, false)   // 為當(dāng)前對象 同一事件 綁定不同的 監(jiān)聽函數(shù)
}


--------------------------------------------------------------------------------


function hello() {
  console.log('Hello world');
}

document.addEventListener('click', hello, false);
document.addEventListener('click', hello, false);


// 執(zhí)行上面代碼，點擊文檔只會輸出一行Hello world

• 如果希望向監(jiān)聽函數(shù)傳遞參數(shù)，可以用匿名函數(shù)包裝一下監(jiān)聽函數(shù)。

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,'每一個事件都會生成一個事件對象，作為參數(shù)，傳給監(jiān)聽函數(shù)') //比如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方法添加的事件監(jiān)聽函數(shù)。

• 參數(shù)： 與 addEventListener()方法一致 有三個參數(shù)，分別是：
  1.事件名稱，
  .2監(jiān)聽函數(shù)，
  3.布爾值是否在捕獲階段觸發(fā)，默認是false

• 注意：
  removeEventListener方法移除的監(jiān)聽函數(shù)，必須與對應(yīng)的addEventListener方法的參數(shù)完全一致，而且必須在同一個元素節(jié)點，否則無效。

(3) dispatchEvent() 方法-------------觸發(fā)事件

dispatchEvent方法在當(dāng)前節(jié)點上觸發(fā)指定事件，從而觸發(fā)監(jiān)聽函數(shù)的執(zhí)行。該方法返回一個布爾值，只要有一個監(jiān)聽函數(shù)調(diào)用了Event.preventDefault()，則返回值為false，否則為true。

• dispatchEvent方法的參數(shù)是一個Event對象的實例。

• 如果dispatchEvent方法的參數(shù)為空，或者不是一個有效的事件對象，將報錯。

• dispatchEvent() 在當(dāng)前節(jié)點上觸發(fā)指定事件------從而觸發(fā)事件上綁定的監(jiān)聽函數(shù)去執(zhí)行

• dispatchEvent() 方法返回一個布爾值，只要有一個監(jiān)聽函數(shù)調(diào)用了 Event.preventDefault()，就會返回false，否則返回true-------( 同一個事件，可以綁定多個監(jiān)聽函數(shù) )`

para.addEventListener('click', hello, false);
var event = new Event('click');
para.dispatchEvent(event);

// 上面代碼在當(dāng)前節(jié)點觸發(fā)了click事件。


----------------------------------------------------


 var c =  document.getElementById('c');
    function dispatch() {
      console.log(
        'dispatchEvent()作用是觸發(fā)事件，參數(shù)是Event對象的實例，觸發(fā)事件，從而出發(fā)事件綁定的監(jiān)聽函數(shù)'
       )
    }
    c.addEventListener('click', dispatch, false);
    var click = new Event('click');
    var d = c.dispatchEvent(click);   // dispatchEvent()事件執(zhí)行后，返回一個布爾值
    console.log(d)      // true   


    // ------(只要有一個監(jiān)聽函數(shù)調(diào)用了 Event.preventDefault()，就會返回false，否則返回true)

(二) 監(jiān)聽函數(shù)

監(jiān)聽函數(shù)（listener）是事件發(fā)生時，程序所要執(zhí)行的函數(shù)。

• DOM提供三種方法，可以用來為事件綁定監(jiān)聽函數(shù)。

(1) HTML標(biāo)簽的on-屬性

HTML語言允許在元素標(biāo)簽的屬性中，直接定義某些事件的監(jiān)聽代碼。

• 使用這個方法指定的監(jiān)聽函數(shù)，只會在冒泡階段觸發(fā)。
• “HTML標(biāo)簽的on-屬性”，違反了HTML與JavaScript代碼相分離的原則；

<body onload="doSomething()">
<div onclick="console.log('觸發(fā)事件')">

// 上面代碼為body節(jié)點的load事件、div節(jié)點的click事件，指定了監(jiān)聽函數(shù)。
// 使用這個方法指定的監(jiān)聽函數(shù)，只會在冒泡階段觸發(fā)。

• 注意，使用這種方法時，on-屬性的值是將會執(zhí)行的代碼，而不是一個函數(shù)。

<!-- 正確 -->
<body onload="doSomething()"> 



 // on-屬性    方法，標(biāo)簽中  屬性的值 是將要執(zhí)行的代碼，而不是函數(shù)(即 執(zhí)行函數(shù)，而不是定義函數(shù) )



<!-- 錯誤 -->
<body onload="doSomething">

• Element元素節(jié)點的setAttribute方法，其實設(shè)置的也是這種效果。

el.setAttribute('onclick', 'doSomething()');

等同于

<body onclick="doSomething()">    // 這里的c，大小寫都可以

(2) Element節(jié)點的事件屬性

Element節(jié)點對象有事件屬性，同樣可以指定監(jiān)聽函數(shù)。

• 使用這個方法指定的監(jiān)聽函數(shù)，只會在冒泡階段觸發(fā)。
• “Element節(jié)點的事件屬性”的缺點是，同一個事件只能定義一個監(jiān)聽函數(shù)，也就是說，如果定義兩次onclick屬性，后一次定義會覆蓋前一次。

window.onload = doSomething;

div.onclick = function(event){
  console.log('觸發(fā)事件');
};

// 使用這個方法指定的監(jiān)聽函數(shù)，只會在冒泡階段觸發(fā)。

(3) addEventListener方法

• 在上面三種方法中:

• 第一種“HTML標(biāo)簽的on-屬性”，違反了HTML與JavaScript代碼相分離的原則；

• 第二種“Element節(jié)點的事件屬性”的缺點是，同一個事件只能定義一個監(jiān)聽函數(shù)，也就是說，如果定義兩次onclick屬性，后一次定義會覆蓋前一次。

• 因此，這兩種方法都不推薦使用，除非是為了程序的兼容問題，因為所有瀏覽器都支持這兩種方法。

• addEventListener是推薦的指定監(jiān)聽函數(shù)的方法。有如下三個優(yōu)點：

• 1.可以針對同一個事件，添加多個監(jiān)聽函數(shù)。

• 2.能夠指定在哪個階段（捕獲階段還是冒泡階段）觸發(fā)回監(jiān)聽函數(shù)。

• 3.除了DOM節(jié)點，還可以部署在window、XMLHttpRequest等對象上面，等于統(tǒng)一了整個JavaScript的監(jiān)聽函數(shù)接口。

(4) 在監(jiān)聽函數(shù)中 this的指向

實際編程中，監(jiān)聽函數(shù)內(nèi)部的this對象，常常需要指向觸發(fā)事件的那個Element節(jié)點。

• addEventListener方法指定的監(jiān)聽函數(shù)，內(nèi)部的this對象總是指向觸發(fā)事件的那個節(jié)點。
• 如果將監(jiān)聽函數(shù)部署在Element節(jié)點的on-屬性上面，this不會指向觸發(fā)事件的元素節(jié)點。

// HTML代碼為
// <p id="para">Hello</p>

var id = 'doc';
var para = document.getElementById('para');

function hello(){
  console.log(this.id);  // addEventListener監(jiān)聽函數(shù)中的this，總是指向 觸發(fā)事件的那個節(jié)點
}

para.addEventListener('click', hello, false);

總結(jié)

• 總結(jié)一下，以下寫法的this對象都指向Element節(jié)點。

// 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()">

(三) 事件的傳播

當(dāng)一個事件發(fā)生以后，它會在不同的DOM節(jié)點之間傳播（propagation）。這種傳播分成三個階段：

• 第一階段：從window對象傳導(dǎo)到目標(biāo)節(jié)點，稱為“捕獲階段”（capture phase）。

• 第二階段：在目標(biāo)節(jié)點上觸發(fā)，稱為“目標(biāo)階段”（target phase）。

• 第三階段：從目標(biāo)節(jié)點傳導(dǎo)回window對象，稱為“冒泡階段”（bubbling phase）。

這種三階段的傳播模型，會使得一個事件在多個節(jié)點上觸發(fā)。比如，假設(shè)點擊<div>之中嵌套一個<p>節(jié)點。( phase是階段的意思 )---------( bubbling是冒泡的意思 )

• 用戶點擊網(wǎng)頁的時候，瀏覽器總是假定click事件的目標(biāo)節(jié)點，就是點擊位置的嵌套最深的那個節(jié)點（嵌套在<div>節(jié)點的<p>節(jié)點）。所以，<p>節(jié)點的捕獲階段和冒泡階段，都會顯示為target階段。
• 事件傳播的最上層對象是window，接著依次是document，html（document.documentElement）和body（document.body）。
• 也就是說，如果<body>元素中有一個<div>元素，點擊該元素。事件的傳播順序:
  (1) 在捕獲階段依次為window、document、html、body、div。
  (2) 在冒泡階段依次為div、body、html、document、window。

(四) 事件的代理

由于事件會在 冒泡階段 向上傳播到父節(jié)點，因此可以把子節(jié)點的監(jiān)聽函數(shù)定義在父節(jié)點上，由父節(jié)點的監(jiān)聽函數(shù)統(tǒng)一處理多個子元素的事件。這種方法叫做事件的代理（delegation）。

• 這樣做的好處是，只要定義一個監(jiān)聽函數(shù)，就能處理多個子節(jié)點的事件，而且以后再添加子節(jié)點，監(jiān)聽函數(shù)依然有效。

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();   // 目標(biāo)節(jié)點的標(biāo)簽名
        if( tagname === 'p') {
            console.log('這是p元素')
        } else if( tagname === 'button') {
            console.log('這是button')
        } else {
            console.log('這是div父元素')
        }
    };
    e.addEventListener('click', func)

stopPropagation方法

• 如果希望事件到某個節(jié)點為止，不再傳播，可以使用事件對象stopPropagation方法。

p.addEventListener('click', function(event) {
  event.stopPropagation();    // stopPropagation() 阻止冒泡
});

// 用上面的代碼以后，click事件在冒泡階段到達<p>節(jié)點以后，就不再向上（父節(jié)點的方向）傳播了。

stopImmediatePropagation方法

• 但是，stopPropagation方法只會阻止當(dāng)前監(jiān)聽函數(shù)的傳播，不會阻止<p>節(jié)點上的其他click事件的監(jiān)聽函數(shù)。如果想要不再觸發(fā)那些監(jiān)聽函數(shù)，可以使用stopImmediatePropagation方法。

p.addEventListener('click', function(event) {
 event.stopImmediatePropagation();
});

p.addEventListener('click', function(event) {
 // 不會被觸發(fā)
});

(5) Event對象

事件發(fā)生以后，會生成一個事件對象，作為參數(shù)傳給監(jiān)聽函數(shù)。瀏覽器原生提供一個Event對象，所有的事件都是這個對象的實例，或者說繼承了Event.prototype對象。

• 事件發(fā)生后，會生成一個事件對象，作為傳給監(jiān)聽函數(shù)的參數(shù)
• 所有事件都是Event對象的實例，即 ( 所有事件都繼承了Event.prototype對象 )
• Event對象本身就是一個構(gòu)造函數(shù)，可以用來生成新的實例。

(1) Event構(gòu)造函數(shù)接受兩個參數(shù)：

• 第一個參數(shù)是字符串，表示事件的名稱；

• 第二個參數(shù)是一個對象，表示事件對象的配置。該參數(shù)可以有以下兩個屬性。
  bubbles：布爾值，可選，默認為false，表示事件對象是否冒泡。
  cancelable：布爾值，可選，默認為false，表示事件是否可以被取消。

event = new Event(typeArg, eventInit);

var ev = new Event(
  'look',
  {
    'bubbles': true,
    'cancelable': false
  }
);
document.dispatchEvent(ev);


// 上面代碼新建一個look事件實例，然后使用dispatchEvent方法觸發(fā)該事件。

例二：

para.addEventListener('click', hello, false);
var event = new Event('click');
para.dispatchEvent(event);   // 觸發(fā)事件

例三：

window.onload = function () {
    var a = document.getElementById('a');
    var go = function(x,e) {
        console.log(x)
        console.log(e,'每一個事件都會生成一個事件對象，作為參數(shù)，傳給監(jiān)聽函數(shù)，')
        console.log(e.bubbles,'e.bubbles')   // 在監(jiān)聽函數(shù)中，獲取是否冒泡，只讀
    };
    a.addEventListener('click', function(e){ go('wang',e) }, false)
    var b = new Event('click',{bubbles: true});  // 在創(chuàng)建click方法實例的時候，定義是否冒泡
    var c = a.dispatchEvent(b);

    console.log(c,'dispatchEvent()方法返回布爾值')
};

(2) event.bubbles

bubbles屬性返回一個布爾值，表示當(dāng)前事件是否會冒泡。該屬性為只讀屬性，只能在新建事件時改變。除非顯式聲明，Event構(gòu)造函數(shù)生成的事件，默認是不冒泡的。

• bubbles是冒泡的意思 (bubbling)
• event.bubsles 返回布爾值，表示當(dāng)前事件是否會冒泡，默認是false
• event.bubbles 是只讀屬性

(3) event.eventPhase

eventPhase屬性返回一個整數(shù)值，表示事件目前所處的階段。

• phase 是階段的意思
  0，事件目前沒有發(fā)生。
1，事件目前處于捕獲階段，即處于從祖先節(jié)點向目標(biāo)節(jié)點的傳播過程中。該過程是從Window對象到Document節(jié)點，再到HTMLHtmlElement節(jié)點，直到目標(biāo)節(jié)點的父節(jié)點為止。
2，事件處目標(biāo)階段,事件到達目標(biāo)節(jié)點，即target屬性指向的那個節(jié)點。
3，事件處于冒泡階段，即處于從目標(biāo)節(jié)點向祖先節(jié)點的反向傳播過程中。該過程是從父節(jié)點一直到Window對象。只有bubbles屬性為true時，這個階段才可能發(fā)生。--------3階段，即冒泡階段只有bubbles為true才有可能會發(fā)生

(4) event.cancelable

cancelable屬性返回一個布爾值，表示事件是否可以取消。該屬性為只讀屬性，只能在新建事件時改變。除非顯式聲明，Event構(gòu)造函數(shù)生成的事件，默認是不可以取消的。

• 如果要取消某個事件，需要在這個事件上面調(diào)用preventDefault方法，這會阻止瀏覽器對某種事件部署的默認行為。

(5) defaultPrevented

defaultPrevented屬性返回一個布爾值，表示該事件是否調(diào)用過preventDefault方法。

(6) currentTarget

currentTarget屬性返回事件當(dāng)前所在的節(jié)點，即正在執(zhí)行的監(jiān)聽函數(shù)所綁定的那個節(jié)點。
作為比較，target屬性返回事件發(fā)生的節(jié)點。如果監(jiān)聽函數(shù)在捕獲階段和冒泡階段觸發(fā)，那么這兩個屬性返回的值是不一樣的。

• currentTarget 返回的是正在執(zhí)行的監(jiān)聽函數(shù)所綁定的那個節(jié)點。

(7) target

target屬性返回觸發(fā)事件的那個節(jié)點，即事件最初發(fā)生的節(jié)點。如果監(jiān)聽函數(shù)不在該節(jié)點觸發(fā)，那么它與currentTarget屬性返回的值是不一樣的。

• target 返回觸發(fā)事件的那個節(jié)點

  
  
  事件代理中的 currentTarget 和 target

(8) event.type

type屬性返回一個字符串，表示事件類型，大小寫敏感。

• event.type 返回的是字符串，表示事件類型：比如click事件，mouseover事件等
• 大小寫敏感

(9) event.detail

detail屬性返回一個數(shù)值，表示事件的某種信息。具體含義與事件類型有關(guān)，對于鼠標(biāo)事件，表示鼠標(biāo)按鍵在某個位置按下的次數(shù)，比如對于dblclick事件，detail屬性的值總是2。

• 返回一個數(shù)值

(10) event.timeStamp

timeStamp屬性返回一個毫秒時間戳，表示事件發(fā)生的時間。

(11) isTrusted

isTrusted屬性返回一個布爾值，表示該事件是否為真實用戶觸發(fā)。

• 用戶觸發(fā)的事件返回true，腳本觸發(fā)的事件返回false。

(12) event.preventDefault()

preventDefault方法取消瀏覽器對當(dāng)前事件的默認行為

• event.preventDefault方法生效的前提是：事件對象的cancelable屬性為true，如果為false，則調(diào)用該方法沒有任何效果。
• 該方法不會阻止事件的進一步傳播（stopPropagation方法可用于這個目的）。只要在事件的傳播過程中（捕獲階段、目標(biāo)階段、冒泡階段皆可），使用了preventDefault方法，該事件的默認方法就不會執(zhí)行。

(13) event.stopPropagation()

stopPropagation方法阻止事件在 DOM 中繼續(xù)傳播，防止再觸發(fā)定義在別的節(jié)點上的監(jiān)聽函數(shù)，但是不包括在當(dāng)前節(jié)點上新定義的事件監(jiān)聽函數(shù)。

事件類型

(一) 鼠標(biāo)事件

(1) click事件

當(dāng)用戶在Element節(jié)點、document節(jié)點、window對象上單擊鼠標(biāo)（或者按下回車鍵）時，click事件觸發(fā)。

• “鼠標(biāo)單擊”定義為，用戶在同一個位置完成一次mousedown動作和mouseup動作。它們的觸發(fā)順序是：mousedown首先觸發(fā)，mouseup接著觸發(fā)，click最后觸發(fā)。

(2) dblclick事件

dblclick事件當(dāng)用戶在element、document、window對象上，雙擊鼠標(biāo)時觸發(fā)。該事件會在mousedown、mouseup、click之后觸發(fā)。

(3) mousedown事件

mousedown在按下鼠標(biāo)鍵時觸發(fā)。

(4) mouseup 事件

mouseup在釋放按下的鼠標(biāo)鍵時觸發(fā)。

(5) mousemove事件

mousemove事件當(dāng)鼠標(biāo)在一個節(jié)點內(nèi)部移動時觸發(fā)。當(dāng)鼠標(biāo)持續(xù)移動時，該事件會連續(xù)觸發(fā)。為了避免性能問題，建議對該事件的監(jiān)聽函數(shù)做一些限定，比如限定一段時間內(nèi)只能運行一次代碼。

• mousemove事件在節(jié)點內(nèi)部移動時觸發(fā)。
• 當(dāng)鼠標(biāo)持續(xù)移動時，會連續(xù)觸發(fā)
• 性能優(yōu)化，對監(jiān)聽函數(shù)做限制，如：一定時間內(nèi)只能運行一次代碼

(6) mouseover事件 和 mouseenter事件

mouseover事件和mouseenter事件，都是鼠標(biāo)進入一個節(jié)點時觸發(fā)。

• 兩者的區(qū)別是：
• mouseenter事件只觸發(fā)一次，
• 而只要鼠標(biāo)在節(jié)點內(nèi)部移動，mouseover事件會在 (子節(jié)點) 上觸發(fā)多次。!!! ( 重要 )

(7) mouseout 事件，mouseleave 事件

mouseout事件和mouseleave事件，都是鼠標(biāo)離開一個節(jié)點時觸發(fā)。

• 兩者的區(qū)別是:
• mouseout事件會冒泡，mouseleave事件不會。
• 子節(jié)點的mouseout事件會冒泡到父節(jié)點，進而觸發(fā)父節(jié)點的mouseout事件。
• mouseleave事件就沒有這種效果，所以離開子節(jié)點時，不會觸發(fā)父節(jié)點的監(jiān)聽函數(shù)。

(8) contextmenu 事件

contextmenu事件在一個節(jié)點上點擊鼠標(biāo)右鍵時觸發(fā)，或者按下“上下文菜單”鍵時觸發(fā)。

(二) 滾輪事件

(1) wheel事件

wheel事件是與鼠標(biāo)滾輪相關(guān)的事件，目前只有一個wheel事件。用戶滾動鼠標(biāo)的滾輪，就觸發(fā)這個事件。

• wheel是滾輪的意思
• wheel事件除了繼承了MouseEvent、UIEvent、Event 的屬性，WheelEvent 還有幾個自己的屬性。
  deltaX：返回一個數(shù)值，表示滾輪的水平滾動量。
deltaY：返回一個數(shù)值，表示滾輪的垂直滾動量。
deltaZ：返回一個數(shù)值，表示滾輪的Z軸滾動量。
deltaMode：返回一個數(shù)值，表示滾動的單位，適用于上面三個屬性。0表示像素，1表示行，2表示頁。
• 瀏覽器提供一個WheelEvent構(gòu)造函數(shù)，可以用來生成滾輪事件的實例。它接受兩個參數(shù)，第一個是事件名稱，第二個是配置對象。

var syntheticEvent = new WheelEvent("syntheticWheel", {"deltaX": 4, "deltaMode": 0});

(三) 鍵盤事件

(1)鍵盤事件用來描述鍵盤行為，主要有keydown、keypress、keyup三個事件。

• keydown：按下鍵盤時觸發(fā)該事件。

• keypress：只要按下的鍵并非Ctrl、Alt、Shift和Meta，就接著觸發(fā)keypress事件。

• keyup：松開鍵盤時觸發(fā)該事件。

(2) 如果用戶一直按鍵不松開，就會連續(xù)觸發(fā)鍵盤事件，觸發(fā)的順序如下。

keydown
keypress
keydown
keypress
（重復(fù)以上過程）
keyup

(3) 鍵盤事件使用 KeyboardEvent 對象表示，該對象繼承了UIEvent和MouseEvent對象。瀏覽器提供KeyboardEvent構(gòu)造函數(shù)，用來新建鍵盤事件的實例。

(4) altKey，ctrlKey，metaKey，shiftKey

• altKey：alt鍵
• ctrlKey：ctrl鍵
• metaKey：meta鍵（mac系統(tǒng)是一個四瓣的小花，windows系統(tǒng)是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事件，觸發(fā)keyDoen監(jiān)聽函數(shù)

(5) key 屬性

key屬性返回一個字符串，表示按下的鍵名。

• 如果同時按下一個控制鍵和一個符號鍵，則返回符號鍵的鍵名。
  比如，按下Ctrl+a，則返回a。

var inpu = document.getElementById('input');
    var keyDown = function (e) {
        console.log(e.key,'e.key返回一個字符串，表示按下的鍵名')
    }  // keypress事件的監(jiān)聽函數(shù)中，傳入的參數(shù)keyboardEvent，沒有ctrl,alt,meta,shift屬性

inpu.addEventListener('keydown', keyDown, false);  // keydown事件，觸發(fā)keyDoen監(jiān)聽函數(shù)

(四) 進度事件

進度事件用來描述一個事件進展的過程，比如XMLHttpRequest對象發(fā)出的HTTP請求的過程、<img>、<audio>、<video>、<style>、<link>加載外部資源的過程。下載和上傳都會發(fā)生進度事件。
abort事件：當(dāng)進度事件被中止時觸發(fā)。如果發(fā)生錯誤，導(dǎo)致進程中止，不會觸發(fā)該事件。

• error事件：由于錯誤導(dǎo)致資源無法加載時觸發(fā)。

• load事件：進度成功結(jié)束時觸發(fā)。

• oadstart事件：進度開始時觸發(fā)。

• loadend事件：進度停止時觸發(fā)，發(fā)生順序排在error事件\abort事件\load事件后面。

• progress事件：當(dāng)操作處于進度之中，由傳輸?shù)臄?shù)據(jù)塊不斷觸發(fā)。

• timeout事件：進度超過限時觸發(fā)。

image.addEventListener('load', function(event) {
  image.classList.add('finished');
});

image.addEventListener('error', function(event) {
  image.style.display = 'none';
});


上面代碼在圖片元素加載完成后，為圖片元素的class屬性添加一個值“finished”。

如果加載失敗，就把圖片元素的樣式設(shè)置為不顯示。

• 有時候，圖片加載會在腳本運行之前就完成，尤其是當(dāng)腳本放置在網(wǎng)頁底部的時候，因此有可能使得load和error事件的監(jiān)聽函數(shù)根本不會被執(zhí)行。所以，比較可靠的方式，是用complete屬性先判斷一下是否加載完成。

• 由于DOM沒有提供像complete屬性那樣的，判斷是否發(fā)生加載錯誤的屬性，所以error事件的監(jiān)聽函數(shù)最好放在img元素的HTML屬性中，這樣才能保證發(fā)生加載錯誤時百分之百會執(zhí)行。

<img src="/wrong/url" onerror="this.style.display='none';" />

這樣寫能保證，發(fā)生加載錯誤時，onerror事件百分百會執(zhí)行

(1) 進度事件使用ProgressEvent對象表示

ProgressEvent實例有以下屬性。

• lengthComputable：返回一個布爾值，表示當(dāng)前進度是否具有可計算的長度。如果為false，就表示當(dāng)前進度無法測量。

• total：返回一個數(shù)值，表示當(dāng)前進度的總長度。如果是通過HTTP下載某個資源，表示內(nèi)容本身的長度，不含HTTP頭部的長度。如果lengthComputable屬性為false，則total屬性就無法取得正確的值。

• loaded：返回一個數(shù)值，表示當(dāng)前進度已經(jīng)完成的數(shù)量。該屬性除以total屬性，就可以得到目前進度的百分比。

(五) 拖拉事件

拖拉指的是，用戶在某個對象上按下鼠標(biāo)鍵不放，拖動它到另一個位置，然后釋放鼠標(biāo)鍵，將該對象放在那里。

拖拉的對象有好幾種，包括Element節(jié)點、圖片、鏈接、選中的文字等等。在HTML網(wǎng)頁中，除了Element節(jié)點默認不可以拖拉，其他（圖片、鏈接、選中的文字）都是可以直接拖拉的。為了讓Element節(jié)點可拖拉，可以將該節(jié)點的draggable屬性設(shè)為true。

• Element節(jié)點默認不可以拖拉，為了讓Element節(jié)點默認可以拖拉，要將 draggable屬性設(shè)為true
• draggable屬性可用于任何Element節(jié)點，但是圖片（img元素）和鏈接（a元素）不加這個屬性，就可以拖拉。對于它們，用到這個屬性的時候，往往是將其設(shè)為false，防止拖拉。
• 注意，一旦某個Element節(jié)點的draggable屬性設(shè)為true，就無法再用鼠標(biāo)選中該節(jié)點內(nèi)部的文字或子節(jié)點了。

(六) 觸摸事件

觸摸API由三個對象組成。

• Touch
  Touch對象表示觸摸點（一根手指或者一根觸摸筆），用來描述觸摸動作，包括位置、大小、形狀、壓力、目標(biāo)元素等屬性。

• TouchList
  有時，觸摸動作由多個觸摸點（多根手指或者多根觸摸筆）組成，多個觸摸點的集合由TouchList對象表示。

• TouchEvent
  TouchEvent對象代表由觸摸引發(fā)的事件，只有觸摸屏才會引發(fā)這一類事件。

(七) 表單事件

(1)input事件 ----------- 輸入時觸發(fā)

input事件當(dāng)<input>、<textarea>的值發(fā)生變化時觸發(fā)。此外，打開contenteditable屬性的元素，只要值發(fā)生變化，也會觸發(fā)input事件。

input事件的一個特點，就是會連續(xù)觸發(fā)，比如用戶每次按下一次按鍵，就會觸發(fā)一次input事件。

(2) select事件 ----------- 選中里面值時 觸發(fā)

select事件當(dāng)在<input>、<textarea>中選中文本時觸發(fā)。

(3) Change事件 -------- 值改變且失去焦點時 觸發(fā)，分下面三種情況

Change事件當(dāng)<input>、<select>、<textarea>的值發(fā)生變化時觸發(fā)。

• 它與input事件的最大不同，就是不會連續(xù)觸發(fā)，只有當(dāng)全部修改完成時才會觸發(fā)。
• 而且input事件必然會引發(fā)change事件。具體來說，分成以下幾種情況。
  激活單選框（radio）或復(fù)選框（checkbox）時觸發(fā)。
用戶提交時觸發(fā)。比如，從下列列表（select）完成選擇，在日期或文件輸入框完成選擇。
當(dāng)文本框或textarea元素的值發(fā)生改變，并且喪失焦點時觸發(fā)

(4) reset事件，submit事件

以下事件發(fā)生在表單對象上，而不是發(fā)生在表單的成員上。

• (1) reset事件
  reset事件當(dāng)表單重置（所有表單成員變回默認值）時觸發(fā)。
• (2) submit事件
  submit事件當(dāng)表單數(shù)據(jù)向服務(wù)器提交時觸發(fā)。注意，submit事件的發(fā)生對象是form元素，而不是button元素（即使它的類型是submit），因為提交的是表單，而不是按鈕。

(八) 文檔事件

(1) hashchange事件，popstate事件

以下事件與文檔的URL變化相關(guān)。

(1) hashchange事件

hashchange事件在URL的hash部分（即#號后面的部分，包括#號）發(fā)生變化時觸發(fā)。如果老式瀏覽器不支持該屬性，可以通過定期檢查location.hash屬性，模擬該事件

• hashchange事件對象除了繼承Event對象，還有oldURL屬性和newURL屬性，分別表示變化前后的URL。

(2) popstate事件

popstate事件在瀏覽器的history對象的當(dāng)前記錄發(fā)生顯式切換時觸發(fā)。注意，調(diào)用history.pushState()或history.replaceState()，并不會觸發(fā)popstate事件。該事件只在用戶在history記錄之間顯式切換時觸發(fā)，比如鼠標(biāo)點擊“后退/前進”按鈕，或者在腳本中調(diào)用history.back()、history.forward()、history.go()時觸發(fā)。