JS中addEventListener的使用示例详解

更新时间：2023年10月16日 16:17:22 作者：SwJieJie

addEventListener是JavaScript中的一个方法,用于向一个元素添加事件监听器,本文给大家介绍JS中addEventListener的使用示例代码,感兴趣的朋友跟随小编一起看看吧

1，我们使用addEventListener的时候，主要用来实现事件的绑定监听的

存在三个参数 target.addEventListener(type, listener, useCapture);

type: 表示监听事件类型的字符串。类似于click,mouseover...
listener: 用来监听处理的函数方法
useCapture: 默认是false,事件冒泡,可以设置为true为事件捕获

这里需要了解一下基本的事件流(事件捕获->事件目标->事件冒泡)
事件捕获: 事件从最顶层元素一直传递到目标元素(就是从外往内)
事件目标: 事件到达目标元素. 如果事件指定不冒泡. 那就会在这里中止
事件冒泡: 事件从目标元素父元素向上逐级传递直到最顶层元素(就是从里往外)

如下图所示显示事件捕获和事件冒泡的原型图：

2，通过实际的案列展示事件的绑定

HTML 元素p是div的子元素

<div class="div">
  <p class="p">addEventListener</p>
</div>

（1），默认形式(false)是按照事件冒泡触发

如果子元素和父元素同时使用addEventListener触发事件,在子元素事件触发的时候,父元素的事件会在子元素事件触发完成之后触发,这便是事件冒泡,从内到外先触发内层的p绑定的事件,再触发外层的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 元素点击事件触发")
}	
function divClickEvent() {
  alert("div 元素点击事件触发")
}

结果：

（2），事件捕获(true)

如果子元素和父元素同时使用addEventListener触发事件,同时设置第三个参数是true,说明事件是按照捕获的形式触发,从外到内先触发外层的div绑定的事件,再触发内层的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 元素点击事件触发")
}
function pClickEvent() {
  alert("p 元素点击事件触发")
}

结果：

（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 元素点击事件触发")
}
function pClickEvent() {
  alert("p 元素点击事件触发")
}
btn.onclick = () => {
  div.removeEventListener("click", divClickEvent)
  p.removeEventListener("click", pClickEvent)
}

结果：

（4），需要注意点！

（1）如果绑定事件的时候给addEventListener传递了第三个参数为true,那么解除绑定的时候也需要给removeEventListener传递第三个参数为true,否则解绑会失败

div.addEventListener("click", divClickEvent, true)
p.addEventListener("click", pClickEvent, true)

如果绑定的形式为上面的类型,解除绑定必须给定为true

div.removeEventListener("click", divClickEvent,true)
p.removeEventListener("click", pClickEvent,true)

（2）使用addEventListener绑定事件的时候不推荐使用箭头函数或者匿名函数,这样会出现removeEventListener无法解除绑定的问题

下面情况就会出现removeEventListener会无效化

div.addEventListener("click", () => {console.log(123, '123')})
div.removeEventListener("click", () => {console.log(123, '123')})

到此这篇关于JS中addEventListener的使用的文章就介绍到这了,更多相关js addEventListener使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
Object.defineProperty() 方法直接在一个对象上定义一个新属性，或者修改一个已经存在的属性，并返回这个对象。下面这篇文章主要给大家介绍了关于使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置的相关资料，需要的朋友可以参考下
2018-11-11
前端qrcode生成二维码安装及使用示例详解
二维码作为一种快速的信息识别工具,被广泛应用于各行各业,在互联网的时代,生成二维码已经成为了一项必需的技能,这篇文章主要给大家介绍了关于前端qrcode生成二维码安装及使用示例的相关资料,需要的朋友可以参考下
2024-08-08
javascript学习笔记之10个原生技巧
首先在这里要非常感谢无私分享作品的网友们，这些代码片段主要由网友们平时分享的作品代码里面和经常去逛网站然后查看源文件收集到的。把平时网站上常用的一些实用功能代码片段通通收集起来，方便网友们学习使用，利用好的话可以加快网友们的开发速度，提高工作效率。
2014-05-05
详解cocoscreater预制体prefab
这篇文章主要介绍了详解cocoscreater预制体prefab的作用和使用方法，对此感兴趣的同学，可以回去试一试
2021-04-04
微信小程序实现翻牌抽奖动画
这篇文章主要为大家详细介绍了微信小程序实现翻牌抽奖动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-09-09
解决LayUI数据表格复选框不居中显示的问题
今天小编就为大家分享一篇解决LayUI数据表格复选框不居中显示的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
javascript自执行函数
本文主要介绍了javascript自执行函数的相关知识。具有很好的参考价值，下面跟着小编一起来看下吧
2017-02-02
Select标签下拉列表二级联动级联实例代码
这篇文章主要介绍了Select标签下拉列表二级联动级联实例代码,需要的朋友可以参考下
2014-02-02
WEB前端开发框架Bootstrap3 VS Foundation5
WEB前端开发框架Bootstrap3 VS Foundation5,这篇文章主要介绍了Bootstrap3与Foundation5的五大区别,感兴趣的小伙伴们可以参考一下
2016-05-05
微信小程序防止重复点击按钮的示例代码
这篇文章主要介绍了微信小程序防止重复点击按钮的示例代码,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-10-10