事件名	事件描述
onclick	當(dāng)鼠標(biāo)單擊某個(gè)元素
ondblclick	當(dāng)鼠標(biāo)雙擊某個(gè)元素
onmousedown	當(dāng)鼠標(biāo)按鍵在某個(gè)元素上按下
onmouseup	當(dāng)鼠標(biāo)按鍵在某個(gè)元素上松開
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)離開某個(gè)元素

其中onmouseenter與onmouseover類似，onmouseleave與onmouseout類似；

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

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

事件名	事件描述
onkeypress	當(dāng)鍵盤上的某個(gè)按鍵被按下（系統(tǒng)按鍵無法識(shí)別 e.g.，F(xiàn)1 這類的按鍵）
onkeydown	當(dāng)鍵盤上的某個(gè)按鍵被按下（系統(tǒng)按鍵可以識(shí)別，并且先于`onkeypress`發(fā)生）
onkeyup	當(dāng)鍵盤上的某個(gè)按鍵被松開

事件名	事件描述
oninput	當(dāng)用于正在修改表單域的內(nèi)容
onchange	當(dāng)用戶改變了表單域的內(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)聽

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

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

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

EventTarget.addEventListener(type, listener, useCapture);

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

例如：

target.addEventListener('click', () => {
	console.log("我被點(diǎn)擊了");
});
// 這里第三個(gè)參數(shù)沒寫，默認(rèn)監(jiān)聽冒泡階段，如果要監(jiān)聽捕獲階段，寫上 true

總結(jié)

本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!

您可能感興趣的文章: