????????addEventListener()?方法用于給元素添加監(jiān)聽(tīng)事件，同一個(gè)元素可以重復(fù)添加，并且不會(huì)覆蓋之前相同事件，用removeEventListener() 方法來(lái)移除事件。

使用方法：

    element.addEventListener("click",function(e)=>{
            console.log("點(diǎn)擊事件監(jiān)聽(tīng)");
            console.log("點(diǎn)擊返回的參數(shù)"：e);
    })

傳遞參數(shù)（包含三個(gè)參數(shù)）：

1.事件名稱（String類型）

例如點(diǎn)擊事件click，鼠標(biāo)按下mousedown（和元素綁定事件類似，但不需要on）

2.監(jiān)聽(tīng)事件所需要執(zhí)行的函數(shù)（void）

如function（event）{ } 或者箭頭函數(shù)的形式 （event）=> {? ?}

?3.觸發(fā)類型（boolean，選填）

• true - 事件在捕獲階段執(zhí)行
• false - 事件在冒泡階段執(zhí)行，默認(rèn)是false

監(jiān)聽(tīng)事件種類（轉(zhuǎn)載學(xué)習(xí)）

• 鼠標(biāo)事件

click? ? ? ? ? ? ? ? ? ? ? ? ? 當(dāng)用戶點(diǎn)擊某個(gè)對(duì)象時(shí)調(diào)用的事件句柄
contextmenu? ? ? ? ? ? 在用戶點(diǎn)擊鼠標(biāo)右鍵打開(kāi)上下文菜單時(shí)觸發(fā)
dblclick? ? ? ? ? ? ? ? ? ? ?當(dāng)用戶雙擊某個(gè)對(duì)象時(shí)調(diào)用的事件句柄
mousedown? ? ? ? ? ? ? 鼠標(biāo)按鈕被按下
mouseenter? ? ? ? ? ? ? 當(dāng)鼠標(biāo)指針移動(dòng)到元素上時(shí)觸發(fā)
mouseleave? ? ? ? ? ? ? 當(dāng)鼠標(biāo)指針移出元素時(shí)觸發(fā)
mousemove? ? ? ? ? ? ? 鼠標(biāo)被移動(dòng)
mouseover? ? ? ? ? ? ? ? 鼠標(biāo)移到某元素之上
mouseout? ? ? ? ? ? ? ? ? 鼠標(biāo)從某元素移開(kāi)
mouseup? ? ? ? ? ? ? ? ? ?鼠標(biāo)按鍵被松開(kāi)

• 鍵盤(pán)事件

keydown? ? ? ? ? ? ?????????某個(gè)鍵盤(pán)按鍵被按下
keypress ????????????????????某個(gè)鍵盤(pán)按鍵被按下并松開(kāi)
keyup? ? ? ? ? ? ? ? ? ? ? ? ? 某個(gè)鍵盤(pán)按鍵被松開(kāi)

• 框架/對(duì)象（Frame/Object）事件?

abort? ? ? ? ? ? ? ? ? ? ? ? ? ??? ? 圖像的加載被中斷
beforeunload?? ? ? ? ? ? ? ? ?該事件在即將離開(kāi)頁(yè)面（刷新或關(guān)閉）時(shí)觸發(fā)
error? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?在加載文檔或圖像時(shí)發(fā)生錯(cuò)誤
hashchange? ? ? ? ? ? ? ? ? ? 該事件在當(dāng)前 URL 的錨部分發(fā)生修改時(shí)觸發(fā)
load? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 一張頁(yè)面或一幅圖像完成加載
pageshow? ? ? ? ? ? ? ? ? ? ? ? 該事件在用戶訪問(wèn)頁(yè)面時(shí)觸發(fā)
pagehide? ? ? ? ? ? ? ? ? ? ? ? ? 該事件在用戶離開(kāi)當(dāng)前網(wǎng)頁(yè)跳轉(zhuǎn)到另外一個(gè)頁(yè)面時(shí)觸發(fā)
resize?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?窗口或框架被重新調(diào)整大小
scroll? ?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 當(dāng)文檔被滾動(dòng)時(shí)發(fā)生的事件
unload?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 用戶退出頁(yè)面

• 表單事件?

blur? ? ? ? ? ? ? ? ? ? ?元素失去焦點(diǎn)時(shí)觸發(fā)
change? ? ? ? ? ? ? ?該事件在表單元素的內(nèi)容改變時(shí)觸發(fā)
focus? ? ? ? ? ? ? ? ? 元素獲取焦點(diǎn)時(shí)觸發(fā)
focusin? ? ? ? ? ? ? ?元素即將獲取焦點(diǎn)是觸發(fā)
focusout? ? ? ? ? ? ?元素即將失去焦點(diǎn)是觸發(fā)
input? ? ? ? ? ? ? ? ? ?元素獲取用戶輸入是觸發(fā)
reset? ? ? ? ? ? ? ? ? ?表單重置時(shí)觸發(fā)
search? ? ? ? ? ? ? ? ?用戶向搜索域輸入文本時(shí)觸發(fā)

• 剪貼板事件?

copy? ? ????????????????該事件在用戶拷貝元素內(nèi)容時(shí)觸發(fā)
cut ??????????????????????該事件在用戶剪切元素內(nèi)容時(shí)觸發(fā)
paste? ? ? ? ? ? ? ? ?? 該事件在用戶粘貼元素內(nèi)容時(shí)觸發(fā)

• 打印事件

afterprint ????????????????該事件在頁(yè)面已經(jīng)開(kāi)始打印，或者打印窗口已經(jīng)關(guān)閉時(shí)觸發(fā)
beforeprint ?????????????該事件在頁(yè)面即將開(kāi)始打印時(shí)觸發(fā)

• 多媒體（Media）事件?

abort ? ? ? ? ? ? ? ? ? ? ? ? ? ?事件在視頻/音頻（audio/video）終止加載時(shí)觸發(fā)
canplay? ? ? ? ? ? ? ? ? ? ? ? 事件在用戶可以開(kāi)始播放視頻/音頻（audio/video）時(shí)觸發(fā)
canplaythrough? ? ? ? ? 事件在視頻/音頻（audio/video）可以正常播放且無(wú)需停頓和緩沖時(shí)觸發(fā)
durationchange? ? ? ? ? 事件在視頻/音頻（audio/video）的時(shí)長(zhǎng)發(fā)生變化時(shí)觸發(fā)
emptied? ? ? ? ? ? ? ? ? ? ? ?當(dāng)前播放列表為空時(shí)候觸發(fā)
ended? ? ? ? ? ? ? ? ? ? ? ? ??事件在視頻/音頻（audio/video）播放結(jié)束時(shí)觸發(fā)
error? ? ? ? ? ? ? ? ? ? ? ? ? ? 事件在視頻/音頻（audio/video）數(shù)據(jù)加載期間發(fā)生錯(cuò)誤時(shí)觸發(fā)
loadeddata? ? ? ? ? ? ? ? ? 事件在瀏覽器加載視頻/音頻（audio/video）當(dāng)前幀時(shí)觸發(fā)觸發(fā)
loadedmetadata? ? ? ? ?事件在指定視頻/音頻（audio/video）的元數(shù)據(jù)加載后觸發(fā)
loadstart? ? ? ? ? ? ? ? ? ? ?事件在瀏覽器開(kāi)始尋找指定視頻/音頻（audio/video）觸發(fā)
pause? ? ? ? ? ? ? ? ? ? ? ? ??事件在視頻/音頻（audio/video）暫停時(shí)觸發(fā)
play? ? ? ? ? ? ? ? ? ? ? ? ? ? ?事件在視頻/音頻（audio/video）開(kāi)始播放時(shí)觸發(fā)
playing? ? ? ? ? ? ? ? ? ? ? ?事件在視頻/音頻（audio/video）暫?；蛘咴诰彌_后準(zhǔn)備重新開(kāi)始播放時(shí)觸發(fā)
progress? ? ? ? ? ? ? ? ? ??事件在瀏覽器下載指定的視頻/音頻（audio/video）時(shí)觸發(fā)
ratechange? ? ? ? ? ? ? ? 事件在視頻/音頻（audio/video）的播放速度發(fā)送改變時(shí)觸發(fā)
seeked? ? ? ? ? ? ? ? ? ? ? ?事件在用戶重新定位視頻/音頻（audio/video）的播放位置后觸發(fā)
seeking? ? ? ? ? ? ? ? ? ? ? 事件在用戶開(kāi)始重新定位視頻/音頻（audio/video）時(shí)觸發(fā)
stalled? ? ? ? ? ? ? ? ? ? ? ? 事件在瀏覽器獲取媒體數(shù)據(jù)，但媒體數(shù)據(jù)不可用時(shí)觸發(fā)
suspend? ? ? ? ? ? ? ? ? ? ?事件在瀏覽器讀取媒體數(shù)據(jù)中止時(shí)觸發(fā)
timeupdate? ? ? ? ? ? ? ? 事件在當(dāng)前的播放位置發(fā)送改變時(shí)觸發(fā)
volumechange? ? ? ? ? 事件在音量發(fā)生改變時(shí)觸發(fā)
waiting? ? ? ? ? ? ? ? ? ? ? ?事件在視頻由于要播放下一幀而需要緩沖時(shí)觸發(fā)

• 動(dòng)畫(huà)事件?

animationend ????????????????該事件在 CSS 動(dòng)畫(huà)結(jié)束播放時(shí)觸發(fā)
animationiteration ????????該事件在 CSS 動(dòng)畫(huà)重復(fù)播放時(shí)觸發(fā)
animationstart? ? ? ? ? ? ? ??該事件在 CSS 動(dòng)畫(huà)開(kāi)始播放時(shí)觸發(fā)

• 過(guò)渡事件

?transitionend? ? ? ? ? ? ? ? ?該事件在 CSS 完成過(guò)渡后觸發(fā)

• 其他事件?

message? ? ? ? ? ? ? ? ? ? 該事件通過(guò)或者從對(duì)象(WebSocket, Web Worker, Event Source 或者子 frame 或父窗口)接收到消息時(shí)觸發(fā)
online? ? ? ? ? ? ? ? ? ? ? ? ?該事件在瀏覽器開(kāi)始在線工作時(shí)觸發(fā)。
offline? ? ? ? ? ? ? ? ? ? ? ? ?該事件在瀏覽器開(kāi)始離線工作時(shí)觸發(fā)。
popstate? ? ? ? ? ? ? ? ? ? ?該事件在窗口的瀏覽歷史（history 對(duì)象）發(fā)生改變時(shí)觸發(fā)。
show? ? ? ? ? ? ? ? ? ? ? ? ? ?該事件在窗口顯示時(shí)觸發(fā)（onshow方法也僅僅在fireFox瀏覽器支持）

• 元素在上下文菜單顯示時(shí)觸發(fā)?

?storage? ? ? ? ? ? ? ? ? 該事件在 Web Storage(HTML 5 Web 存儲(chǔ))更新時(shí)觸發(fā)（僅限于在控制臺(tái)里修改、新增和刪除，代碼里修改是監(jiān)聽(tīng)不到的）
?toggle? ? ? ? ? ? ? ? ? ? 該事件在用戶打開(kāi)或關(guān)閉 元素時(shí)觸發(fā)
?wheel? ? ? ? ? ? ? ? ? ? ?該事件在鼠標(biāo)滾輪在元素上下滾動(dòng)時(shí)觸發(fā)文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-723945.html

到了這里，關(guān)于addEventListener（）參數(shù)及事件匯總的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！