亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

JS中addEventListener的使用示例詳解

 更新時間：2023年10月16日 16:17:22   作者：SwJieJie  
addEventListener是JavaScript中的一個方法,用于向一個元素添加事件監(jiān)聽器,本文給大家介紹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,事件冒泡,可以設(shè)置為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ā)")
}

結(jié)果：

（2）， 事件捕獲(true)

如果子元素和父元素同時使用addEventListener觸發(fā)事件,同時設(shè)置第三個參數(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ā)")
}

 結(jié)果：

（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)
}

結(jié)果：

（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')})

到此這篇關(guān)于JS中addEventListener的使用的文章就介紹到這了,更多相關(guān)js addEventListener使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論