JavaScript 事件代理需要注意的地方


Posted in Javascript onSeptember 08, 2020

我们知道,如果给 form 里面的 button 元素绑定事件,需要考虑它是否会触发 form 的 submit 行为。除此之外,其它场合给 button 元素绑定事件,你几乎不用担心这个事件会有什么非预期的附加效果,很自然地会这样写事件处理代码:

var button = document.querySelector('button')
button.addEventListener('click', function (e) {
 console.log('点击了按钮')
})

你之所以放心这么写,是因为这个 button 元素没有使用事件代理,即没有代理任何子元素的事件。

事件代理的意思是,你要为一个元素绑定事件,但你不是直接把事件绑定到这个元素自己身上,而是绑定到这个元素的父元素上。当子元素的某个事件(比如点击事件)触发时,它的父元素相同的事件也会触发(我们常说的事件冒泡),此时我们说父元素代理了子元素的事件。

举个例子,比如一个 button 元素中包含一个齿轮图标:

<button>
 <svg>
 <use xlink:href="#gear" rel="external nofollow" ></use>
 </svg>
</button>

当用户点击齿轮图标,必然要触发 click 事件,但你并不会直接绑定事件到 svg 或 use 元素上,而是绑定到它们的父元素 button 上。即:

document.querySelector('button').addEventListener('click', function (e) {
 console.log('点击了按钮')
})

这种情况,我们可以说,button 元素代理了它的所有子元素的 click 事件。

但是,出现这种事件代理的情况时,我们就得小心了。

为了更直观地说明问题,我们把“父”元素上升到顶层的 document 元素:

document.documentElement.addEventListener('click', function (e) {
 console.log('我被点击了')
})

只要网页中任意一个位置被点击了,都会触发绑定在 document 元素上的点击事件。​ 想要知道事件具体是发生在哪个元素上面,可以通过事件对象提供的 target 属性来判断。

document.documentElement.addEventListener('click', function (e) {
 console.log(e.target)
})

我们很容易知道事件具体是发生在哪个元素身上的。于是在上面的示例中,如果父元素 document 想在按钮被点击时做点什么事情,我们很自然地会这么写:

document.documentElement.addEventListener('click', function (e) {
 if (e.target.tagName === 'BUTTON') {
 console.log('按钮被点击了')
 }
})

这时问题就出现了,按钮即使被点击了 if 条件也不一定成立,即也不一定会输出“按钮被点击了”。因为用户在按钮上的某个位置点击了,根据用户点击的位置,e.target 可能是下面三种情况:

  • BUTTON 元素
  • SVG 元素
  • USE 元素

实际的情况是这样的:

JavaScript 事件代理需要注意的地方

我们真正的意图是,只要点击是发生在按钮上面,不论是按钮的哪个位置,我们都应视为按钮被点击了。 嗯,简单,我们再改一下,这样写:

document.documentElement.addEventListener('click', function (e) {
 if (['BUTTON', 'SVG', 'USE'].includes(e.target.tagName.toUpperCase())) {
 // 点击的是按钮
 }
})

这样似乎没什么问题,也确实可以达到目的,但看上去总是有些别扭。因为这种情况对于最上层的 document 来说,得知道每个子元素的情况,本来我只需要关心离我最近的 button 元素就可以了。

根据 OOP 对内封装的思想,button 元素内部的事情应该在内部消化掉,其子元素对外不可见,应该只暴露 button 元素本身。依据这个思想和事件冒泡的特点,我们就有了比较好的解决办法:只需要禁止 button 内部元素的事件响应(包括事件冒泡)而只允许 button 元素本身的事件发生就行。有两种方式可以实现这个目的。

一种是使用 CSS 禁止 button 内部元素的事件响应:

button > * {
 pointer-events: none;
}

另一种是使用 JS 来阻止 button 内部元素的事件响应(包括事件冒泡):

document.querySelector('button > svg').addEventListener('click', function (e) {
 e.stopPropagation()
 e.preventDefault()
})

document.querySelector('button').addEventListener('click', function (e) {
 console.log(e.target.tagName)
})

这两种方式都能达到我们预期的效果:

JavaScript 事件代理需要注意的地方

综上,针对特定元素进行事件处理时,如果该元素有事件代理的情况,就要小心处理它所代理的子元素。

以上就是JavaScript 事件代理需要注意的地方的详细内容,更多关于JavaScript 事件代理的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
javascript计时器事件使用详解
Jan 07 Javascript
jquery使用正则表达式验证email地址的方法
Jan 22 Javascript
AngularJS模块详解及示例代码
Aug 17 Javascript
Bootstrap模态框禁用空白处点击关闭
Oct 20 Javascript
微信小程序技巧之show内容展示,上传文件编码问题
Jan 23 Javascript
js 中rewrap-ajax.js插件实例代码
Oct 20 Javascript
详解JSON Web Token 入门教程
Jul 30 Javascript
vue移动端下拉刷新和上拉加载的实现代码
Sep 08 Javascript
Node批量爬取头条视频并保存方法
Sep 20 Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
Jan 06 Javascript
Node.js API详解之 dns模块用法实例分析
May 15 Javascript
关于JavaScript轮播图的实现
Nov 20 Javascript
Vue axios 跨域请求无法带上cookie的解决
Sep 08 #Javascript
详解JavaScript的this指向和绑定
Sep 08 #Javascript
vue点击按钮实现简单页面的切换
Sep 08 #Javascript
Vue filter 过滤器、以及在table中的使用介绍
Sep 07 #Javascript
VUE中setTimeout和setInterval自动销毁案例
Sep 07 #Javascript
vue a标签点击实现赋值方式
Sep 07 #Javascript
JavaScript实现多球运动效果
Sep 07 #Javascript
You might like
浅谈Windows下 PHP4.0与oracle 8的连接设置
2006/10/09 PHP
用Zend Encode编写开发PHP程序
2010/02/21 PHP
phpMyAdmin 链接表的附加功能尚未激活的问题
2010/08/01 PHP
php画图实例
2014/11/05 PHP
smarty模板引擎从配置文件中获取数据的方法
2015/01/22 PHP
php实现paypal 授权登录
2015/05/28 PHP
PHP使用zlib扩展实现GZIP压缩输出的方法详解
2018/04/09 PHP
提高Laravel应用性能方法详解
2019/06/24 PHP
浅谈laravel orm 中的一对多关系 hasMany
2019/10/21 PHP
影响jQuery使用的14个方面
2014/09/01 Javascript
JQuery实现动态适时改变字体颜色的方法
2015/03/10 Javascript
js获取ip和地区
2017/03/10 Javascript
详解关于react-redux中的connect用法介绍及原理解析
2017/09/11 Javascript
webpack4 入门最简单的例子介绍
2018/09/05 Javascript
基于JavaScript canvas绘制贝塞尔曲线
2018/12/25 Javascript
Python的多态性实例分析
2015/07/07 Python
Python 运行.py文件和交互式运行代码的区别详解
2019/07/02 Python
django数据库自动重连的方法实例
2019/07/21 Python
numpy ndarray 取出满足特定条件的某些行实例
2019/12/05 Python
python GUI库图形界面开发之PyQt5窗口类QMainWindow详细使用方法
2020/02/26 Python
如何基于python3和Vue实现AES数据加密
2020/03/27 Python
PyTorch中clone()、detach()及相关扩展详解
2020/12/09 Python
CSS3中的Media Queries学习笔记
2016/05/23 HTML / CSS
Strawberrynet草莓网新加坡站:护肤、彩妆、香水及美发产品
2018/08/31 全球购物
大学应届毕业生个人求职信
2013/09/23 职场文书
业务经理的岗位职责
2013/11/16 职场文书
行政管理毕业生自荐信
2014/02/24 职场文书
创业者迈进成功第一步:如何写创业计划书?
2014/03/22 职场文书
党支部群众路线整改措施思想汇报
2014/10/10 职场文书
2014年大学生村官工作总结
2014/11/19 职场文书
初中英语教师个人工作总结
2015/02/09 职场文书
副校长2015年教育教学工作总结
2015/07/27 职场文书
关于党风廉政建设宣传教育月的活动总结!
2019/08/08 职场文书
【js设计模式】SOLID五大设计原则
2022/03/24 Javascript
Android开发之底部导航栏的快速实现
2022/04/28 Java/Android
德生2P3收音机开箱评测
2022/04/30 无线电