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 相关文章推荐
jQuery EasyUI 中文API Button使用实例
Apr 14 Javascript
JavaScript自定义事件介绍
Aug 29 Javascript
JavaScript实现强制重定向至HTTPS页面
Jun 10 Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
Sep 24 Javascript
跨域请求的完美解决方法(JSONP, CORS)
Jun 12 Javascript
jquery ui sortable拖拽后保存位置
Apr 27 jQuery
vue时间格式化实例代码
Jun 13 Javascript
vue Render中slots的使用的实例代码
Jul 19 Javascript
vue表单自定义校验规则介绍
Aug 28 Javascript
vue新vue-cli3环境配置和模拟json数据的实例
Sep 19 Javascript
jQuery实现的点击图片居中放大缩小功能示例
Jan 16 jQuery
js Proxy的原理详解
May 25 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
用ADODB来让PHP操作ACCESS数据库的方法
2006/12/31 PHP
新浪微博OAuth认证和储存的主要过程详解
2015/03/27 PHP
[原创]php实现 data url的图片生成与保存
2016/12/04 PHP
JAVASCRIPT 对象的创建与使用
2021/03/09 Javascript
javascript之dhDataGrid Ver2.0.0代码
2007/07/01 Javascript
让getElementsByName适应IE和firefox的方法
2007/09/24 Javascript
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
2010/04/15 Javascript
php is_numberic函数造成的SQL注入漏洞
2014/03/10 Javascript
jquery重复提交请求的原因浅析
2014/05/23 Javascript
jQuery控制元素显示、隐藏、切换、滑动的方法总结
2015/04/16 Javascript
利用JS提交表单的几种方法和验证(必看篇)
2016/09/17 Javascript
jQuery中 $ 符号的冲突问题及解决方案
2016/11/04 Javascript
Vue.js之slot深度复制详解
2017/03/10 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
2017/08/03 Javascript
BootStrap下的弹出框加载select2框架失败的解决方法
2017/08/31 Javascript
微信小程序入口场景的问题集合与相关解决方法
2019/06/26 Javascript
在vue+element ui框架里实现lodash的debounce防抖
2019/11/13 Javascript
vue实现井字棋游戏
2020/09/29 Javascript
如何将Node.js中的回调转换为Promise
2020/11/10 Javascript
[48:37]EG vs OG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python抓取网页内容示例分享
2014/02/24 Python
利用Hyperic调用Python实现进程守护
2018/01/02 Python
Python3之文件读写操作的实例讲解
2018/01/23 Python
python 自动去除空行的实例
2018/07/24 Python
python使用matplotlib画饼状图
2018/09/25 Python
Python3利用print输出带颜色的彩色字体示例代码
2019/04/08 Python
将Python文件打包成.EXE可执行文件的方法
2019/08/11 Python
python实现井字棋小游戏
2020/03/04 Python
研究生自我鉴定范文
2013/10/30 职场文书
实习评语
2013/12/16 职场文书
元旦晚会上单位领导演讲稿
2014/01/05 职场文书
公司年终奖分配方案
2014/06/16 职场文书
SQL 窗口函数实现高效分页查询的案例分析
2021/05/21 SQL Server
Python函数式编程中itertools模块详解
2021/09/15 Python
正则表达式拆分url实例代码
2022/02/24 Java/Android
「SHOW BY ROCK!!」“雫シークレットマインド”组合单曲MV公开
2022/03/21 日漫