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图片阅览组件
Nov 09 Javascript
js实现快速分享功能(你的文章分享工具)
Jun 25 Javascript
Javascript实现的常用算法(如冒泡、快速、鸽巢、奇偶等)
Apr 29 Javascript
js实现类似jquery里animate动画效果的方法
Apr 10 Javascript
理解javascript中的严格模式
Feb 01 Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
May 15 Javascript
jQuery表单事件实例代码分享
Aug 18 Javascript
js HTML5手机刮刮乐代码
Sep 29 Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
Apr 13 Javascript
基于vue.js无缝滚动效果
Jan 25 Javascript
vue中v-for循环给标签属性赋值的方法
Oct 18 Javascript
Vue  webpack 项目自动打包压缩成zip文件的方法
Jul 24 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
require(),include(),require_once()和include_once()的异同
2007/01/02 PHP
PHP 一个比较完善的简单文件上传
2010/03/25 PHP
php多文件上传功能实现原理及代码
2013/04/18 PHP
讲解WordPress中用于获取评论模板和搜索表单的PHP函数
2015/12/28 PHP
PHP实现的进度条效果详解
2016/05/03 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
一个js拖拽的效果类和dom-drag.js浅析
2010/07/17 Javascript
JQuery在页面中添加和除移DOM示例代码
2013/06/24 Javascript
jquery实现div阴影效果示例代码
2013/09/16 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
2015/08/14 Javascript
js变形金刚文字特效代码分享
2015/08/20 Javascript
全系IE支持Bootstrap的解决方法
2015/10/19 Javascript
jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)
2016/05/16 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
2017/09/15 Javascript
vue-router项目实战总结篇
2018/02/11 Javascript
vue-cli+webpack项目 修改项目名称的方法
2018/02/28 Javascript
javascript实现文件拖拽事件
2018/03/29 Javascript
Nodejs模块的调用操作实例分析
2018/12/25 NodeJs
详解Vue路由自动注入实践
2019/04/17 Javascript
对vuex中getters计算过滤操作详解
2019/11/06 Javascript
解决Layui数据表格显示无数据提示的问题
2019/11/14 Javascript
jQuery实现评论模块
2020/08/19 jQuery
Python安装官方whl包和tar.gz包的方法(推荐)
2017/06/04 Python
Python弹出输入框并获取输入值的实例
2019/06/18 Python
浅谈pytorch grad_fn以及权重梯度不更新的问题
2019/08/20 Python
Django集成MongoDB实现过程解析
2020/12/01 Python
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
2013/01/06 HTML / CSS
三星新西兰官网:Samsung新西兰
2019/03/05 全球购物
个人素质的自我评价分享
2013/12/16 职场文书
军训鉴定表自我鉴定
2014/02/13 职场文书
校企合作协议书
2014/04/16 职场文书
导师推荐信范文
2014/05/09 职场文书
学雷锋的心得体会
2014/09/04 职场文书
云冈石窟导游词
2015/02/04 职场文书
党支部意见范文
2015/06/02 职场文书
SQL IDENTITY_INSERT作用案例详解
2021/08/23 MySQL