聊聊DOM中很重要的一個知識點：事件

事件

事件就是瀏覽器告知JavaScript程序，用戶的行爲，用戶點擊了HTML頁面中的某個按鈕或者用戶輸入用戶名或密碼等操做能夠稱爲事件

事件的類型

事件根據使用的場景不一樣，能夠分爲以下幾種：

• 依賴於設備的輸入事件：鍵盤事件和鼠標事件，這些事件都是直接和設備相關的
• 獨立於設備的輸入事件：例如click事件等，這些事件並無直接與設備相關
• 用戶界面的相關事件：用戶界面事件較高級的事件，通常多用於表單中的組件
• 狀態變化的相關事件：這些事件與用戶行爲無關，而是網絡或瀏覽器觸發的
• 特定API事件：這些事件多用於特定場景的實現，例如HTML5中提供的拖放API中的事件等
• 與錯誤處理的相關事件

註冊事件

註冊事件，就是將JavaScript函數與指定事件相關聯，被綁定的函數成爲該事件的句柄，事件被觸發時，綁定的函數會被調用
註冊事件具備如下三種方式實現：

• HTML頁面元素提供的事件屬性
• DOM標準規範中HTML相關對象提供的事件屬性
• 經過向HTML頁面中指定元素添加事件監聽器

綁定事件

• HTML頁面與JavaScript相結合實現的事件綁定,缺點是沒有實現HTM與JavaScript的分離

HTML代碼:

<button id='btn' onclike='myClick()'>點擊一下</button>

JavaScript代碼：

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

• 在JavaScript綁定事件

HTML代碼

<button id='btn'>點擊一下</button>

JavaScript代碼

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

• 用addEventListener(eventName,callback)

參數：
eventName:表示綁定的事件名稱，注意沒有on
callback:表示事件的處理函數(回調函數)
容許爲相同元素綁定相同事件屢次
html代碼

<button class='btn'>點擊</button>

JavaScript代碼

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

關於事件監聽器中的this：
當使用addEventListener()方法爲某個HTML頁面元素註冊事件的時候，this就指代註冊事件的元素
當使用attachEvent()方法爲某個HTML頁面元素註冊事件的時候，this指代的是window對象，而不是註冊事件的元素
因爲addEventListener()方法中的this與attachEvent()方法中的this的含義不一樣，咱們須要將監聽器的瀏覽器兼容方案進行優化

//對於IE 8如下版本的this優化
function bind(elem,event,callback){
    //判斷是否存在 addEventListener
    if(elem.addEventListener){
        elem.addEventListener(event,callback,false);
    }else{
        elem.attachEvent('on'+event,function(){
            //將this的指向修改成註冊事件的元素
            callback.call(elem);
        });
    }
}

移除註冊事件以及事件對象Event的用法

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

HTML代碼

<button id='d1'>按鈕</button>

JavaScript代碼

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

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

移除註冊事件

事件對象是做爲window對象的屬性出現
事件對象：事件的處理函數中接收一個參數
Event事件對象：做爲全部事件對象的父級
1.MouseEvent事件對象：表示鼠標事件
2.KeyboardEvent事件對象：表示鍵盤事件
3.TouchEvent事件對象：表示觸摸事件

IE 8如下版本瀏覽器提供的添加事件監聽器方法：事件對象是做爲window對象的屬性出現：window.event

html代碼

<button id='btn'>按鈕</button>

JavaScript代碼

var btn=document.getElementById('btn');
//第一種方法：元素.addEventListener(事件名,function(事件對象Event){});
btn.addEventListener('click',function(event){
    //獲取目標元素
    var btn=event.target;
    //阻止默認行爲
    event.preventDefault();
})

//第二鍾方法：元素名.onclick=function(事件對象Event)
btn.onclick=function(event){
//關於IE 8的阻止默認行爲的方法與其餘瀏覽器不一樣
     var e=event || window.event;
     //IE 8如下的阻止默認行爲
     e.returnValue=false;
}

獲取鼠標座標值

如下只能獲取，不能設置

• pageX,pageY:鼠標座標值相對於當前HTML頁面
• clientX,clientY:鼠標座標值相對於當前可視窗口
• screenX,screenY:鼠標座標值相對於當前屏幕的

CSS代碼

//爲了測試鼠標座標值，直接把body的高度設置2000像素
body{height:2000px}

JavaScript代碼

var html=document.documentElement;
html.addEventListener('click',function(event){
    //鼠標座標值相對於當前HTML頁面
    console.log(event.pageX,event.pageY);
    //鼠標座標值相對於當前可視區域
    console.log(event.clientX,event.clientY);
    //鼠標座標值相對於當前屏幕的
    console.log(event.screenX,event.screenY);
});

鼠標事件

click事件：表示鼠標點擊事件(鼠標左鍵)
mousedown事件:表示鼠標按鍵被按下事件
mouseup事件:表示鼠標按鍵被釋放事件
event事件對象提供了button屬性
做用：用於表示鼠標按鍵
值：0 - 表示鼠標左鍵

1 - 表示鼠標滾輪
2 - 表示鼠標右鍵

鍵盤事件

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

event事件對象code：獲取當前按鍵的名稱key：獲取當前按鍵的名稱keyCode：獲取當前按鍵對應的Unicode碼