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 ...
随机推荐
- TCP 的那些事儿(上,下)
http://coolshell.cn/articles/11564.html http://coolshell.cn/articles/11609.html
- Android项目实战(四十):在线生成按钮Shape的网站
原文:Android项目实战(四十):在线生成按钮Shape的网站 AndroidButton Make 右侧设置按钮的属性,可以即时看到效果,并即时生成对应的.xml 代码,非常高效(当然熟练的话 ...
- 算法之--字符串包含【python实现】
题目描述 给定两个分别由字母组成的字符串A和字符串B,字符串B的长度比字符串A短.请问,如何最快地判断字符串B中所有字母是否都在字符串A里? 为了简单起见,我们规定输入的字符串只包含大写英文字母,请实 ...
- 对c&c++源文件和头文件分开的好处的一点认识
对c&c++程序来说,基本上来说都是要把源文件和头文件分别编写.一般都是代表一个基本功能的源文件引用相应的头文件. 一个 相关功能的模块可能有若干对源文件和头文件组成.这是基于组件编程的核心. ...
- DELPHI XE2 采用 JSON 的方式来序列化对象
DELPHI XE2 采用 JSON 的方式来序列化对象 以下代码测试通过.问题是里面的中文,在反序列化后是乱码. 1. 序列化对象为字符串,Subject 里面的中文看起来正常,仍然是中文: 2. ...
- c# 9png实现(图片缩放)
跟据9png的实现原理自己写了个生成图片的函数,9png的原理是将图片切成9块如下 其中1.3.7.9不进行缩放,2,4,5,6,8进行缩放,这样就防止了放大后导致边界出现锯齿的问题 在实现过程中主要 ...
- 插件化二(Android)
插件化二(Android) 上一篇文章<插件化一(android)>里大概构思了下插件加载与校验的流程和一些大体设计,这次就具体展开,在<动态加载与插件化>里提到以apk形式开 ...
- springboot部署到tomcat
把spring-boot项目按照平常的web项目一样发布到tomcat容器下 多点经验: 1.保证运行环境的jdk和开发环境一致,不然class文件无法被编译 2.保证tomcat和java的版本匹配 ...
- shell把文件批量导入mysql
for file in ./tmp_data/* do echo $file mysql -u'root' -p'wangbin' --default-character-set=utf8 -e&qu ...
- 30211Java_类
类 类:我们叫做class. 对象:叫做Object,instance(实例).某个类的对象,某个类的实例.是一样的意思.1.对象是具体的事物;类是对对象的抽象;2.类可以看成一类对象的模板,对象可以 ...