JavaScript事件冒泡和事件委托
JavaScript事件冒泡和事件委托
付建宇 - 2 条评论
接触JavaScript不久,学的东西也不是特别多。小雨就是习惯把平时学到的东西拿出来分享。一方面加强自己的印象,一方面可以让自己的经验为他人答疑解惑。我们知道JavaScript可以监控页面上元素的各种事件,常用的事件有很多,例如点击,鼠标移入、移出,元素改变等等。这次主要说一下事件冒泡及其一个比较酷的应用,事件委托。不做特殊说明,以下都在jQuery框架内执行。
事件冒泡
什么是“事件冒泡”呢?假设这里有一杯水,水被用某种神奇的方式分成不同颜色的几层。这时,从最底层冒出了一个气泡,气泡会一层一层地上升,直到最顶层。而你不管在水的哪一层观察都可以看到并捕捉到这个气泡。好了,把“水”改成“DOM”,把“气泡”改成“事件”。这就是“事件冒泡”。
为了可以直观地观察到这一现象,我写了一个小程序。这个页面中一共有4个嵌套的正方形。最大的那个在最顶层,最小的那个在最底层。我为每一层都单独绑定了一个点击事件,当这一层被点击时,会为这层涂色。试试看,点击最小的正方形会发生什么?点击其他的又会发生什么呢? (点击这里查看demo)
CSS
.white{background-color:#fff;} #d1{width:400px;height:400px;border:1px solid #000;margin:50px 50px;} #d2{width:300px;height:300px;border:1px solid #000;margin:50px 50px;} #d3{width:200px;height:200px;border:1px solid #000;margin:50px 50px;} #d4{width:100px;height:100px;border:1px solid #000;margin:50px 50px;}
HTML
<div id="d1" class="white"><div id="d2" class="white"><div id="d3" class="white"><div id="d4" class="white"></div></div></div>
</div>
<button id="reset1">重置</button>
Javascript
jQuery('#d4').click(function(){jQuery(this).css('background-color', 'yellow')}); jQuery('#d3').click(function(){jQuery(this).css('background-color', 'green')}); jQuery('#d2').click(function(){jQuery(this).css('background-color', 'blue')}); jQuery('#d1').click(function(){jQuery(this).css('background-color', 'red')}); jQuery('#reset1').click(function(){jQuery('.white').css('background-color', '#fff')});
没错,点击最小的那个,外面所有的都会被上色。你会发现,点击里层的正方形,外层所有的正方形都会被上色。因为它们也都捕捉到了点击事件。看,他们抓到“气泡”了!
事件委托
上一节的例子我们做一点小小的修改。气泡带上了某种信息,会告诉其经过的每一层自己是在哪一层产生的。JavaScript的事件确实会带着这个属性。当程序捕获一个事件的时候,它会知道这个事件来自于页面上哪个元素。修改上面的程序,使用事件委托来处理点击事件。当最顶层捕获点击事件时,查看事件来源于哪一层,然后只将那一层涂色。再次点击每一层,查看实际效果。只有当前点击的正方形变色了,其他的都毫无反应。(点击这里查看demo)
jQuery('#d1').click(function(e){ var t = jQuery(e.target); var id = t.attr('id'); if (id==='d4'){ t.css('background-color', 'yellow'); } else if (id==='d3') { t.css('background-color', 'green'); } else if (id==='d2') { t.css('background-color', 'blue'); } else { t.css('background-color', 'red'); } });
当然,如果你有这样嵌套的页面元素,使用了事件委托,委托到了最顶层,这时需要注意:如果其中某个元素,你不希望它的事件冒泡,那么可以使用某种方式阻止事件的冒泡。在jQuery框架中,可以使用stopPropagation()方法来实现而不必关心浏览器兼容性。
$('#bind').click(function(){ if ($(this).is(':checked')) { $('#d4').bind('click', function(e){ e.stopPropagation(); alert('冒泡被阻止,这块将不会改变颜色'); }); } else { $('#d4').unbind('click'); } });
重置后选中“阻止最小的方块的事件冒泡”,再点击最小的方块,看是否变色。显然是不会变色,阻止了冒泡,父层将无法接收到点击事件。
注意事项
事件委托是事件冒泡的一个应用,可以减少绑定元素的个数,也不必担心子节点被替换后可能需要进行重新的事件绑定。因为事件的捕获和后续代码的执行已经完全委托给了其父节点。如果页面中含有大量元素需要绑定事件,这样做会减少事件绑定数量,为浏览器减负,无疑会提高页面性能。
但也有些需要注意的。如果用于捕获事件的节点会在某些情况下return false,而你的一个点击事件未委托给父节点,那么,你可能需要阻止这个节点的事件冒泡来达到正确的目的。例如:我在一个div里面有一些按钮和其他元素。利用事件委托来处理这些按钮的点击,如果不是按钮则return false。这时,错误就出现了。如果其他元素中含有链接,那么链接的点击事件也会被委托给div。然而点击链接,会没有任何反应。解决办法一是在委托的代码中对链接进行处理,二是阻止链接的事件冒泡。
转载:http://www.pureweber.com/article/event-delegation/
转载于:https://www.cnblogs.com/shamgod/p/4597848.html
JavaScript事件冒泡和事件委托相关推荐
- JavaScript:事件冒泡和事件委托
2019独角兽企业重金招聘Python工程师标准>>> JavaScript事件代理和委托(Delegation) JavaScript事件冒泡和事件委托 JavaScript:通过 ...
- javascript的事件冒泡,阻止事件冒泡和事件委托, 事件委托是事件冒泡的一个应用。...
2018年12月13日更新 <!DOCTYPE html> <html lang="en"> <head><meta charset=&q ...
- JavaScript(js)事件冒泡、事件捕获、事件委托详解
JavaScript(js)事件冒泡.事件捕获.事件委托详解 1.什么是事件 JavaScript和HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口发生的一些特定的交互瞬间.可以使用监听 ...
- Javascript中的事件捕获、事件冒泡与事件委托
看以下简单的三层div结构. <div id="grandparent"><div id="parent"><div id=&qu ...
- 事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
一.事件冒泡定义 事件冒泡是指在一个对象触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那 ...
- 你真的理解事件绑定、事件冒泡和事件委托吗?
一文了解Web API中的事件绑定.事件冒泡.事件委托 引言 正文 一.事件绑定 1.事件和事件绑定时什么? 2.事件是如何实现的? 二.事件冒泡 1.事件模型 2.事件模型解析 (1)捕获阶段 (2 ...
- 事件委托、事件冒泡与事件捕获
目录 事件委托: 1.原理 2.实现 ①在介绍事件委托的方法之前,我们先来看一段一般方法的例子: ②那么我们用事件委托的方式做又会怎么样呢? ③要是每个li被点击的效果都不一样,那么用事件委托还有用吗 ...
- javascript中的事件冒泡、事件捕获和事件执行顺序
谈起JavaScript的 事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. DOM事件标准定义了两种事件流,这两种事件流有着显著的不同并且可能对你的应用有 ...
- addeventlistener事件第三个参数_简析JavaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序...
这篇文章主要介绍了javaScript 事件绑定.事件冒泡.事件捕获和事件执行顺序整理总结的相关资料 (一)事件绑定的几种方式 javascript给DOM绑定事件处理函数总的来说有2种方式:在htm ...
最新文章
- C++ 向量(vector) 的使用
- 10 结构型模式-----装饰模式
- U3D+SVN: 两份相同资源放在不同目录下导致META的更改
- 刷了三遍面试题仍拿不到offer?如何掌握AI技术面正确刷题姿势?
- 2016国产开源软件Top100(Q1)
- NTIRE @ CVPR 2021 视频质量增强竞赛:数据库、方法及结果汇总(官方发布)
- 在普通java类里获取Spring管理的bean
- Spring cloud开发内存占用过高解决方法
- Qt窗口部件——QFrame/QAbstractButton/QLineEdit/QAbstractSpinBox/QAbstractSlider
- jQuery中的gt和lt
- c# oracle异常,C# 连接Oracle数据库异常总结
- QT项目六:简易客户信息管理系统
- 使用iOS AirPrint 让你的APP轻松实现打印功能
- linux启动和grub修复
- 几种ARM编译器及IDE开发环境
- PySlowFast 平台的使用及解析——以X3D为例
- IIS 配置问题解决
- Java之父--Gosling
- 每日新闻 | 华为首款5G手机今日正式开卖
- 前端开发工具less入门
热门文章
- apicloud mysql 登录_PHP+MySQL实现前台的登陆注册。
- 考研数据结构--排序汇总(自用)
- 计算机网络-IP数据报计算(IP数据报分片)一个数据报部分长度为3400字节(使用固定首部)。现在经过一个网络传输,该网络的MTU为800字节:
- 2017蓝桥杯C++A:迷宫(DFS)
- IntelliJ IDEA + EmmyLua:Lua IDE的安装与使用
- Wannafly挑战赛21: C. 大水题(DP)
- bzoj 1786 bzoj 1831: [Ahoi2008]Pair 配对(DP)
- bzoj 4025: 二分图(可撤销并查集+CDQ分治)
- bzoj 4498: 魔法的碰撞(DP+组合数)
- NYOJ 3:多边形重心问题