JavaScript(jQuery)中的事件委托
一:什么是事件委托?
事件委托是利用事件冒泡,只指定一个事件处理程序来管理某一类型的所有事件。
二:为什么要用事件委托?
1.在JavaScript中添加到页面上的事件处理程序的个数直接关系到页面的整体运行性能。为什么呢?因为,每个事件处理函数都是对象,对象会占用内存,内存中的对象越多,性能就越差。此外,必须事先指定所有的事件处理程序而导致的DOM访问次数,会延迟整个页面的交互就绪时间。
2.对有很多个数据的表格以及很长的列表逐个添加事件,简直就是噩梦。所以事件委托,能极大地提高页面的运行性能,减少开发人员的工作量。
三:JavaScript中的例子
我们以下面的HTML代码为例,用事件委托的方式实现当鼠标单击某个li元素的时候,li元素的背景变成红色。

1 <ul id = "lists">
2 <li>列表1</li>
3 <li>列表2</li>
4 <li>列表3</li>
5 <li>列表4</li>
6 <li>列表5</li>
7 <li>列表6</li>
8 </ul>

下面是JavaScript代码:

1 var lists = document.getElementById("lists");
2
3 lists.addEventListener("click",function(event){
4
5 var target = event.target;
6 //防止父元素ul也触发事件
7 if(target.nodeName == "LI"){
8 target.style.backgroundColor = "red";
9 }
10 })

单击列表4,实现效果:
三:jQuery中的例子
jQuery中的事件委托方式比较丰富,就以同样的例子来说:
1、用on方法,代码如下:

1 $(function(){
2 $("#lists").on("click","li",function(event){
3 var target = $(event.target);
4 target.css("background-color","red");
5 })
6 })

2.用delegate()方法,代码如下:

1 $(function(){
2 $("#lists").delegate("li","click",function(event){
3 var target = $(event.target);
4 target.css("background-color","red");
5 })
6 })

on()方法和delegate()方法对于事件委托的写法很像。并且执行事件委托的时候只有子元素(本文中的li)会触发事件,而代为执行的父元素(本文中为ul)不会触发事件,所以我们不需要盘判断触发事件的元素节点名,这一点明显优于原生的JavaScript。
3.用bind()方法,代码如下:

1 $(function(){
2 $("#lists").bind("click","li",function(event){
3 var target = $(event.target);
4 if(target.prop("nodeName")=="LI"){
5 target.css("background-color","red");}
6 })
7 })

bind()方法同原生的JavaScript实现方法一样,当父元素代子元素执行事件时,父元素也会触发事件,所以我们需要判断一下触发事件的元素名。此外,用bind()方法给元素绑定事件的时候要注意,它只能给已经存在DOM元素添加事件,不能给未来存在DOM
元素添加添加事件。如果要频繁地添加DOM元素,并且给新添加的DOM元素绑定事件的话,用live(),delegate(),on()等方法。鉴于jQuery从1.7之后就不推荐live()和delegate()方法了,所以大家还是使用on()方法吧。
JavaScript(jQuery)中的事件委托的更多相关文章
- JQuery中的事件委托
JQuery 中的事件委托 定义 事件委托就是利用冒泡的原理,把事件加到父级上,通过判断事件来源的子集,执行相应的操作,事件委托首先可以极大减少事件绑定次数,提高性能:其次可以让新元素的子元素也可以拥 ...
- JavaScript和JQuery中的事件\委托链\事件冒泡\事件捕获,兼容所有浏览器
有做过北大青鸟培训讲师经验的我,如今在一家公司做技术部经理的职位,发现有很多程序员的基本功相当糟糕,在组织企业内部培训时讲解了一些案例,总结了一些经典代码,希望对自己和有需要的人提供一些帮助吧: Ja ...
- js和jquery中的事件委托
[转+自己的修改] 概念: 什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却 ...
- js中的事件委托或是事件代理
JavaScript(jQuery)中的事件委托 https://www.cnblogs.com/zhoushengxiu/p/5703095.html js中的事件委托或是事件代理详解 https: ...
- 简单说 JavaScript中的事件委托(下)
说明 上次我们说了一些,关于 JavaScript中事件委托的 基础知识,这次我们继续来看. 解释 先来一段代码 <!doctype html> <html lang="e ...
- js实例分析JavaScript中的事件委托和事件绑定
我们在学习JavaScript中,难免都会去网上查一些资料.也许偶尔就会遇到“事件委托”(也有的称我“事件代理”,这里不评论谁是谁非.以下全部称为“事件委托”),尤其是在查JavaScript的事件处 ...
- Javascript事件模型系列(三)jQuery中的事件监听方式及异同点
作为全球最知名的js框架之一,jQuery的火热程度堪称无与伦比,简单易学的API再加丰富的插件,几乎是每个前端程序员的必修课.从读<锋利的jQuery>开始,到现在使用jQuery有一年 ...
- JavaScript中的事件委托机制跟深浅拷贝
今天聊下JavaScript中的事件委托跟深浅拷贝 事件委托 首先呢,介绍一下事件绑定 //方法一:通过onclick <button onclick="clickEvent()&qu ...
- jQuery中的事件监听方式及异同点
jQuery中的事件监听方式及异同点 作为全球最知名的js框架之一,jQuery的火热程度堪称无与伦比,简单易学的API再加丰富的插件,几乎是每个前端程序员的必修课.从读<锋利的jQuery&g ...
随机推荐
- DBUtils结果集处理器介绍
common-dbutils.jar是Apache组织提供的一个对JDBC进行简单封装的开源工具类库,使用它能够简化JDBC应用程序的开发,同时也不会影响程序的性能. 1.QueryRunner类 ① ...
- css 样式加载次序
一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字 4 拥有最高的优先权(本人理解为:先加载1的样式,然后用2的样式覆盖1中的样式,3.4同理) 浏览器缺省设置(浏览器默认的样式 ...
- Angular面试题三
十六.一个 angular 应用应当如何良好地分层? 目录结构的划分 1.对于小型项目,可以按照文件类型组织,比如: css Js { controllers models services ...
- numpy数组的创建
创建数组 创建ndarray 创建数组最简单的方法就是使用array函数.它接收一切序列型的对象(包括其他数组),然后产生一个新的含有传入数据的Numpy数组. array函数创建数组 import ...
- Linux基础入门之网络属性配置
Linux基础入门之网络属性配置 摘要 Linux网络属性配置,最根本的就是ip和子网掩码(netmask),子网掩码是用来让本地主机来判断通信目标是否是本地网络内主机的,从而采取不同的通信机制. L ...
- HTML5新增的标签和属性归纳
收集总结的HTML5的新特性,基本除了IE9以下都可以使用. HTML5语法 大部分延续了html的语法 不同之处:开头的 <!DOCTYPE html> <html lang=&q ...
- Oracle 数据库实现数据更新:update、merge
工作中遇到的数据更新,学习记录. 1.使用update进行数据更新 1)最简单的更新 update tablea a set a.price=1.00 2)带条件的数据更新 update tablea ...
- FTP自动上传
注:该脚本上传的压缩文件,通过文件资源管理器拿下来后会提示压缩文件损坏.使用 ftp -s:d:\audit_log\ftp_upload.txt 方法可行(http://www.cnblogs.co ...
- Python实例---FTP小程序
[更多参考] 点击下载
- cmd pyhton
在cmd中运行python解释器: 1.同时执行多条指令,可在多条指令中间使用 & 连接 >>> print('123') &print('223') 123 223