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 上(绑定 ...
随机推荐
- 三星笔记本R428安装xp win7双系统，切换系统重启才能进入系统解决办法。
三星笔记本 XP win7 双系统切换重启解决方法 三星笔记本有个奇怪的现象,就是装有XP和win7双系统 xp切换到win7.进系统是会重启一次,并且bios回复光驱为第一启动项,win7切换 ...
- [转] 【开源访谈】Muduo 作者陈硕访谈实录
关于开源访谈 开源访谈是开源中国推出的一系列针对国内优秀开源软件作者的访谈,以文字的方式记录并传播.我们希望开源访谈能全面的展现国内开源软件.开源软件作者的现状,着实推动国内开源软件的应用与发展. [ ...
- linux 之 yum 介绍 <转>
原文在这里 http://doophp.sinaapp.com/archives/linux/yum-setting-parameter.html 因为是程序员出身,平时虽然经常接触服务器,偶尔也会 ...
- 2015 UESTC Winter Training #10【Northeastern Europe 2009】
2015 UESTC Winter Training #10 Northeastern Europe 2009 最近集训都不在状态啊,嘛,上午一直在练车,比赛时也是刚吃过午饭,状态不好也难免,下次比赛 ...
- Unicode 与多字节编码
int _tmain(int argc, _TCHAR* argv[]) { //定义LPWSTR 类型的宽字符串 LPWSTR szUnicode = L"This is a Unicod ...
- 电脑安装win8.1后 前面板没有声音的解决办法
解决部分朋友在给电脑新安装win8.1系统后出现耳机插入电脑前面板音频口没有声音的问题 百度经验:jingyan.baidu.com 方法/步骤 1 1.安装声卡驱动(必须安装,否则无法完成设置) 2 ...
- 表达式：使用API创建表达式树（1）
表达式树可使用Expressions类的静态工厂方法来创建.这种用API的方式创建给予我们在编程极大的灵活性,MSDN上关于表达式的例子也不少,但在使用过程中还是会遇到许多麻烦,对有的表达式类,介绍得 ...
- 使用<span>标签为文字设置单独样式
这一小节讲解<span>标签,我们对<em>.<strong>.<span>这三个标签进行一下总结: 1. <em>和<strong& ...
- 31.Spring-开发流程.md
[toc] 1.简单开发流程 1.1引用类库 基本类库: ## 1.2创建spring配置文件,文件的名称为固定格式:applicationContext.xml或者bean.xml: <?xm ...
- 你好，C++（5）如何输出数据到屏幕、从屏幕输入数据与读写文件？
2.2 基本输入/输出流 听过HelloWorld.exe的自我介绍之后,大家已经知道了一个C++程序的任务就是描述数据和处理数据.这两大任务的对象都是数据,可现在的问题是,数据不可能无中生有地产生 ...