addEventListener() 方法

addEventListener() 方法用于向指定元素添加監(jiān)聽事件。且同一元素目標可重復(fù)添加钠导,不會覆蓋之前相同事件慕趴,配合 removeEventListener() 方法來移除事件。

使用方法:

document.getElementById(元素id).addEventListener("click", function(){
    console.log("目標元素被點擊了");
});

參數(shù)說明:有三個參數(shù)

  • 參數(shù)一急膀、事件名稱画株,字符串辆飘,必填。
    事件名稱不用帶 "on" 前綴谓传,點擊事件直接寫:"click"蜈项,鍵盤放開事件寫:"keyup"

  • 參數(shù)二、執(zhí)行函數(shù)续挟,必填紧卒。
    填寫需要執(zhí)行的函數(shù),如:function(){代碼...}
    當目標對象事件觸發(fā)時诗祸,會傳入一個事件參數(shù)跑芳,參數(shù)名稱可自定義,如填寫event直颅,不需要也可不填寫博个。 事件對象的類型取決于特定的事件。例如功偿, “click” 事件屬于 MouseEvent(鼠標事件) 對象盆佣。
    function(event){console.log(event)}

  • 參數(shù)三、觸發(fā)類型,布爾型共耍,可空
    true - 事件在捕獲階段執(zhí)行
    false - 事件在冒泡階段執(zhí)行虑灰,默認是false
    參數(shù)一的事件類型大致有如下選擇(轉(zhuǎn)載)

  • 鼠標事件
    click 當用戶點擊某個對象時調(diào)用的事件句柄。
    contextmenu 在用戶點擊鼠標右鍵打開上下文菜單時觸發(fā)
    dblclick 當用戶雙擊某個對象時調(diào)用的事件句柄痹兜。
    mousedown 鼠標按鈕被按下穆咐。
    mouseenter 當鼠標指針移動到元素上時觸發(fā)。
    mouseleave 當鼠標指針移出元素時觸發(fā)
    mousemove 鼠標被移動佃蚜。
    mouseover 鼠標移到某元素之上。
    mouseout 鼠標從某元素移開着绊。
    mouseup 鼠標按鍵被松開谐算。

  • 鍵盤事件
    屬性 描述 DOM
    keydown 某個鍵盤按鍵被按下。
    keypress 某個鍵盤按鍵被按下并松開归露。
    keyup 某個鍵盤按鍵被松開洲脂。

  • 框架/對象(Frame/Object)事件
    abort 圖像的加載被中斷。 ( )
    beforeunload 該事件在即將離開頁面(刷新或關(guān)閉)時觸發(fā)
    error 在加載文檔或圖像時發(fā)生錯誤剧包。 ( , 和 )
    hashchange 該事件在當前 URL 的錨部分發(fā)生修改時觸發(fā)恐锦。
    load 一張頁面或一幅圖像完成加載。
    pageshow 該事件在用戶訪問頁面時觸發(fā)
    pagehide 該事件在用戶離開當前網(wǎng)頁跳轉(zhuǎn)到另外一個頁面時觸發(fā)
    resize 窗口或框架被重新調(diào)整大小疆液。
    scroll 當文檔被滾動時發(fā)生的事件一铅。
    unload 用戶退出頁面。 ( 和 )

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

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

  • 打印事件
    afterprint 該事件在頁面已經(jīng)開始打印堕油,或者打印窗口已經(jīng)關(guān)閉時觸發(fā)
    beforeprint 該事件在頁面即將開始打印時觸發(fā)

  • 拖動事件
    drag 該事件在元素正在拖動時觸發(fā)
    dragend 該事件在用戶完成元素的拖動時觸發(fā)
    dragenter 該事件在拖動的元素進入放置目標時觸發(fā)
    dragleave 該事件在拖動元素離開放置目標時觸發(fā)
    dragover 該事件在拖動元素在放置目標上時觸發(fā)
    dragstart 該事件在用戶開始拖動元素時觸發(fā)
    drop 該事件在拖動元素放置在目標區(qū)域時觸發(fā)

  • 多媒體(Media)事件
    abort 事件在視頻/音頻(audio/video)終止加載時觸發(fā)潘飘。
    canplay 事件在用戶可以開始播放視頻/音頻(audio/video)時觸發(fā)。
    canplaythrough 事件在視頻/音頻(audio/video)可以正常播放且無需停頓和緩沖時觸發(fā)掉缺。
    durationchange 事件在視頻/音頻(audio/video)的時長發(fā)生變化時觸發(fā)卜录。
    emptied The event occurs when the current playlist is empty
    ended 事件在視頻/音頻(audio/video)播放結(jié)束時觸發(fā)。
    error 事件在視頻/音頻(audio/video)數(shù)據(jù)加載期間發(fā)生錯誤時觸發(fā)眶明。
    loadeddata 事件在瀏覽器加載視頻/音頻(audio/video)當前幀時觸發(fā)觸發(fā)艰毒。
    loadedmetadata 事件在指定視頻/音頻(audio/video)的元數(shù)據(jù)加載后觸發(fā)。
    loadstart 事件在瀏覽器開始尋找指定視頻/音頻(audio/video)觸發(fā)搜囱。
    pause 事件在視頻/音頻(audio/video)暫停時觸發(fā)丑瞧。
    play 事件在視頻/音頻(audio/video)開始播放時觸發(fā)。
    playing 事件在視頻/音頻(audio/video)暫褪裰猓或者在緩沖后準備重新開始播放時觸發(fā)嗦篱。
    progress 事件在瀏覽器下載指定的視頻/音頻(audio/video)時觸發(fā)。
    ratechange 事件在視頻/音頻(audio/video)的播放速度發(fā)送改變時觸發(fā)幌缝。
    seeked 事件在用戶重新定位視頻/音頻(audio/video)的播放位置后觸發(fā)灸促。
    seeking 事件在用戶開始重新定位視頻/音頻(audio/video)時觸發(fā)。
    stalled 事件在瀏覽器獲取媒體數(shù)據(jù),但媒體數(shù)據(jù)不可用時觸發(fā)浴栽。
    suspend 事件在瀏覽器讀取媒體數(shù)據(jù)中止時觸發(fā)荒叼。
    timeupdate 事件在當前的播放位置發(fā)送改變時觸發(fā)。
    volumechange 事件在音量發(fā)生改變時觸發(fā)典鸡。
    waiting 事件在視頻由于要播放下一幀而需要緩沖時觸發(fā)被廓。

  • 動畫事件
    animationend 該事件在 CSS 動畫結(jié)束播放時觸發(fā)
    animationiteration 該事件在 CSS 動畫重復(fù)播放時觸發(fā)
    animationstart 該事件在 CSS 動畫開始播放時觸發(fā)

  • 過渡事件
    transitionend 該事件在 CSS 完成過渡后觸發(fā)。

  • 其他事件
    message 該事件通過或者從對象(WebSocket, Web Worker, Event Source 或者子 frame 或父窗口)接收到消息時觸發(fā)
    online 該事件在瀏覽器開始在線工作時觸發(fā)
    offline 該事件在瀏覽器開始離線工作時觸發(fā)
    popstate 該事件在窗口的瀏覽歷史(history 對象)發(fā)生改變時觸發(fā)
    show 該事件當元素在上下文菜單顯示時觸發(fā)
    storage 該事件在 Web Storage(HTML 5 Web 存儲)更新時觸發(fā)
    toggle 該事件在用戶打開或關(guān)閉 元素時觸發(fā)
    wheel 該事件在鼠標滾輪在元素上下滾動時觸發(fā)

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末萝玷,一起剝皮案震驚了整個濱河市嫁乘,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌球碉,老刑警劉巖蜓斧,帶你破解...
    沈念sama閱讀 216,496評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異睁冬,居然都是意外死亡挎春,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,407評論 3 392
  • 文/潘曉璐 我一進店門豆拨,熙熙樓的掌柜王于貴愁眉苦臉地迎上來直奋,“玉大人,你說我怎么就攤上這事施禾〗畔撸” “怎么了?”我有些...
    開封第一講書人閱讀 162,632評論 0 353
  • 文/不壞的土叔 我叫張陵弥搞,是天一觀的道長殉挽。 經(jīng)常有香客問我,道長拓巧,這世上最難降的妖魔是什么斯碌? 我笑而不...
    開封第一講書人閱讀 58,180評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮肛度,結(jié)果婚禮上傻唾,老公的妹妹穿的比我還像新娘。我一直安慰自己承耿,他們只是感情好冠骄,可當我...
    茶點故事閱讀 67,198評論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著加袋,像睡著了一般凛辣。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上职烧,一...
    開封第一講書人閱讀 51,165評論 1 299
  • 那天扁誓,我揣著相機與錄音防泵,去河邊找鬼。 笑死蝗敢,一個胖子當著我的面吹牛捷泞,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播寿谴,決...
    沈念sama閱讀 40,052評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼锁右,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了讶泰?” 一聲冷哼從身側(cè)響起咏瑟,我...
    開封第一講書人閱讀 38,910評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎痪署,沒想到半個月后码泞,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,324評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡惠桃,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,542評論 2 332
  • 正文 我和宋清朗相戀三年浦夷,在試婚紗的時候發(fā)現(xiàn)自己被綠了辖试。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片辜王。...
    茶點故事閱讀 39,711評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖罐孝,靈堂內(nèi)的尸體忽然破棺而出呐馆,到底是詐尸還是另有隱情,我是刑警寧澤莲兢,帶...
    沈念sama閱讀 35,424評論 5 343
  • 正文 年R本政府宣布汹来,位于F島的核電站,受9級特大地震影響改艇,放射性物質(zhì)發(fā)生泄漏收班。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,017評論 3 326
  • 文/蒙蒙 一谒兄、第九天 我趴在偏房一處隱蔽的房頂上張望摔桦。 院中可真熱鬧,春花似錦承疲、人聲如沸邻耕。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,668評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽兄世。三九已至,卻和暖如春啊研,著一層夾襖步出監(jiān)牢的瞬間御滩,已是汗流浹背鸥拧。 一陣腳步聲響...
    開封第一講書人閱讀 32,823評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留艾恼,地道東北人住涉。 一個月前我還...
    沈念sama閱讀 47,722評論 2 368
  • 正文 我出身青樓,卻偏偏與公主長得像钠绍,于是被迫代替她去往敵國和親舆声。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,611評論 2 353

推薦閱讀更多精彩內(nèi)容