第JavaScript的事件監(jiān)聽(tīng)你了解嗎目錄1.什么是事件監(jiān)聽(tīng)？2.DOM0級(jí)事件監(jiān)聽(tīng)2.1)常見(jiàn)的頁(yè)面事件監(jiān)聽(tīng)2.2)常見(jiàn)的鼠標(biāo)事件監(jiān)聽(tīng)2.3)常見(jiàn)的鍵盤(pán)事件監(jiān)聽(tīng)2.4)常見(jiàn)的表單事件監(jiān)聽(tīng)3.DOM2級(jí)事件監(jiān)聽(tīng)總結(jié)

1.什么是事件監(jiān)聽(tīng)？

事件監(jiān)聽(tīng)就是計(jì)算機(jī)對(duì)事件進(jìn)行監(jiān)聽(tīng)，知道什么時(shí)候發(fā)生了這個(gè)事件，從而執(zhí)行一些寫(xiě)好的程序。

那么，它的常用方法有哪些呢？讓我們一起來(lái)看看吧！

2.DOM0級(jí)事件監(jiān)聽(tīng)

DOM0級(jí)事件監(jiān)聽(tīng)：

給元素設(shè)置它們的onxxx屬性（e.g.,onclick）

對(duì)于DOM0級(jí)事件監(jiān)聽(tīng)，它只能監(jiān)聽(tīng)冒泡階段

2.1)常見(jiàn)的頁(yè)面事件監(jiān)聽(tīng)

事件名事件描述onload當(dāng)頁(yè)面或圖像被完成加載onunload當(dāng)用戶(hù)退出頁(yè)面

2.2)常見(jiàn)的鼠標(biāo)事件監(jiān)聽(tīng)

事件名事件描述onclick當(dāng)鼠標(biāo)單擊某個(gè)元素ondblclick當(dāng)鼠標(biāo)雙擊某個(gè)元素onmousedown當(dāng)鼠標(biāo)按鍵在某個(gè)元素上按下onmouseup當(dāng)鼠標(biāo)按鍵在某個(gè)元素上松開(kāi)onmousemove當(dāng)鼠標(biāo)按鍵在某個(gè)元素上移動(dòng)onmouseenter當(dāng)鼠標(biāo)移動(dòng)到某個(gè)元素上

（進(jìn)入到某個(gè)元素區(qū)域時(shí)）onmouseleave當(dāng)鼠標(biāo)離開(kāi)某個(gè)元素

其中onmouseenter與onmouseover類(lèi)似，onmouseleave與onmouseout類(lèi)似；

它們兩者的區(qū)別：onmouseenter與onmouseleave事件不支持冒泡，另外兩個(gè)支持事件冒泡；

所以，onmouseenter與onmouseleave搭配使用，onmouseover與onmouseout搭配使用

2.3)常見(jiàn)的鍵盤(pán)事件監(jiān)聽(tīng)

事件名事件描述onkeypress當(dāng)鍵盤(pán)上的某個(gè)按鍵被按下

（系統(tǒng)按鍵無(wú)法識(shí)別e.g.，F(xiàn)1這類(lèi)的按鍵）onkeydown當(dāng)鍵盤(pán)上的某個(gè)按鍵被按下

（系統(tǒng)按鍵可以識(shí)別，并且先于onkeypress發(fā)生）onkeyup當(dāng)鍵盤(pán)上的某個(gè)按鍵被松開(kāi)

2.4)常見(jiàn)的表單事件監(jiān)聽(tīng)

事件名事件描述oninput當(dāng)用于正在修改表單域的內(nèi)容onchange當(dāng)用戶(hù)改變了表單域的內(nèi)容onfocus當(dāng)元素獲得焦點(diǎn)

（e.g.，tab鍵或鼠標(biāo)點(diǎn)擊）onblur當(dāng)元素失去焦點(diǎn)onsubmit當(dāng)表單被提交onreset當(dāng)表單被重置

3.DOM2級(jí)事件監(jiān)聽(tīng)

DOM2級(jí)事件監(jiān)聽(tīng)：

EventTarget.addEventListener()方法將指定的監(jiān)聽(tīng)器注冊(cè)到EventTarget上，當(dāng)該對(duì)象觸發(fā)指定的事件時(shí)，指定的回調(diào)函數(shù)就會(huì)被執(zhí)行。

它有著幾種寫(xiě)法，想了解別的寫(xiě)法可以看看MDN官方文檔，這里介紹的寫(xiě)法如下：

type：表示監(jiān)聽(tīng)事件類(lèi)型的字符串listener：事件監(jiān)聽(tīng)函數(shù)useCapture：當(dāng)寫(xiě)true時(shí)，進(jìn)行的是事件捕獲階段，默認(rèn)為false，事件冒泡階段

EventTarget.addEventListener(type,listener,useCapture);

對(duì)于常用的type：即把常用的DOM0級(jí)的onxxx的on去掉后就可以了，即原來(lái)的事件名。

例如：

target.addEventListener('click',()={

console.log("我被點(diǎn)擊了");

//這里第三個(gè)參數(shù)