JS中addEventListener的使用示例詳解
使用addEventListener綁定事件：MDN中addEventListener()說明
使用removeEventListener可以解綁事件： MDN中removeEventListener()說明
1，我們使用addEventListener的時候，主要用來實現(xiàn)事件的綁定監(jiān)聽的
存在三個參數(shù) target.addEventListener(type, listener, useCapture);
type: 表示監(jiān)聽事件類型的字符串。類似于click,mouseover...
listener: 用來監(jiān)聽處理的函數(shù)方法
useCapture: 默認是false,事件冒泡,可以設置為true為事件捕獲
這里需要了解一下基本的事件流(事件捕獲->事件目標->事件冒泡)
事件捕獲: 事件從最頂層元素一直傳遞到目標元素(就是從外往內(nèi))
事件目標: 事件到達目標元素. 如果事件指定不冒泡. 那就會在這里中止
事件冒泡: 事件從目標元素父元素向上逐級傳遞直到最頂層元素(就是從里往外)
如下圖所示顯示事件捕獲和事件冒泡的原型圖：
2，通過實際的案列展示事件的綁定
HTML 元素p是div的子元素
<div class="div"> <p class="p">addEventListener</p> </div>
（1）， 默認形式(false)是按照事件冒泡觸發(fā)
如果子元素和父元素同時使用addEventListener觸發(fā)事件,在子元素事件觸發(fā)的時候,父元素的事件會在子元素事件觸發(fā)完成之后觸發(fā),這便是事件冒泡,從內(nèi)到外先觸發(fā)內(nèi)層的p綁定的事件,再觸發(fā)外層的div綁定的事件
const div = document.querySelector(".div")
const p = document.querySelector(".p")
p.addEventListener("click", pClickEvent, false)
div.addEventListener("click", divClickEvent, false)
function pClickEvent() {
alert("p 元素點擊事件觸發(fā)")
}
function divClickEvent() {
alert("div 元素點擊事件觸發(fā)")
}結果：
（2）， 事件捕獲(true)
如果子元素和父元素同時使用addEventListener觸發(fā)事件,同時設置第三個參數(shù)是true,說明事件是按照捕獲的形式觸發(fā),從外到內(nèi)先觸發(fā)外層的div綁定的事件,再觸發(fā)內(nèi)層的p綁定的事件
const div = document.querySelector(".div")
const p = document.querySelector(".p")
p.addEventListener("click", pClickEvent, true)
div.addEventListener("click", divClickEvent, true)
function divClickEvent() {
alert("div 元素點擊事件觸發(fā)")
}
function pClickEvent() {
alert("p 元素點擊事件觸發(fā)")
}結果：
（3）. 解除綁定(removeEventListener)
const div = document.querySelector(".div")
const p = document.querySelector(".p")
const btn = document.querySelector(".btn")
div.addEventListener("click", divClickEvent)
p.addEventListener("click", pClickEvent)
function divClickEvent() {
alert("div 元素點擊事件觸發(fā)")
}
function pClickEvent() {
alert("p 元素點擊事件觸發(fā)")
}
btn.onclick = () => {
div.removeEventListener("click", divClickEvent)
p.removeEventListener("click", pClickEvent)
}結果：
（4）， 需要注意點！
（1）如果綁定事件的時候給addEventListener傳遞了第三個參數(shù)為true,那么解除綁定的時候也需要給removeEventListener傳遞第三個參數(shù)為true,否則解綁會失敗
div.addEventListener("click", divClickEvent, true)
p.addEventListener("click", pClickEvent, true)
如果綁定的形式為上面的類型,解除綁定必須給定為true
div.removeEventListener("click", divClickEvent,true)
p.removeEventListener("click", pClickEvent,true)（2）使用addEventListener綁定事件的時候不推薦使用箭頭函數(shù)或者匿名函數(shù),這樣會出現(xiàn)removeEventListener無法解除綁定的問題
下面情況就會出現(xiàn)removeEventListener會無效化
div.addEventListener("click", () => {console.log(123, '123')})
div.removeEventListener("click", () => {console.log(123, '123')})到此這篇關于JS中addEventListener的使用的文章就介紹到這了,更多相關js addEventListener使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
- js中onclick和addEventListener的區(qū)別
- js中onclick和addEventListener的區(qū)別詳解
- Js on及addEventListener原理用法區(qū)別解析
- js中addEventListener()與removeEventListener()用法案例分析
- JavaScript使用addEventListener添加事件監(jiān)聽用法實例
- window.addEventListener來解決讓一個js事件執(zhí)行多個函數(shù)
- JS在IE和FF下attachEvent,addEventListener學習筆記
- Javascript 的addEventListener()及attachEvent()區(qū)別分析
相關文章
這篇文章主要介紹了JavaScript中的繼承方式詳解,本文講解了js繼承的概念、原型式繼承與類式繼承、原型鏈繼承、類式繼承、組合繼承、原型式繼承等內(nèi)容,需要的朋友可以參考下2015-02-02
用于改變方法的當前對象2008-11-11
下面小編就為大家?guī)硪黄猨s字符串傳引用的兩種方式(必看)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
使用純JS實現(xiàn)checkbox的框選效果(鼠標拖拽多選)
最近做了一個用js實現(xiàn)鼠標拖拽多選的功能,于是整理了一下思路,寫了一個小demo,下面這篇文章主要給大家介紹了關于如何使用純JS實現(xiàn)checkbox的框選效果(鼠標拖拽多選)的相關資料,需要的朋友可以參考下2022-05-05
JS腳本根據(jù)手機瀏覽器類型跳轉WAP手機網(wǎng)站（兩種方式）
隨著移動互聯(lián)網(wǎng)的不斷普及，企業(yè)的網(wǎng)絡宣傳不僅只局限在PC端，還要在移動端發(fā)展。我們在自己的網(wǎng)站做了WAP手機完整之后，如果有用戶通過手機訪問我們的企業(yè)頂級域名網(wǎng)站，就要判斷跳轉到專為的WAP網(wǎng)站，下面小編給大家整理有關手機瀏覽器跳轉WAP手機網(wǎng)站的相關內(nèi)容2015-08-08
數(shù)組對象自帶方法想必大家都有所耳聞,今天主要為大家介紹下JavaScript中數(shù)組對象的那些自帶方法，感興趣的你可以參考下哈，希望可以幫助你學習javascript2013-03-03
這篇文章主要介紹了javascript下拉列表菜單的實現(xiàn)方法，采用table來封裝，我們知道table的每一行寫滿了之后，下一行會自動添加，文章末尾附有完整的代碼，需要的朋友可以參考下2015-11-11
小程序相信大家應該都很熟悉了,對于小程序的整個運營的方法,很多運營都比較關注,今天希望通過一個思維導圖,這篇文章主要給大家介紹了關于小程序中如何繪制思維導圖的相關資料,需要的朋友可以參考下2021-10-10
在js中自一些字符串刪除空格的功能，本文章來介紹了字符串刪除功能加利用正則快速替換字符串中所有空格實現(xiàn)代碼2012-10-10
這篇文章主要介紹了js如何獲取元素下面所有的li，有哪些方法,需要的朋友可以參考下2014-04-04