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 上(绑定 ...
随机推荐
- Python学习之四【变量】
变量:用于引用(绑定)对象的标识符 语法: >>变量名=对象 (数值,表达式等) 如计算圆的面积 PI=3.14 redius:12.3 area=PI*radius**2(**在pyth ...
- 登录网站爬虫（保持Cookie不变）
平时经常需要到学校的信息门户去查看课表及其他信息,于是想做一个爬虫 ,可以自动替我登录并且得到这些信息,于是今天动手写了一个爬虫: 首先登录学校的信息门户:http://cas.whu.edu.cn/ ...
- java之迭代器
迭代这个名词对于熟悉Java的人来说绝对不陌生.我们常常使用JDK提供的迭代接口进行java collection的遍历: Iterator it = list.iterator();while(it ...
- JavaScript--动态更改CSS样式
JavaScript太强大了,虽然是弱语言,不过一点都不输于Java 可以自行设置随机数,来动态更改CSS样式,每一次都是不一样的感觉,这个小功能挺实用的 <!DOCTYPE html> ...
- 下载文档时Safari浏览器下载后出现".html"问题
下载代码是需要设置 Response.ContentType = "application/octet-stream", 不要设为application/x-msdownload, ...
- Excel：您尝试打开的文件的格式与文件扩展名指定的格式不一致
报错信息: 打开文件时提示"您尝试打开的文件xxx.xls的格式与文件扩展名指定的格式不一致.打开文件前请验证文件没有损坏且来源可信.是否立即打开该文件?",卸载Office 20 ...
- 《编写高质量代码－－Web前端开发修炼之道》读书笔记
前言 这两周参加公司的新项目,采用封闭式开发(项目成员在会议室里开发),晚上加班到很晚,所以没时间和精力写原创博客了,今天就分享下这篇<编写高质量代码--Web前端开发修炼之道>读书笔记吧 ...
- 重新开始学习javase_类再生（类的合成和继承）
一.合成在新类里简单地创建原有类的对象.我们把这种方法叫作“合成” 为进行合成,我们只需在新类里简单地置入对象句柄即可.举个例子来说,假定需要在一个对象里容纳几个 String对象.两种基本数据类型以 ...
- .NET,你真的 知道了吗
搞清自己是干什么的 有人问你是做什么的,回答是:"我是做,NET开发的",有的人也会问:"那.NER.是什么?"刚开始我认为是一个开打工具,后认为是一个平台,一 ...
- cxf框架使用(一)
1.创建调用接口 @WebService public interface IQueryBusinessService { public @WebResult(name="QueryBusi ...