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 上(绑定 ...
随机推荐
- Linux下一个Redis启动/关闭/重新启动服务脚本
脚本功能: 实现redis单机多实例情况下的正常启动.关闭.重新启动单个redis实例.完毕系统标准服务的下面经常使用功能: start|stop|status|restart 注:redis程序代 ...
- htaccess 正则规则整理(转)
为了方便 htaccess 编写正则,这里整理了一下 htaccess 的正则规则. # —— 位于行首时表示注释. [F] —— Forbidden(禁止): 命令服务器返回 403 Forbidd ...
- Spring 3整合Quartz 2实现定时任务--转
常规整合 http://www.meiriyouke.net/?p=82 最近工作中需要用到定时任务的功能,虽然Spring3也自带了一个轻量级的定时任务实现,但感觉不够灵活,功能也不够强大.在考虑之 ...
- PID38 串的记数（codevs2077）
/* 假设当前有a个A b个B c个C 用 f[a][b][c]来表示 那么如果这个串以A结尾 那就是 f[a-1][b][c]转移来的 所以构成 f[a][b][c]的串一定有一部分是 f[a-1] ...
- C#解leetcode 11. Container With Most Water
Given n non-negative integers a1, a2, ..., an, where each represents a point at coordinate (i, ai). ...
- MySQL+PHP配置 Windows系统IIS版(转)
1.下载 MySQL下载地址:http://dev.mysql.com/downloads/mysql/5.1.html->Windows (x86, 32-bit), MSI Installe ...
- MVC使用Exception过滤器自定义处理Action的的异常
1.继承FilterAttribute ,IExceptionFilter自定义处理 /// <summary> /// 登录错误自定义处理 /// </summary> pu ...
- Java方法的参数是按值传递的.【转】
在Java中,所有的方法参数,都是"按值传递". 有那么一种说法,Java中基本类型是按值传递,对象是按引用传递.这个说法其实是不确切的,确切的说法是 Java中基本类型将值作为参 ...
- 认识CSS样式
CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小.颜色.字体加粗等. 如下列代码: p{ font-size: ...
- hibernate_validator_08
内置的约束条件 Hibernate Validator包含了一些基本的使用比较广的约束,下面是一些Hibernate Validator给出的最常用的约束.另外Hibernate Validator还 ...