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方法用于在當前節(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方法可以為當前對象的同一個事件，添加多個監(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可以為當前對象的同一事件，綁定不同的監(jiān)聽函數(shù)禽绪，先綁定的先執(zhí)行')
    }
    a.addEventListener('click', go, false)   // 為a的 click事件 綁定了 監(jiān)聽函數(shù)go蓖救，在冒泡階段觸發(fā)
    a.addEventListener('click', to, false)   // 為當前對象 同一事件 綁定不同的 監(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ù)旗吁，必須與對應的addEventListener方法的參數(shù)完全一致踩萎，而且必須在同一個元素節(jié)點，否則無效很钓。

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

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

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

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

• dispatchEvent() 在當前節(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);

// 上面代碼在當前節(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標簽的on-屬性

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

• 使用這個方法指定的監(jiān)聽函數(shù)粪滤，只會在冒泡階段觸發(fā)。
• “HTML標簽的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-屬性    方法谴返，標簽中  屬性的值 是將要執(zhí)行的代碼，而不是函數(shù)(即 執(zhí)行函數(shù)咧织，而不是定義函數(shù) )



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

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

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標簽的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()">

(三) 事件的傳播

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

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

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

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

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

• 用戶點擊網(wǎng)頁的時候匈织，瀏覽器總是假定click事件的目標節(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();   // 目標節(jié)點的標簽名
        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方法只會阻止當前監(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屬性返回一個布爾值敞掘，表示當前事件是否會冒泡。該屬性為只讀屬性贿讹，只能在新建事件時改變渐逃。除非顯式聲明，Event構(gòu)造函數(shù)生成的事件民褂，默認是不冒泡的。

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

(3) event.eventPhase

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

• phase 是階段的意思
  0哭廉，事件目前沒有發(fā)生。
1相叁，事件目前處于捕獲階段遵绰，即處于從祖先節(jié)點向目標節(jié)點的傳播過程中。該過程是從Window對象到Document節(jié)點增淹，再到HTMLHtmlElement節(jié)點椿访，直到目標節(jié)點的父節(jié)點為止。
2虑润，事件處目標階段,事件到達目標節(jié)點成玫，即target屬性指向的那個節(jié)點。
3，事件處于冒泡階段哭当，即處于從目標節(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屬性返回事件當前所在的節(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)摇零，對于鼠標事件推掸，表示鼠標按鍵在某個位置按下的次數(shù)桶蝎，比如對于dblclick事件，detail屬性的值總是2谅畅。

• 返回一個數(shù)值

(10) event.timeStamp

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

(11) isTrusted

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

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

(12) event.preventDefault()

preventDefault方法取消瀏覽器對當前事件的默認行為

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

(13) event.stopPropagation()

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

事件類型

(一) 鼠標事件

(1) click事件

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

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

(2) dblclick事件

dblclick事件當用戶在element、document郑口、window對象上鸳碧，雙擊鼠標時觸發(fā)。該事件會在mousedown犬性、mouseup瞻离、click之后觸發(fā)。

(3) mousedown事件

mousedown在按下鼠標鍵時觸發(fā)乒裆。

(4) mouseup 事件

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

(5) mousemove事件

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

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

(6) mouseover事件 和 mouseenter事件

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

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

(7) mouseout 事件磕蒲，mouseleave 事件

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

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

(8) contextmenu 事件

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

(二) 滾輪事件

(1) wheel事件

wheel事件是與鼠標滾輪相關(guān)的事件街氢，目前只有一個wheel事件。用戶滾動鼠標的滾輪睦袖，就觸發(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
（重復以上過程）
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事件：當進度事件被中止時觸發(fā)焙贷。如果發(fā)生錯誤，導致進程中止贿堰，不會觸發(fā)該事件辙芍。

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

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

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

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

• progress事件：當操作處于進度之中契吉，由傳輸?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”。

如果加載失敗妄辩，就把圖片元素的樣式設置為不顯示惑灵。

• 有時候，圖片加載會在腳本運行之前就完成眼耀，尤其是當腳本放置在網(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：返回一個布爾值尤慰，表示當前進度是否具有可計算的長度馏锡。如果為false，就表示當前進度無法測量割择。

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

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

(五) 拖拉事件

拖拉指的是值朋，用戶在某個對象上按下鼠標鍵不放叹侄，拖動它到另一個位置，然后釋放鼠標鍵昨登，將該對象放在那里趾代。

拖拉的對象有好幾種，包括Element節(jié)點丰辣、圖片撒强、鏈接、選中的文字等等笙什。在HTML網(wǎng)頁中飘哨，除了Element節(jié)點默認不可以拖拉，其他（圖片琐凭、鏈接芽隆、選中的文字）都是可以直接拖拉的。為了讓Element節(jié)點可拖拉，可以將該節(jié)點的draggable屬性設為true摆马。

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

(六) 觸摸事件

觸摸API由三個對象組成。

• Touch
  Touch對象表示觸摸點（一根手指或者一根觸摸筆）学辱，用來描述觸摸動作乘瓤，包括位置、大小策泣、形狀衙傀、壓力、目標元素等屬性萨咕。

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

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

(七) 表單事件

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

input事件當<input>茫陆、<textarea>的值發(fā)生變化時觸發(fā)金麸。此外，打開contenteditable屬性的元素盅弛，只要值發(fā)生變化钱骂，也會觸發(fā)input事件。

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

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

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

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

Change事件當<input>禀苦、<select>蔓肯、<textarea>的值發(fā)生變化時觸發(fā)。

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

(4) reset事件倡缠，submit事件

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

• (1) reset事件
  reset事件當表單重置（所有表單成員變回默認值）時觸發(fā)毡琉。
• (2) submit事件
  submit事件當表單數(shù)據(jù)向服務器提交時觸發(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對象的當前記錄發(fā)生顯式切換時觸發(fā)贞远。注意，調(diào)用history.pushState()或history.replaceState()笨忌，并不會觸發(fā)popstate事件蓝仲。該事件只在用戶在history記錄之間顯式切換時觸發(fā)，比如鼠標點擊“后退/前進”按鈕，或者在腳本中調(diào)用history.back()袱结、history.forward()亮隙、history.go()時觸發(fā)。