博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js 使用事件委托
阅读量:5865 次
发布时间:2019-06-19

本文共 633 字,大约阅读时间需要 2 分钟。

想象一下,如果你有一个无序列表,里面有一堆<li>元素,每一个<li>元素都会在点击的时候触发一个行为。这个时候,你通常会在每一个元素上添加一个事件监听,但是如果当这个元素或者你添加了监听的这个对象会被频繁的移除添加呢?这个时候,你在移除添加元素的同时需要处理事件监听的移除和添加。这个时候,我们就需要引入事件委托了。 

事件委托是在父级元素上添加一个事件监听,来替代在每一个子元素上添加事件监听。当事件被触发时,event.target会评估相应的措施是否需要被执行。下面我们给出了一个简单的例子: 

Javascript代码 
  1. // 获取元素,添加事件监听  
  2. document.querySelector('#parent-list').addEventListener('click', function(e) {  
  3.     // e.target 是一个被点击的元素!  
  4.     // 如果它是一个列表元素  
  5.     if(e.target && e.target.tagName == 'LI') {  
  6.         // 我们找到了这个元素,对他的操作可以写在这里。  
  7.     }  
  8. });  

上面的例子是不可思议的简单,当事件发生的时候,它没有轮询父节点去寻找匹配的元素或选择器,且它不支持基于选择器的查询(例如用class name,或者id来查询)。所有的JavaScript框架提供了委托选择器匹配。重点是,你避免了为每一个元素加载事件监听,而是在父元素上加一个事件监听。这样大大的增加了效率,并且减少了很多维护!

转载地址:http://mnynx.baihongyu.com/

你可能感兴趣的文章
对象引论
查看>>
CVTE2109春招笔试第一场前端编程题
查看>>
Flink 1.7 文档翻译活动期待大家的参与 | ApacheCN
查看>>
Terraform入门 - 3. 变更基础设施
查看>>
DNS域名解析过程
查看>>
ES6、7、8常用新特性总结(超实用)
查看>>
Apache Beam和BigQuery的错误处理(Java SDK)
查看>>
SpiderData 2019年2月12日 DApp数据排行榜
查看>>
来,膜拜下android roadmap,强大的执行力
查看>>
143. Reorder List
查看>>
【Redis源码分析】如何在Redis中查找大key
查看>>
web 项目如何进行 git 多人协作开发
查看>>
PAT A1053
查看>>
Linux和UNIX的关系及区别
查看>>
The project you were looking for could not be found
查看>>
去中心化交易所如何“惊世骇俗”?
查看>>
写个 Go 时间交并集小工具
查看>>
猴子数据让你深刻了解微信富媒体
查看>>
如何用webpack打包umd模块并测试打包结果
查看>>
降低成本,提高生产力—8句话讲清RPA的部署
查看>>