JavaScript捕获与冒泡与委托
事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件。
相反的,事件冒泡是自下而上的去触发事件。
并不是所有的事件都能冒泡,以下事件不冒泡:blur、focus、load、unload
阻止冒泡的方法
if(event && event.stopPropagation){ // w3c标准
event.stopPropagation();
}else{ // IE系列 IE 678
event.cancelBubble = true;
}
事件委托就是利用冒泡的原理,把事件加到父级上,通过判断事件来源的子集,执行相应的操作,事件委托首先可以极大减少事件绑定次数,提高性能;其次可以让新加入的子元素也可以拥有相同的操作。
$("#info_table td").bind(
{
click:function(){$("p").slideToggle();},
mouseover:function(){$("body").css("background-color","red");},
mouseout:function(){$("body").css("background-color","#FFFFFF");}
}
);
$("#info_table td").live("click",function(){/*显示更多信息*/});
$("#info_table").delegate("td","click",function(){/*显示更多信息*/});
$(elems).on(events, selector, data, fn);
$(elems).off(events, selector, fn);
如果指定selector,则为事件委托;否则,就是常规绑定。
现在只要用on方法就可以了,推荐用on方法进行委托或常规绑定事件
If there are similarities, forgive me.
JavaScript捕获与冒泡与委托的更多相关文章
- JavaScript捕获和冒泡探讨
<div id="div"> <input type="button" value="banana" id="b ...
- JavaScript 详说事件机制之冒泡、捕获、传播、委托
DOM事件流(event flow )存在三个阶段:事件捕获阶段.处于目标阶段.事件冒泡阶段. 事件捕获(event capturing):通俗的理解就是,当鼠标点击或者触发dom事件时,浏览器会 ...
- JavaScript中捕获/阻止捕获、冒泡/阻止冒泡
JavaScript中捕获/阻止捕获.冒泡/阻止冒泡 事件流描述的是从页面中接收事件的顺序.提出事件流概念的正是IE和Netscape,但是前者提出的是我们常用的事件冒泡流,而后者提出的是事件捕获流. ...
- JavaScript的事件监听、捕获和冒泡
在前端开发中,我们经常需要对某些事件进行监听.这样只要在指定的元素上触发了该事件,就会执行一个回调函数来进行相关的操作. 而JavaScript中事件监听的方法总共有三种,分别如下: element. ...
- javascript事件捕获与冒泡
对“捕获”和“冒泡”这两个概念,我想我们对冒泡更熟悉一些,因为在我们使用的所有浏览器中,都支持事件冒泡,即事件由子元素向祖先元素传播的,就 像气泡从水底向水面上浮一样.而在像firefox,chrom ...
- DOM事件-冒泡、捕获、传播、委托
事件捕获 以点击事件为例事,同类型事件会由根元素开始触发,向内传播,一直到目标元素.从外到内依次触发:根—目标的祖先素—目标的父元素—目标元素. 事件冒泡 根事件捕获截然相反.发生点击事件时,事件会从 ...
- JavaScript(3)---事件冒泡、事件捕获
JavaScript(3)---事件冒泡与事件捕获 一.理解冒泡与捕获 假设有这么一段代码 <body> <div><p>标签</p> </div ...
- javascript的事件监听与捕获和冒泡
在前端开发中,我们经常需要对某些事件进行监听.这样只要在指定的元素上触发了该事件,就会执行一个回调来进行相关的操作. 而js中事件监听方法总共有三种,分别如下所示: element.addEventL ...
- javaScript的事件冒泡事件捕获
(1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: div -> body -> document IE 6.0: div ...
随机推荐
- WPF中的资源(二) - 二进制资源
原文:WPF中的资源(二) - 二进制资源 WPF中的二进制资源,就是类似于MFC中在对话框程序中添加的图片.字符串等资源,程序在运行时将其转换成二进制,以供程序使用. 下面以将字符串转换成二进制为例 ...
- mariadb 允许远程访问
进入MariaDB服务器,将mysql.user的host字段的值改为%就表示在任何客户端机器上能以root用户登录到mysql服务器,建议在开发时设为%. 1 MariaDB [(none)]> ...
- 蚂蚁金服招聘-JAVA资深开发工程师/专家-蚂蚁金服保险
岗位描述: 1.协助业务方梳理业务需求,提供业务规划方案.架构设计方案: 2.负责业务系统的规划设计,制定产品的技术发展路线,完成重要业务模块及核心框架的搭建及编码实现: 3.发现和解决业务系统的技术 ...
- 零元学Expression Blend 4 - Chapter 5 2.5D转换的使用技巧
原文:零元学Expression Blend 4 - Chapter 5 2.5D转换的使用技巧 本章将延续上篇零元学Expression Blend4 - Chapter 4元件重复运用的观念所制作 ...
- FMX 动态创建 和 销毁(释放free) 对象
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...
- BI-学习之 商业智能平台的引入(传统关系型数据库的问题)
早在 SQL Server 2005里面就有了这种 完整的商业智能平台了,那时候Nosql什么的都还停留在概念性的提出阶段,发展至2009年才一下子蹦了出来变得众所周知了.当然这个要扯就扯远了,咱们还 ...
- c++实现游戏开发中常用的对象池(含源码)
c++实现游戏开发中常用的对象池(含源码) little_stupid_child2017-01-06上传 对象池的五要素: 1.对象集合 2.未使用对象索引集合 3.已使用对象索引集合 4.当前 ...
- logstash performance testing
最近一直在和peformance team的同事做logstash 5.6.2的测试,主要测试两个方面:一方面测试log数据是否能全部被logstash获取与发出去,一方面测试logstash自身的c ...
- C语言实现常用查找算法——二分查找
#include<stdio.h> void insert_sort(int a[],int n); int binary_search(int a[],int x,int n); voi ...
- Android native进程间通信实例-binder篇之——用parcel传输数组
和之前稍微不同,这次要稍微分析一下 Parce.cpp 和 android_os_Parcel.cp p的源码,为的是能够掌握调试技巧,后续传输其它类型数据就能举一反三了! 1. 代码共享 这次 ...