极简略介绍 javascript 事件代理(事件委托)
来源:互联网 发布:java实现iis域认证 编辑:程序博客网 时间:2024/06/06 19:25
极简略介绍 javascript 事件代理(事件委托)
概念
自身的事件通过冒泡机制代理到父辈元素上,让父辈元素代替自己来执行所要执行的事件;
用途
- 父元素当中多个子元素含有相同事件;
- 动态创建的元素含有某种事件;
首先谈谈多个子元素问题
<div class="goods-list"> <div class="goods-view"> <img src="img/default.jpg"> </div> <div class="goods-info"> <div class="goods-synopsis"> 商品列表 </div> <div class="goods-math"> <span class="goods-reduce">-</span> <input type="text" value="1" /> <span class="goods-add">+</span> </div> </div> </div>
--比如上面的DOM结构,点击图片的时候弹出一个轮播,里面是商品的各种图片,下面有商品的数量的加减;点击事件有很多,如果我们每个元素都创建一个click事件,将会出现大量的click事件;--这个时候不妨使用事件代理,将各个事件代理到父辈元素goods-list上面,所创建的click事件也就是仅仅一个,优化了我们的代码,也优化了页面性能;
接下来谈谈动态创建元素需要挂载一些事件
像js的dom操作,最常见的就是增删改查,新增的dom不会执行事先写好的事件;如下:
<div class="demo-box"> </div> <script> $(doucument).ready(function(){ var newDom = '<span class="new-dom">click me</span>'; $('.demo-box').append(newDom); $('.new-dom').click(function(){ alert('success') }) }) </script>
--如果你执行了以上代码。你会发现,点击了new-dom并不会有任何效果,这是为什么呢?因为js查询dom结构的时候,并没有查到new-dom这个节点,所以new-dom上的任何事件都不会执行;如果我们想要这个点击事件起作用怎么办呢?这个时候事件代理就来到你面前了;--那么该怎么用呢?我们知道每个元素都有target这么个事件属性;我们可以通过已存在的父辈元素点击的时候找到"target["属性名"]"这一元素;判断当前点击的时候是否是我们需要执行方法的元素;然后去执行我们所需要执行的事件;--如果使用的jq,直接使用on事件即可;delegate不建议再使用了,毕竟从3.0版本之后就删除了delegate方法,既然我们有on这么好的方法,何不放弃使用delegate呢,
javascript事件代理到这里就这里就结束了;感谢您的阅读
微信搜索关注公众号 【大前端js】,回复vue教程,react教程,webpack实战等等,获得不同的视频教程,大量视频教程等你来拿;阅读公众号最新一篇文章获取更多视频
阅读全文
0 1
- 极简略介绍 javascript 事件代理(事件委托)
- JavaScript 事件委托/事件代理
- JavaScript事件委托/事件代理
- javascript-委托事件(事件代理)
- JavaScript事件代理和委托(Delegation)
- JavaScript事件代理和委托(Delegation)
- JavaScript事件代理和委托(Delegation)
- 浅谈Javascript事件委托(代理)
- JavaScript事件代理和委托(Delegation)
- javascript中的事件委托(代理)
- JavaScript事件代理和委托(Delegation)
- JavaScript事件代理和委托(Delegation)
- JavaScript事件代理和委托(Delegation)
- javascript中的事件委托(代理)
- JavaScript事件代理和委托(Delegation)
- JavaScript事件代理和委托
- JavaScript事件代理和委托
- javascript之事件委托(事件代理)
- Wine QQ 安装
- SpringBoot之starter(R)
- 解决apt-get install E: 无法定位软件包问题
- Redis与Memcached的区别
- MSM RF Driver Configuration
- 极简略介绍 javascript 事件代理(事件委托)
- 大数据Spark企业级实战版【学习笔记】-----交互式SQL处理框架Spark SQL
- java.io.IOException: Expected at least 2 bytes
- hadoop安装,并配置单节点hadoop集群
- 4.S5PV210看门狗定时器相关寄存器描述
- Hadoop 及 Hive 压缩应用
- ArrayList源码解析
- Redis笔记——技术点汇总
- hdu 2473