关于JS中addEventListener的使用
关于JS中addEventListener的使用
MDN中addEventListener()说明
使用removeEventListener可以解绑事件 MDN中removeEventListener()说明
主要用来实现事件的绑定
存在三个参数 target.addEventListener(type, listener, useCapture);
type: 表示监听事件类型的字符串。类似于click,mouseover...listener: 用来监听处理的函数方法useCapture: 默认是false,事件冒泡,可以设置为true为事件捕获
<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. 注意注意注意
- 如果绑定事件的时候给
addEventListener传递了第三个参数为true,那么解除绑定的时候也需要给removeEventListener传递第三个参数为true,否则解绑会失败div.addEventListener("click", divClickEvent, true) p.addEventListener("click", pClickEvent, true)如果绑定的形式为上面的类型,解除绑定必须给定为
truediv.removeEventListener("click", divClickEvent,true) p.removeEventListener("click", pClickEvent,true) - 使用
addEventListener绑定事件的时候不推荐使用箭头函数或者匿名函数,这样会出现removeEventListener无法解除绑定的问题
下面情况就会出现removeEventListener会无效化div.addEventListener("click", () => {console.log(123, '123')}) div.removeEventListener("click", () => {console.log(123, '123')})
关于JS中addEventListener的使用相关推荐
- JS中addEventListener的使用
使用addEventListener绑定事件:MDN中addEventListener()说明 使用removeEventListener可以解绑事件: MDN中removeEventListener ...
- 第三天：js中的事件提高篇（事件流，事件对象，事件委托深层次理解）
目录 前言 一,基础部分 1.1 js监听并绑定事件 1.2 删除事件绑定 二,事件流 2.1 事件流是什么 2.2 事件流模型 2.3 捕获与冒泡具体示例 2.3.1 addEventListene ...
- [JavaScript] 探索JS中的函数秘密
函数长啥样? 把一些要重复使用的内容封装到函数内. function foo(title) {console.log(title) } foo('title') foo('dust') foo('he ...
- 后处理程序文件大小的变量_【每日一题】(17题)面试官问：JS中事件流，事件处理程序，事件对象的理解？...
关注「松宝写代码」,精选好文,每日一题 作者:saucxs | songEagle 2020,实「鼠」不易 2021,「牛」转乾坤 风劲潮涌当扬帆,任重道远须奋蹄! 一.前言 2020.12.23 立 ...
- 理解js中的this指向以及call，apply，bind方法
<script> function a(){var user = "追梦子";console.log(this.user); //undefinedconsole.lo ...
- JS中绑定事件顺序（事件冒泡与事件捕获区别）
在JS中,绑定的事件默认的执行时间是在冒泡阶段执行,而非在捕获阶段(重要),这也是为什么当父类和子类都绑定了某个事件,会先调用子类绑定的事件,后调用父类的事件.直接看下面实例 <!Doctype ...
- js自动触发onclick_每日一题JS中最基本的this情况分析
关注"前端学苑" ,坚持每天进步一点点 「~this情况分析 ~」 每日一题,希望让爱学习.思考的前端技术伙伴在一起学习.复盘.成长. 基础知识要夯实,原理源码要深入,深度广度要扩 ...
- vue中引用js_从JS中的内存管理说起 —— JS中的弱引用
点击上方"蓝字"关注本公众号 写在前面 在所有的编程语言中,我们声明一个变量时,需要系统为我们分配一块内存.当我们不再需要这个变量时,需要将内存进行回收(这个过程称之为垃圾回收). ...
- 六十二、Js中的冒泡和捕获点击事件和Vue组件绑定原生事件
2020/10/18 . 周日.今天又是奋斗的一天. @Author:Runsen @Date:2020/10/18 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是 ...
最新文章
- BCB写的简单的EXCEL合并
- 一文了解文件上传全过程（1.8w字深度解析）「前端进阶必备」
- Codeigniter 4.0-dev 版源码学习笔记之六——控制器
- 封装一个jquery库
- java重载与重写的区别+重写父类equals方法的完美实现
- ASP.NET Aries 入门开发教程2：配置出一个简单的列表页面
- ffmpeg和opencv 播放视频文件和显示器
- ios开发笔记之 视频播放收藏
- zscore标准化步骤_matlab标准化和反标准化——zscore
- 【机器学习】PAC 学习理论
- 关于账号的转换的一点经验Hive
- python服务器环境搭建_python服务器环境搭建（2）——安装相关软件
- laravel 使用路由api.php
- 2018年区块链十大发展势头
- windows 7正版才是王道
- 【Labview】G语言
- vue-router 路由传参
- CSS3新增的选择器有哪些？
- 泊松分布、高斯分布、卡方检验与noise level
- 模糊算法增强图片对比度