整理了一些jQuery关于事件冒泡和事件委托的技巧
首先，大家都知道，jQuery事件触发时有2种机制，一种是事件委托，另一种是事件冒泡（IE情况暂时不考虑）。拿click事件做例子，先附上一段代码：
html：
<body>
<div id="box">
<p id="btn">我是按钮</p>
</div>
</body>
style:
.hid{
display:none;
}
script：
$('#box').click(function(){
$(‘#btn’).toggleClass(‘hid’);
})
$('#btn').click(function(){
alert('btn');
})
这段代码的本意是，当我点击#btn的时候，我要alert出来“btn”字符串，而当我点击#box的时候，我要把#btn隐藏，但是，在实际执行的时候，当我点击btn的时候，他是会先执行btn的事件，继而执行box的事件，也就是先alert，再隐藏。与我们所想有所出入，那到底要怎么解决这个问题呢，这里就要想到事件冒泡这个机制，因为当我点击btn的时候，事件会向上冒泡到父元素，直至document对象。
1.7（没记错的话）之后的jQuery版本，提供了.on()事件，用来处理绑定元素的事件，这里我们可以用.on()事件，以及stopPropagation()方法来阻止事件冒泡：
$('#box').on('click','#btn',function(e){
e.stopPropagation()；
alert(‘btn’);
})
$('#box').click(function(){
$(‘#btn’).toggleClass(‘hid’);
})
这里我先用on绑定了#btn的事件，使得在点击到btn按钮的时候，alert('btn'),但是因为我 e.stopPropagation()阻止了事件冒泡，因此，就不会触发toggleClas事件;而此时我点击#box的时候，就是正常的toggleClass事件被触发;
这里补充一点：.on()方法事件只会针对事件触发前就已经存在的元素上，如果是在on事件之后新增的元素，是没办法绑定到事件的，那么这个时候，通过事件委托也是可以解决这个问题的，将事件委托绑定到包含的元素上。
这里思考了一下，如果不用.on()该怎么解决，类似于原生js中，用addEventListener监听点击的target，代码也不复杂：
$(’#box‘).click(function(e) {
if (e.target == this) {
$(‘#btn’).toggleClass(‘hid’);
}
})
$(‘#btn’).click(function() {
alert(‘btn’);
})
这样子，就能达到阻止事件冒泡的样子了。
当然，事件冒泡也并非都是副作用，就是我们要讲的另一种，那就是事件委托，事件委托就是建立在事件冒泡的基础上的，比如上面那个例子，你可以假设#btn和#box之间有很多元素，当我想要点击最里层的#btn的时候，想要触发他对应的事件，那么，就可以通过点击它的外围元素，然后判断点击的是否是目标元素，也就是btn，如果是，那么触发btn的事件，其实就是上面.on()的这个例子，可以改写成：
$('body').on('click','#btn',function(e){
alert(‘btn’);
})
把btn的事件委托给点击body来处理。
最后再仔细的分析一下，其实事件委托和事件冒泡，从逻辑上来思考无非就是2个相反的方向在执行。事件委托其实就是事件捕获过程，可以看成是从外到内捕获的过程；而事件冒泡就是从里到外冒泡的过程。
整理了一些jQuery关于事件冒泡和事件委托的技巧的更多相关文章
- 事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
一.事件冒泡定义 事件冒泡是指在一个对象触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那 ...
- jQuery 学习笔记（5）（事件绑定与解绑、事件冒泡与事件默认行为、事件的自动触发、自定义事件、事件命名空间、事件委托、移入移出事件）
1.事件绑定: .eventName(fn) //编码效率略高,但部分事件jQuery没有实现 .on(eventName, fn) //编码效率略低,所有事件均可以添加 注意点:可以同时添加多个相同 ...
- JavaScript事件冒泡和事件委托
JavaScript事件冒泡和事件委托 付建宇 - 2 条评论 接触JavaScript不久,学的东西也不是特别多.小雨就是习惯把平时学到的东西拿出来分享.一方面加强自己的印象,一方面可以让自己的经验 ...
- javascript的事件冒泡,阻止事件冒泡和事件委托， 事件委托是事件冒泡的一个应用。
首先,弄明白js 当中,什么是事件,事件模型在js中是如何设计的.什么是事件冒泡? 什么是“事件冒泡”呢?假设这里有一杯水,水被用某种神奇的方式分成不同颜色的几层.这时,从最底层冒出了一个气泡,气泡会 ...
- 彻底弄懂JS的事件冒泡和事件捕获（不推荐阅读）
由于搬去敌台了,好久没来博客园,今天无意中翻到有“误认子弟”的评论,这里特意做个说明. 本文中关于事件冒泡和事件捕获的描述和例子都是OK的,错就错在后面用jquery去展示了利用事件冒泡的例子有误,其 ...
- JS事件冒泡和事件捕获的详解
在学校,听老师讲解事件冒泡和事件捕获机制的时候跟听天书一样,只依稀记得IE使用的是事件冒泡,其他浏览器则是事件捕获.当时的我,把它当成IE浏览器兼容问题,所以没有深究(IE8以下版本的浏览器已基本退出 ...
- js进阶 12-2 彻底弄懂JS的事件冒泡和事件捕获
js进阶 12-2 彻底弄懂JS的事件冒泡和事件捕获 一.总结 一句话总结:他们是描述事件触发时序问题的术语.事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件.相反的,事件 ...
- javascript中的事件冒泡、事件捕获和事件执行顺序
谈起JavaScript的 事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. DOM事件标准定义了两种事件流,这两种事件流有着显著的不同并且可能对你的应用有 ...
- javascript --- 事件冒泡与事件捕获
事件冒泡与事件捕获 事件冒泡和事件捕获分别由微软和网景公司提出,这两个概念都是为了解决页面中事件流(事件发生顺序)的问题.考虑下面这段代码,就不写html->head,body之类的代码了,自行 ...
- JavaScript 进阶教程一 JavaScript 中的事件流 - 事件冒泡和事件捕获
先看下面的示例代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Jav ...
随机推荐
- 堆表和%%lockres%%函数
在今天的文章里,我想向你展示下SQL Server里一个未公开的函数,还有你如何用那个函数来找出在哪页记录被存储. %%lockres%% 今天我想向你展示的未公开函数叫做%%lockres%%,它与 ...
- OAuth授权过程
什么是OAuth授权? 一.什么是OAuth协议 OAuth(开放授权)是一个开放标准,所谓OAuth(即Open Authorization,开放授权),它是为用户资源授权提供了一种安全简单的标准, ...
- 登陆mysql时提示异常的解决方法
[root@host2 ~]# mysql -uroot -p Enter password: ERROR (HY000): Can't connect to local MySQL server t ...
- CSS布局 -- 左侧定宽，右侧自适应
左侧定宽,右侧自适应 有很多种方法可以实现 缩小窗口试试看? 方案一: 左边左浮动,右边加个margin-left 查看 demo <!DOCTYPE html PUBLIC "-// ...
- ok6410 android driver(12)
In this essay, I will talk about how to write the service libraries. TIPS : I won't discuss the name ...
- petapoco-SQLServer模型增加注释
petapoco是个基于T4模板的轻量级ORM,好用效率高,具体介绍略了 获取注释基本原理是调用数据库::fn_listextendedproperty函数,获取扩展属性MS_Description ...
- Visual Studio中附加调试器的方法
添加一个空的C++项目,项目属性配置如图. 命令里写要调试的程序的完整路径. 工作目录写所在目录的路径.
- 【转】 StringUtils中 isNotEmpty 和isNotBlank的区别
[转自]http://blog.csdn.net/foamflower/article/details/5713604 isNotEmpty将空格也作为参数,isNotBlank则排除空格参数 Str ...
- 解决SlidingMenu和SwipeBackLayout右滑事件冲突问题
SwipeBackLayout向右滑动关闭当前Activity,SlidingMenu向右滑动则是打开menu部分.在同一个Activity中,当SlidingMenu处于打开状态时,此时向右滑动,事 ...
- SDK Build Tools revision (19.0.3) is too low for project Min
SDK Build Tools revision (19.0.3) is too low for project Min(转) 如果你正在使用Android Studio工具进行开发,且将 ...