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 ...
随机推荐
- 基于树莓派的微型气象站设计与开发(Windows 10 IoT Core)
前言 树莓派(Raspberry Pi,RPi)是专门为学生计算机编程教育而设计,只有信用卡大小的卡片式电脑,可以运行Linux或者Windows 10 IoT Core操作系统.本文将利用树莓派和U ...
- mingw64 构建 Geos
简述 在做某个小程序时候用到了QT,而用的Qt是mingw版本的,所以使用mingw构建了一下geos库. 1.准备工作 首先需要先安装好mingw,这里直接使用http://www.mingw-w6 ...
- PySide——Python图形化界面入门教程(三)
PySide——Python图形化界面入门教程(三) ——使用内建新号和槽 ——Using Built-In Signals and Slots 上一个教程中,我们学习了如何创建和建立交互widget ...
- DataTable,DataView 排序和使用
我们都知道在Sql Server可以用order by来排序,所以很多朋友在DataTable中排序也想到了用order by关键字.但这样实现是比较困难的,下面,我们讲解一种比较简单的方法: 控制台 ...
- SQL 时间格式化函数发布
SQL 时间格式化函数,有时候因某种需要需要格式化成需要的时间格式,需要的朋友可以收藏下,以备后用. SQL Server里面可能经常会用到的日期格式转换方法: sql server使用convert ...
- c# 查询本机可用的代理ip
现在有很多网站都提供免费的代理ip,但是你会发现很多网站显示的可以用的 ,在自己电脑上是用不了,写个小代码提取出自己电脑上可以用的代理,没什么技术含量,只是为了记录一下 string strUrl = ...
- Android和IOS启动第三方地图APP
最近客户新提了需求,地址字段要能通过第三方的地图进行定位,于是对Android和IOS端进行了调整. 以下是调用地图部分的代码. android可按照包名来判断app是否存在: 方法: /* * ch ...
- Google C++测试框架系列高级篇:第二章 让GTest学习打印自定义对象
上一篇:更多关于断言的知识 原始链接:Teaching Google Test How to Print Your Values 词汇表 版本号:v_0.1 让GTest学习打印自定义对象 当一个断言 ...
- 模拟键盘发送文字(使用SendInput API函数)
嗯...老生常谈的话题, 不过系统的总结了一下, 找了个相对简单的实现方式, 可以方便的发送任何文字 参考另一片文章: http://www.cnblogs.com/-clq/archive/2011 ...
- HTML连载11-HTML中被废弃的标签&字符实体
一.为什么会有被废弃的标签 答:HTML中以前存在一部分不是用来添加语义的标签,而与我们HTML标签是用来添加语义的,这与我们的定义不相符. 例如: 1.标签<br>:换行 2.标签&l ...