js的事件的代理和委托
来源:互联网 发布:数据库基础知识题库 编辑:程序博客网 时间:2024/05/20 05:30
本文要解释一下JavaScript事件的代理或者说委托的概念,首先直接上定义:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。上来就看定义,可能有点懵,所以到了最重要的解析部分。
<ul id="list"> <li>1</li> <li>2</li> <li>3</li></ul>
我现在有一个列表,想弹出每个li里的值,一般的做法是
var list = document.getElementById('list');var liArr = list.getElementsByTagName('li');for (var i = 0; i < liArr.length; i++) { liArr[i].addEventListener('click', function () { alert(this.innerHTML); });}
这个做法已经实现了想要的效果,但是试想一种情景
<ul id="list"> <li>1</li> <li>2</li> <li>3</li> …… <li>9999</li> <li>10000</li> </ul>
我现在有10000个li,要是做一个循环给每个li都加事件,简直是太耗性能了,于是事件的代理或者说委托就登场了。其实就是利用事件的冒泡原理来实现的。我点击一个元素,这个事件会沿着文档树一直向上传,直到根元素document。然后我给想要加事件的元素的父元素加上点击事件,委托它执行,然后再判断是它后代元素中的哪个元素触发的,运行相应函数。废话不多说,直接上代码。
document.getElementById('list').addEventListener('click', function (evt) { if (evt.target.tagName.toUpperCase() === 'LI') { alert(this.innerHTML); }});
这样写使代码变得简洁了,且没有了大量的循环,节省了内存,可以说是一举两得。这种委托父元素执行事件,并利用事件冒泡的原理执行子元素相应函数的方法就叫事件的代理,或者叫事件的委托。
0 0
- js的事件的代理和委托
- js的事件代理/委托
- JS的事件委托/代理(delegate)
- c#的委托(代理)和事件
- c#的委托(代理)和事件
- c#的委托(代理)和事件
- c#的委托(代理)和事件
- js事件委托/代理
- Js的事件委托
- js的事件委托
- js 事件的冒泡和委托
- js的事件代理和事件冒泡
- js事件委托(事件代理)
- js 事件委托(事件代理)
- 浅谈事件冒泡和事件捕获的应用场景——事件代理/事件委托
- 事件代理和事件委托
- 事件委托和事件代理
- 强大的js事件委托
- QML 基本元素
- python pandas 对时间序列文件处理代码
- 【Android】开发集——Camera/Device/File/Http/IOCallback/Log/TimerIO
- 进程控制:进程的创建、终止、阻塞、唤醒和切换
- 使用匿名内部类排序对象
- js的事件的代理和委托
- 《JAVA与模式》之单例模式
- Photo Maker产品免责声明
- git的基本用法
- linux struct file结构
- java 企业网站源码模版 有前后台 springmvc SSM 生成静态化
- Glusterfs下读写请求的处理流程
- Linux UART无法接受‘\r’即0X0D
- ArcGIS API for JavaScript在地图上添加一个标注图标