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 上(绑定 ...
随机推荐
- KVM与VMware的性能比较
结合网页http://www.linuxidc.com/Linux/2011-01/31755.htm等整理 物理环境内存4G ,CPU4个,动态硬盘120G KVM: 硬盘测试瞬间读取速度Timin ...
- OSX10.11 CocoaPods 升级总结
本文不会讨论CocoaPods的各种使用技巧以及各种原理,只是简单记录一下在升级过程中遇到的问题,如果使用中有各种问题来欢迎交流. Podfile.loc 文件变化 前几天一个小伙更新了CocoaPo ...
- codevs 1725 探险 （二分）
/* 二分答案 这个题目要求“体力和最小的那个小组的所有人的体力和尽量大” 很明显我们二分最小体力 如果合法 逐渐放大 但是这里我们二分的是最小而不是最大 所以累加的体力>=ans时 跳过当前体 ...
- springmvc学习笔记(理论)
1.springmvc是什么? Spring Web MVC是一种基于Java的实现了Web MVC设计模式的请求驱动类型的轻量级Web框架,即使用了MVC架构模式的思想,将web层 进行职责解耦,基 ...
- windows服务（Windows Installer问题，错误5:拒绝访问）
Windows Installer问题,错误5:拒绝访问 shillan,2006-11-03 09:40:38 现象: 使用MSI文件来安装的软件在安装和卸载时系统提示:“不能访问Windows I ...
- H5与Activity之间的通信(调用)
1.通过H5页面的超链接尾部信息不同进行跳转(类似于URL拦截器) 例如:控件x的href="http://www.example.com/?menu_id=1", 在代码中添加w ...
- NET平台下的Excel编程|C#操作Excel|Application和ApplicationClass的联系和区别
NET平台下的Excel编程|C#操作Excel|Application和ApplicationClass的联系和区别 1. Interop含义Interop是互操作的含义.Microsoft.Off ...
- [转] 与调试器共舞 - LLDB 的华尔兹
你是否曾经苦恼于理解你的代码,而去尝试打印一个变量的值? NSLog(@"%@", whatIsInsideThisThing); 或者跳过一个函数调用来简化程序的行为? NSNu ...
- 01-android快速入门
adb Android debug bridge 安卓调试桥 创建模拟器,屏幕尽量小些,启动速度运行速度快 Android项目的目录结构 Activity:应用被打开时显示的界面 src:项目代码 R ...
- 【USACO 3.1.3】丑数
[描述] 对于一给定的素数集合 S = {p1, p2, ..., pK}, 来考虑那些质因数全部属于S 的数的集合.这个集合包括,p1, p1p2, p1p1, 和 p1p2p3 (还有其它).这是 ...