JS与Jquery的事件委托机制
传送:http://www.ituring.com.cn/article/467
概念:
什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件。
举个列子:有三个同事预计会在周一收到快递。为签收快递,有两种办法:一是三个人在公司门口等快递;二是委托给前台MM代为签收。现实当中,我们大都采用委托的方案(公司也不会容忍那么多员工站在门口就为了等快递)。前台MM收到快递后,她会判断收件人是谁,然后按照收件人的要求签收,甚至代为付款。这种方案还有一个优势,那就是即使公司里来了新员工(不管多少),前台MM也会在收到寄给新员工的快递后核实并代为签收。
原理:
利用冒泡的原理,把事件加到父级上,触发执行效果。
作用:
1.性能要好
2.针对新创建的元素,直接可以拥有事件
事件源 :
跟this作用一样(他不用看指向问题,谁操作的就是谁),event对象下的
使用情景:
•为DOM中的很多元素绑定相同事件;
•为DOM中尚不存在的元素绑定事件;
JS的事件委托
Jquery的事件委托
$(function(){ $('#ul1,#ul2').delegate('li','click',function(){ if(!$(this).attr('s')) { $(this).css('background','red'); $(this).attr('s',true); }else { $(this).css('background','#fff'); $(this).removeAttr('s'); } }) });
最新on()方法取替了delegate()方法
$(function(){ $('#ul1,#ul2').on('click','li',function(){ if(!$(this).attr('s')) { $(this).css('background','red'); $(this).attr('s',true); }else { $(this).css('background','#fff'); $(this).removeAttr('s'); } }) });
转载于:https://www.cnblogs.com/yi-mi-yangguang/p/6628705.html
JS与Jquery的事件委托机制相关推荐
- 原生JS及jQuery中事件委托的写法
在绑定节点事件处理程序时遇到的问题: 每个 函数都是对象,都会占用内存:内存中的对象越多,性能就越差. 其次,必须事先指定所有事件处理程 序而导致的 DOM访问次数,会延迟整个页面的交互就绪时间. 采 ...
- Javascript事件模型系列(二)事件的捕获-冒泡机制及事件委托机制
一.事件的捕获与冒泡 由W3C规定的DOM2标准中,一次事件的完整过程包括三步:捕获→执行目标元素的监听函数→冒泡,在捕获和冒泡阶段,会依次检查途径的每个节点,如果该节点注册了相应的监听函数,则执行监 ...
- 17、任务十六——事件委托机制、简单表单验证
0.题目 用户输入城市名称和空气质量指数后,点击"确认添加"按钮后,就会将用户的输入在进行验证后,添加到下面的表格中,新增一行进行显示 用户输入的城市名必须为中英文字符,空气质量指 ...
- JS 常见面试题 - 事件循环机制
一.浏览器JS异步执行的原理 一般常说js是一门单线程语言,那为什么可以异步执行且不发生阻塞呢? 常说的JS是单线程语言,是因为执行JS的引擎是单线程的,而浏览器本身是多线程的 浏览器主要含有: js ...
- JQuery 之 事件委托(事件代理)
事件委托/事件代理: 事件委托就是利用冒泡的原理,把事件加到父级上,通过判断事件来源的子集,执行相应的操 事件委托的写法: $(选择器).delegate( 事件真实发生在谁身上, 事件属性,匿名函 ...
- js中jquery鼠标事件(点击替换、鼠标移入、移出)
1.先添加三张图片 <img src="./vscode/images/1.jpg" width="300"><img src=". ...
- c#事件,委托机制(转)
事件(event)是一个非常重要的概念,我们的程序时刻都在触发和接收着各种事件:鼠标点击事件,键盘事件,以及处理操作系统的各种事件.所谓事件就是由某个对象发出的消息.比如用户按下了某个按钮,某个文件发 ...
- 事件委托技术原理和使用(js,jquery)
事件委托技术原理和使用(js,jquery) 原创 2016年03月10日 11:18:56 标签: 技术 / jquery / javascript 2555 一:事件委托技术原理 摘自http:/ ...
- JS的事件监听与委托机制
JS的事件监听机制 小故事: 很久以前有个叫Netscape的姑娘,她制订了Javascript的一套事件驱动机制(即事件捕获) 后来又有一个叫"IE"的小子,这孩子比较傲气,他认 ...
最新文章
- spring mvc-REST
- SpringBoot入门到精通_第2篇 _1分钟实战需求项目
- php 数据库编码,php怎么设置数据库编码方式
- idea ssm框架 mysql_IDEA 2017 整合SSM框架(使用Maven创建工程)
- 用excel做logistic回归分析_利用SPSS进行Logistic回归分析
- 企业常用OSPF组网配置示例
- Maya2018基础(二)展UV
- No.1大数据入门 | 环境搭建:VM、CentOS7安装及网络配置
- ubuntu20.04 安装Dukto
- 能提醒生日的软件 精准的提醒生日软件多功能便签超好用
- 【cocos2d-x入门实战】微信飞机大战之一:搞个飞机来玩玩
- 北京大学可视化发展前沿研究生暑期学校第三讲
- 信号与系统--冲激响应
- PE文件中对DOS存根的一些想法
- 云原生开发者训练营启动!3天教会你玩转Serverless
- 六度空间-用图进行BFS遍历
- 【转载】Spring5源码调试环境搭建
- 基于LabVIEW和Access数据库的温湿度监测系统上位机程序设计
- 基于RSSI的蓝牙室内定位流程
- 【项目】P2P下载帮