jQuey事件委托
javascript的事件模型，采用"冒泡"模式，子元素的事件会逐级向上"冒泡"，成为父元素的事件。
在需要为较多的元素绑定事件时应该使用事件委托 event delegation
javascript事件传播
html如下：
<body>
<table>
<tr><td id="targetTd"></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr> </table>
</body>
添加脚本：
targetTd.onclick = function (event) {
console.log("Td is clicked");
};
document.body.onclick = function (event) {
console.log("Body is clicked");
};
点击td targetTd,结果如下：
Td is clicked Body is clicked
使用stopPropagation可以阻止事件的传播(ie下使用cancelBubble)
eg:
targetTd.onclick = function (event) {
console.log("Td is clicked");
event.stopPropagation();
};
document.body.onclick = function (event) {
console.log("Body is clicked");
};
点击td targetTd,结果如下：
Td is clicked
js事件委托
如果我们想给上面的table中所有的td添加点击事件，可以通过循环绑定，或者是采用事件委托方式，如下：
document.body.onclick = function (event) {
if(event.target.tagName === "TD"){
console.log(event.target.tagName+" is clicked");
}
};
jQuery事件委托
jquery 事件绑定 on 方法定义如下：
.on( events [, selector ] [, data ], handler(eventObject) )
取消事件的绑定可以使用off
$(document).off("click", "td");
给td绑定点击事件可以使用：
$("td").on("click", function(e){
console.log(e.target.tagName+" is clicked");
});
加入selector参数，使用事件委托
$("table").on("click", "td", function(){
console.log(e.target.tagName+" ");
});
或者：
$(document).on("click", "td", function(){
console.log(e.target.tagName+" ");
});
此时事件冒泡到document或者table时会监测是否是td selector，匹配时会触发事件
jQuey事件委托的更多相关文章
- HTML 事件(三) 事件流与事件委托
本篇主要介绍HTML DOM中的事件流和事件委托. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三) 事件流与事件委托 4 ...
- js中的事件委托
原文 http://itindex.net/detail/48661-js-事件 1,什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢 ...
- js动态添加事件-事件委托
作者:白狼 出处:http://www.manks.top/javascript-dynamic-event.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给 ...
- js_事件委托
起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它 ...
- 怎么理解js中的事件委托
怎么理解js中的事件委托 时间 2015-01-15 00:59:59 SegmentFault 原文 http://segmentfault.com/blog/sunchengli/119000 ...
- jQuery-1.9.1源码分析系列（十） 事件系统——事件委托
jQuery的事件绑定有几个比较优秀的特点: 1. 可以绑定不限数量的处理函数 2. 事件可以委托到祖先节点,不必一定要绑到对应的节点,这样后添加的节点也照样能被处理. 3. 链式操作 下面主要分析事 ...
- js事件委托
什么是事件委托:通俗的讲,onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件. 也 ...
- [JS]笔记14之事件委托
-->什么是事件委托-->事件委托原理-->事件委托优点-->事件源 / 目标源 一.什么是事件委托 通俗的讲,onclick,onmouseover,onmouseout等这 ...
- 记一次事件委托在 ios 下的兼容 bug
项目中碰到的兼容类 bug,记录一二. 页面上有几个同类型的控件,点击它们会触发一些事件,很显然,事件委托优于批量绑定.为了图方便,我将 click 事件绑定到了 document.body 上(绑定 ...
随机推荐
- ThinkPHP pdo连接Oracle的配置写法，提示报错
'DB_TYPE' => 'pdo', // 数据库类型 'DB_USER' => 'user101', // username 'DB_PWD' => 'zb~!@#$%', // ...
- “too many open files" ----增大打开的文件数
http://www.cnblogs.com/ibook360/archive/2012/05/11/2495405.html [root@localhost ~]# ab -n -c http:/ ...
- Linux驱动程序开发 - 设备控制接口
(2008-08-08 15:02:19) 转载▼ 标签: it linux kernel driver 分类: Linux 序言设备驱动程序的一个基本功能就是管理和控制设备,同时为用户应用程序提供管 ...
- MongoDB C++ 2.4.5 driver 编译安装问题
安装参考前文,http://blog.csdn.net/sheismylife/article/details/8794589 方法一致.只不过这次在GCC4.8.1上编译. scons instal ...
- 解决XCode 4.x SVN无法连接的问题
XCode升级到4.X版本后,确实好用了不少.但普通都存在SVN无法连接的问题.XCode4.x Source Control功能迁移到了File - Source Control目录下,也出现了一些 ...
- [转] JAVA的Random类
Random类 (java.util) Random类中实现的随机算法是伪随机,也就是有规则的随机.在进行随机时,随机算法的起源数字称为种子数(seed),在种子数的基础上进行一定的变换,从而产生需要 ...
- 网络环境场景以及模拟工具netem
网络环境场景包括: 延迟(Lag),把数据包缓存一段时间后再发出,这样能够模拟网络延迟的状况. 掉包(Drop),随机丢弃一些数据. 节流(Throttle),把一小段时间内的数据拦截下来后再在之后的 ...
- 获取context path或者basePath
转自:http://hexudonghot.blog.163.com/blog/static/532043422012112264411234/ 在jsp中获取context path或者basePa ...
- android launcher3 home页简易分析
最近在修改一个问题:就是修改home页下,用户手动拖出来的APP图片下面的字体显示不全,思路比较明确,需要尽量加大整个APP控件的高度,或者缩小图片和文字之间的间隔. 跟代码发现APP整个控件的lay ...
- CSS注释代码
就像在Html的注释一样,在CSS中也有注释语句:用/*注释语句*/来标明(Html中使用<!--注释语句-->).就像下面代码: 示例: <!DOCTYPE HTML> &l ...