事件處理是讓頁面實現(xiàn)交互的關(guān)鍵楔绞，沒有事件用戶就只能瞪眼看啦～
js的事件真的好多能扒，涵蓋了你能想到的任何操作（當(dāng)然如眼球追蹤等還沒有實現(xiàn)哈）迟郎，這里我們講解寫我們經(jīng)常會用到的。

在搞事件的時候必要的是先搞一個頁面透硝，不然去操作誰呢 .0.0.

//我們在搞js狰闪，誰會去理會html，能用js的絕對不假手其他語言濒生，就是這么任性
//其實是復(fù)習(xí)一下前面的DOM(不小心說了實話埋泵，裝逼被揭穿 ..0.0..)
//首先我們創(chuàng)建一個div標(biāo)簽(其實這一個標(biāo)簽就夠我們折騰了～)
document.body.innerHTML = '<div></div>';
var _divBox = document.getElementsByTagName('div')[0];
_divBox.style.width = '100px';
_divBox.style.height = '100px';
_divBox.style.background = '#FF0000';
//這時候我們運行頁面就會看到左上角有一個寬100 高100的紅色正方形，如果你的函數(shù)章節(jié)已經(jīng)看過了甜攀，最好把它封裝成一個函數(shù)秋泄，下面會有類似的例子。

• onload頁面加載時觸發(fā)

window.onload=function(){
   //TODO something
}
//當(dāng)頁面加載的時候觸發(fā)规阀。比如ajax數(shù)據(jù)的加載恒序，樣式定義（有些像素運算問題），都需要在加載時搞定

• onclick 點擊事件（這個是最多的）
  • 第一種是對象屬性直接定義

//如果你上面的代碼也是寫的這么裸谁撼，你可以接著寫了
_divBox.onclick=function(){
    _divBox.style.background = '#00FF00';
    //this.style.background = '#00FF00';
}
//上面的倆行代碼是一個意思歧胁，其中注釋中的this是指針，指向當(dāng)前對象厉碟，這個在進階篇的面向?qū)ο笾袝v到喊巍。
//回到瀏覽器，打開頁面箍鼓，點擊這個紅色div會發(fā)現(xiàn)它變成了綠色崭参。

• 第二種是監(jiān)聽addEventListener (attachEvent是IE搞的，感覺IE開發(fā)太另類款咖，喜歡的自己去查查何暮，很簡單)

_divBox.addEventListener('click',function(){
    this.style.background = '#00FF00';
});
//這里我們會看到相同的效果

  * 這兩個函數(shù)雖然有著相同的效果，但是不同的铐殃，當(dāng)我們使用第一種方法為_divBox的onclick屬性設(shè)定幾個不同的函數(shù)時海洼，只會執(zhí)行最后一個。而addEventListener則會將幾個函數(shù)都執(zhí)行一遍富腊。
  * 另外坏逢，addEventListener有3個參數(shù)(有一個默認(rèn)的useCapture為false，我們就省略了);當(dāng)為false時采用冒泡模式監(jiān)聽赘被，為true則是capture/捕獲模式監(jiān)聽是整，我們用下面的代碼來看看區(qū)別:

//我們需要先在_divBox里面繼續(xù)插入一個p標(biāo)簽
_divBox.innderHTML='<p>this is para</p>';
//然后定義兩個監(jiān)聽事件
_divBox.addEventListener('click',function(){
    console.log('div');
},true);
document.getElementsByTagName('p')[0].addEventListener('click',function(){
   console.log('p');
},true);
//在瀏覽器中運行，點擊div會看到輸出div民假，點擊p會看到先輸出div然后輸出p浮入，這就是capture捕獲模式，從外到內(nèi)
//
//
_divBox.addEventListener('click',function(){
    console.log('div');
},false);
document.getElementsByTagName('p')[0].addEventListener('click',function(){
   console.log('p');
},false);
//在瀏覽器中運行阳欲，點擊div會看到輸出div舵盈，點擊p會看到先輸出p然后輸出div陋率，這就是冒泡模式，從內(nèi)到外
//也是addEventListener的默認(rèn)模式秽晚，通常情況下也是用默認(rèn)冒泡模式瓦糟，使用capture模式的情況比較少。

• onmousedown-onmouseup 鼠標(biāo)左鍵按下和抬起事件赴蝇，他倆是onclick的前奏菩浙，執(zhí)行完這倆家伙才會搭理click事件，同樣會有屬性和監(jiān)聽兩種方式句伶，這里就用屬性舉例吧～

_divBox.onmousedown = function(){
    this.style.background = '#0000FF';
}
_divBox.onmouseup = function(){
    this.style.background = '#FF0000';
}

• onkeypress 當(dāng)按鍵按下并且被松開觸發(fā)

//這個例子比較簡單劲蜻，不用我們借用任何元素
window.onkeypress = function(){
    console.log(e.key);
}
//打開調(diào)試工具，隨便按鍵盤考余，看看效果吧

• 其他事件事件

• 說了這么多為元素綁定事件楚堤，如果想把某個元素的事件剔除了疫蔓，那就用到這個屬性了removeEventListener

//這里需要對上面的addEventListener做個修改
function handle(){
    this.style.background='#0000ff';
}
_divBox.addEventListener('click',handle);
_divBox.removeEventListener('click',handle);
//如果沒有handle的話是沒有辦法實現(xiàn)的。身冬。衅胀。總是感覺有點坑

• 當(dāng)然酥筝，還有另一個方法就是

//該方法僅適用于通過屬性定義的滚躯，想移除用addEventListener綁定的還是用上面的方法吧
_divBox.onclick=function(){
 //TODO
}
_divBox.onclick=null;//是不是很簡單