一、什么是事件？

事件就是用戶或者瀏覽器自身執(zhí)行的某種動作。如：click ? mouserover ? mouseout ? load ?scroll等，都是事件類型的名字。

二、常見的事件回顧

窗口事件：load ?resize scroll

鼠標事件：

? ? click ?dblclick ?contextmenu ? mouseover ? mouseout ? mouseenter ? mouseleave? ? ? ? ????mousemove ?mousedown ? mouseup

表單事件：

????focus blur change ?input ?select ? reset ? submit ?

鍵盤事件：

???? keydown ? 鍵盤按下的事件

???? keyup ?鍵盤松開的事件

???? keypress 鍵盤按下并松開

???? 觸發(fā)順序：keydown --> keypress --> keyup

???? 注意：keypress不識別功能鍵，主要用來接收 ASCII 碼中的字符

????????????? ? keydown ?keyup可以識別鍵盤上所有按鍵

三、事件對象

事件對象是用來記錄事件發(fā)生時相關詳細信息的對象。如：鼠標移動事件中，獲取鼠標移動的位置 ==》 事件對象.clientX (clientX獲取鼠標點距離瀏覽器左邊的距離)；

事件對象只有事件被出發(fā)時，才會產(chǎn)生，這個事件對象只能在事件函數(shù)內(nèi)部訪問。事件函數(shù)運行結(jié)束，事件對象銷毀。

3.1 事件對象的獲取

不同瀏覽器獲取事件對象的兼容性寫法

element.on+事件類型 = function(e){

var ev = e || window.event;

}

3.2 事件對象屬性

不同的事件對象中，屬性參數(shù)不同

type ?獲取事件類型

鍵盤事件對象中屬性

keyCode ?獲取鍵盤對應的表示

key ?獲取按鍵碼

鼠標事件對象中的屬性

clientX ? 獲取鼠標點距離瀏覽器有效區(qū)域左上角的 X 方向距離

? ?clientY ? 獲取鼠標點距離瀏覽器有效區(qū)域左上角的 Y 方向距離

四、事件處理程序

響應某個事件得函數(shù)叫做事件處理程序，也叫事件處理函數(shù) 或 事件句柄。

事件處理程序介紹：

4.1 html事件處理程序: 利用html事件屬性，在標簽內(nèi)添加的js代碼為html事件處理程序

問題：耦合過高，已經(jīng)過時

4.2 DOM0級事件處理程序：在JS代碼中，通過獲取到的元素，使用 on + 事件類型 給其綁定相應的事件函數(shù)

優(yōu)勢：兼容所有瀏覽器，甚至是 IE 低版本

問題：如果給同一個元素，添加多個相同的事件時，后面覆蓋前面。

4.3 DOM2級事件處理程序：在JS代碼中，通過獲取到的元素，給這個元素注冊 addEventListener() 或 removeEventListener() ，添加和移除相關事件

優(yōu)勢：可以給同一個元素注冊多個相同的事件，依次執(zhí)行

問題：IE8及以下瀏覽器不支持DOM2級事件處理程序

4.4 IE事件處理程序：類似于DOM2級事件處理程序，提供了添加和移除相關事件的兩個方法：attachEvent() 和 detachEvent()

這兩個方法可以兼容IE8及以下瀏覽器版本，并且可以給同一個元素注冊多個同種類型的事件，執(zhí)行順序與DOM2級事件處理程序相反，從后往前執(zhí)行。

同DOM2事件句柄的移除，不能移除匿名的函數(shù)。

問題：非IE瀏覽器 ?TypeError: btn.attachEvent is not a function

IE11瀏覽器 ? ?對象不支持“attachEvent”屬性或方法

IE9 和 ?IE10瀏覽器，兼容，執(zhí)行順序，從前往后依次執(zhí)行

IE8及以下瀏覽器 ?兼容 ?執(zhí)行順序，從后往前執(zhí)行。

4.5 兼容所有瀏覽器版本: 進行瀏覽器能力檢測

看完點個贊，是對up主最大的支持......持續(xù)更新中....