摘要：事件事件就是瀏覽器告知程序，用戶的行為，用戶點(diǎn)擊了頁(yè)面中的某個(gè)按鈕或者用戶輸入用戶名或密碼等操作可以稱為事件事件的類型事件根據(jù)使用的場(chǎng)景不同，可以分為如下幾種依賴于設(shè)備的輸入事件鍵盤事件和鼠標(biāo)事件，這些事件都是直接和設(shè)備相關(guān)的獨(dú)立于設(shè)備的輸

事件就是瀏覽器告知JavaScript程序，用戶的行為，用戶點(diǎn)擊了HTML頁(yè)面中的某個(gè)按鈕或者用戶輸入用戶名或密碼等操作可以稱為事件

事件根據(jù)使用的場(chǎng)景不同，可以分為如下幾種：

依賴于設(shè)備的輸入事件：鍵盤事件和鼠標(biāo)事件，這些事件都是直接和設(shè)備相關(guān)的

獨(dú)立于設(shè)備的輸入事件：例如click事件等，這些事件并沒(méi)有直接與設(shè)備相關(guān)

用戶界面的相關(guān)事件：用戶界面事件較高級(jí)的事件，一般多用于表單中的組件

狀態(tài)變化的相關(guān)事件：這些事件與用戶行為無(wú)關(guān)，而是網(wǎng)絡(luò)或?yàn)g覽器觸發(fā)的

特定API事件：這些事件多用于特定場(chǎng)景的實(shí)現(xiàn)，例如HTML5中提供的拖放API中的事件等

與錯(cuò)誤處理的相關(guān)事件

注冊(cè)事件，就是將JavaScript函數(shù)與指定事件相關(guān)聯(lián)，被綁定的函數(shù)成為該事件的句柄，事件被觸發(fā)時(shí)，綁定的函數(shù)會(huì)被調(diào)用
注冊(cè)事件具有以下三種方式實(shí)現(xiàn)：

HTML頁(yè)面元素提供的事件屬性

DOM標(biāo)準(zhǔn)規(guī)范中HTML相關(guān)對(duì)象提供的事件屬性

通過(guò)向HTML頁(yè)面中指定元素添加事件監(jiān)聽(tīng)器

HTML頁(yè)面與JavaScript相結(jié)合實(shí)現(xiàn)的事件綁定,缺點(diǎn)是沒(méi)有實(shí)現(xiàn)HTM與JavaScript的分離

HTML代碼:

點(diǎn)擊一下

JavaScript代碼：

var btn=document.getElementById("btn");
function myClick(){
    console.log("this is event");
}

在JavaScript綁定事件

HTML代碼

   點(diǎn)擊一下

JavaScript代碼

var btn=document.getElementById("btn");
btn.onclick=function(){
    console.log("this is event");
}

用addEventListener(eventName,callback)

參數(shù)：
eventName:表示綁定的事件名稱，注意沒(méi)有on
callback:表示事件的處理函數(shù)(回調(diào)函數(shù))
允許為相同元素綁定相同事件多次
html代碼

點(diǎn)擊

JavaScript代碼

var btn=document.getElementsByClassName("btn")[0];
btn.addEventListener("click",function(){
    console.log("this is event");
});

關(guān)于事件監(jiān)聽(tīng)器中的this：
當(dāng)使用addEventListener()方法為某個(gè)HTML頁(yè)面元素注冊(cè)事件的時(shí)候，this就指代注冊(cè)事件的元素
當(dāng)使用attachEvent()方法為某個(gè)HTML頁(yè)面元素注冊(cè)事件的時(shí)候，this指代的是window對(duì)象，而不是注冊(cè)事件的元素
由于addEventListener()方法中的this與attachEvent()方法中的this的含義不同，我們需要將監(jiān)聽(tīng)器的瀏覽器兼容方案進(jìn)行優(yōu)化

//對(duì)于IE 8以下版本的this優(yōu)化
function bind(elem,event,callback){
    //判斷是否存在 addEventListener
    if(elem.addEventListener){
        elem.addEventListener(event,callback,false);
    }else{
        elem.attachEvent("on"+event,function(){
            //將this的指向修改為注冊(cè)事件的元素
            callback.call(elem);
        });
    }
}

removeEventListener(eventName,functionName)方法
參數(shù):
eventName:表示移除的事件名稱
functionName:表示事件的處理函數(shù)
必須是注冊(cè)事件的處理函數(shù)(同一個(gè)函數(shù))

HTML代碼

    按鈕

JavaScript代碼

var btn=document.getElementById("d1");
function myClick(){
    console.log("this is event");
}
btn.addEventListener("click",myClick);
//元素.removeEventListener(事件名稱,處理函數(shù));
btn.removeEventListener("click",myClick);

/*IE 8以下版本瀏覽器不支持removeEventListener()方法
detachEvent(eventName,functionName)
eventName:表示移除的事件名稱(必須有on)
functionName:表示事件的處理函數(shù)
必須是注冊(cè)事件時(shí)處理函數(shù)(同一個(gè)函數(shù))*/

事件對(duì)象是作為window對(duì)象的屬性出現(xiàn)
事件對(duì)象：事件的處理函數(shù)中接收一個(gè)參數(shù)
Event事件對(duì)象：作為所有事件對(duì)象的父級(jí)
1.MouseEvent事件對(duì)象：表示鼠標(biāo)事件
2.KeyboardEvent事件對(duì)象：表示鍵盤事件
3.TouchEvent事件對(duì)象：表示觸摸事件

IE 8以下版本瀏覽器提供的添加事件監(jiān)聽(tīng)器方法：事件對(duì)象是作為window對(duì)象的屬性出現(xiàn)：window.event

html代碼

按鈕

JavaScript代碼

var btn=document.getElementById("btn");
//第一種方法：元素.addEventListener(事件名,function(事件對(duì)象Event){});
btn.addEventListener("click",function(event){
    //獲取目標(biāo)元素
    var btn=event.target;
    //阻止默認(rèn)行為
    event.preventDefault();
})

//第二鐘方法：元素名.onclick=function(事件對(duì)象Event)
btn.onclick=function(event){
//關(guān)于IE 8的阻止默認(rèn)行為的方法與其他瀏覽器不同
     var e=event || window.event;
     //IE 8以下的阻止默認(rèn)行為
     e.returnValue=false;
}

以下只能獲取，不能設(shè)置

pageX,pageY:鼠標(biāo)坐標(biāo)值相對(duì)于當(dāng)前HTML頁(yè)面

clientX,clientY:鼠標(biāo)坐標(biāo)值相對(duì)于當(dāng)前可視窗口

screenX,screenY:鼠標(biāo)坐標(biāo)值相對(duì)于當(dāng)前屏幕的

CSS代碼

//為了測(cè)試鼠標(biāo)坐標(biāo)值，直接把body的高度設(shè)置2000像素
body{height:2000px}

JavaScript代碼

var html=document.documentElement;
html.addEventListener("click",function(event){
    //鼠標(biāo)坐標(biāo)值相對(duì)于當(dāng)前HTML頁(yè)面
    console.log(event.pageX,event.pageY);
    //鼠標(biāo)坐標(biāo)值相對(duì)于當(dāng)前可視區(qū)域
    console.log(event.clientX,event.clientY);
    //鼠標(biāo)坐標(biāo)值相對(duì)于當(dāng)前屏幕的
    console.log(event.screenX,event.screenY);
});

click事件：表示鼠標(biāo)點(diǎn)擊事件(鼠標(biāo)左鍵)
mousedown事件:表示鼠標(biāo)按鍵被按下事件
mouseup事件:表示鼠標(biāo)按鍵被釋放事件
event事件對(duì)象提供了button屬性
作用：用于表示鼠標(biāo)按鍵
值：0 - 表示鼠標(biāo)左鍵

1 - 表示鼠標(biāo)滾輪
2 - 表示鼠標(biāo)右鍵

keydown事件：表示鍵盤按鍵被按下
keyup事件：表示鍵盤按鍵被釋放
keypress事件：表示鍵盤按鍵按一下

event事件對(duì)象
code：獲取當(dāng)前按鍵的名稱
key：獲取當(dāng)前按鍵的名稱
keyCode：獲取當(dāng)前按鍵對(duì)應(yīng)的Unicode碼