JS事件委托应用场景
2023-09-27 14:26:02 时间
给列表元素添加点击事件:
在javaScript中,添加到页面上的事件处理程序的数量,将直接关系到页面的整体运行性能。
<li>标签的数量很大时,循环为每个子元素添加事件,绝非好方法。
有一种优雅的方法,就是事件委托。
使用事件委托只为<ul>元素添加一个onclick事件处理程序。
因为有事件冒泡机制,单击每个<li>标签时,都会被这个函数处理。
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 </head> 10 11 <ul id="container"> 12 <li>1</li> 13 <li>2</li> 14 <li>3</li> 15 <li>4</li> 16 <li>5</li> 17 </ul> 18 19 <body> 20 <script> 21 document.getElementById('container').addEventListener('click', function (event) { 22 var target = event.target; 23 console.log(event) 24 if (target.tagName == 'LI') { 25 alert(target.innerText); 26 } 27 },false); 28 </script> 29 </body> 30 31 </html>
相关文章
- JS中的call()和apply()方法
- js - true和false
- jQuery 追加元素、拼接元素的方法总结(append、html、insertBefore、before等) 初识document.onkeydown及其兼容性问题 js学习笔记27----键盘事件 JavaScript onkeydown事件入门实例(键盘某个按键被按下)
- 服务器文档下载zip格式 SQL Server SQL分页查询 C#过滤html标签 EF 延时加载与死锁 在JS方法中返回多个值的三种方法(转载) IEnumerable,ICollection,IList接口问题 不吹不擂,你想要的Python面试都在这里了【315+道题】 基于mvc三层架构和ajax技术实现最简单的文件上传 事件管理
- js高级程序设计(十三)事件
- 【JavaScript】JS中如何取消”冒泡“事件(有图有示例)
- js事件拦截
- uniapp - 实现动态且 “可重复“ 开启与关闭动画,由 JS 点击 / 长按等事件控制开启 “某个元素“ 的 CSS 动画(类似常见的点赞动画效果可以一直重复触发动画)兼容 H5 App 小程序
- JS实现关闭当前子窗口,刷新父窗口及调用父窗口的方法
- JS判断数组是否包含某元素
- js node
- 最近使用学习node.js 用nodebb建个社区,欢迎技术宅入住
- JS异错面试题
- js 苹果手机 keyup 事件不生效的问题
- js实现冒泡事件,点击ul给子标签添加相同事件和阻止冒泡事件
- 浅析Node.js的宏任务与微任务、本轮与次轮循环、事件循环概念及其6个阶段解析以及代码分析nodejs与浏览器的Event Loop差异
- 配置webpack中externals来减少打包后vendor.js的体积
- js面试题(二)
- 华为OD机试 - 事件推送(JS)
- js 自定义事件
- 360极速浏览器UA怪异以及如何用js判断360浏览器
- js模版引擎handlebars.js实用教程——由于if功力不足引出的Helper
- javascript Date format(js日期格式化)(转)
- Knockout.Js官网学习(text绑定)