事件委托(event delegation)

事件委托给我带来的第一印象是,如果可以的话请尝试得经常使用它,性能好!

通过字符串拼接后,并进行DOM插入,不会复制事件,此时需要进行事件委托了!!!

优点

事件委托对于web应用程序的性能有如下几个优点:

1.需要管理的函数变少了

2.占用的内存少了

3.javascript代码和Dom结构之间的关联更少了

4.在改变DOM结构中的innerHTML时,不需要改动事件处理函数


使用方法:

1.给一组元素的父级添加事件(通过冒泡机制)

oUl.onclick=function(){};

2.寻找事件源(促发事件的源元素)

var oSrc=oEvent.srcElement||oEvent.target;

3.判断事件源(一个父级下所有的自己都可以促发这个事件,如果只能特定的事件源促发委托的事件的话,需要判断tagName)

oSrc.tagName == ‘INPUT‘&&oSrc.value == ‘删除‘

4.事件源执行事件逻辑

例如:oSrc.style.background=‘red‘;

时间: 2024-10-09 19:44:56

事件委托(event delegation)的相关文章

javascript 事件委托 event delegation

事件委托 event delegation 一.概念: 假设我们有很多个子元素,每个元素被点击时都会触发相应事件,普通的做法是给每个子元素添加一个事件监听. 而,事件委托则是给它们的父元素添加一个事件监听器,子元素上没有任何事件监听.当子元素被点击时,这个点击事件冒泡到父元素上,然后父元素上绑定的事件监听来分析和处理这是哪个子元素被点击了. 二.例子1:一个ul及几个li: <ul id="parent-list" style="border:1px solid bla

事件委托(event delegation) 或叫 事件代理

比较好的介绍文章: 关于事件委托的整理 ,另附bind,live,delegate,on区别:https://www.cnblogs.com/MagicZhao123/p/5980957.html js中的事件委托或是事件代理详解:https://www.cnblogs.com/liugang-vip/p/5616484.html 使用委托的优点:原本需要给多个元素添加事件的现在只需要给他们的父元素添加事件,提高性能,提高可读性. 提示:使用事件委托时,如果注册到目标元素上的其他事件处理程序使用

事件代理 event delegation

JS - 事件代理 如果你想给网页添加点JavaScript的交互性,也许你已经听过JavaScript的事件代理(event delegation),并且觉得这是那些发烧友级别的JavaScript程序员才会关心的什么费解的设计模式之一.事实上,如果你已经知道怎么添加JavaScript的事件处理器(event handler),实现事件代理也是件轻而易举的事情. JavaScript事件是所有网页互动性的根基(我指的是真正的互动性,而不仅是那些CSS下拉菜单).在传统的事件处理中,你按照需要

JavaScript事件委托的技术原理

如今的JavaScript技术界里最火热的一项技术应该是‘事件委托(event delegation)’了.使用事件委托技术能让你避免对特定的每个节点添加事件监听器:相反,事件监听器是被添加到它们的父元素上.事件监听器会分析从子元素冒泡上来的事件,找到是哪个子元素的事件.基本概念非常简单,但仍有很多人不理解事件委托的工作原理.这里我将要解释事件委托是如何工作的,并提供几个纯JavaScript的基本事件委托的例子. 假定我们有一个UL元素,它有几个子元素: <ul id="parent-l

js的事件委托机制

如今的JavaScript技术界里最火热的一项技术应该是'事件委托(event delegation)'了.使用事件委托技术能让你避免对特定的每个节点添加事件监听器:相反,事件监听器是被添加到它们的父元素上.事件监听器会分析从子元素冒泡上来的事件,找到是哪个子元素的事件.基本概念非常简单,但仍有很多人不理解事件委托的工作原理.这里我将要解释事件委托是如何工作的,并提供几个纯JavaScript的基本事件委托的例子. 假定我们有一个UL元素,它有几个子元素: <ul id="parent-l

JavaScript 事件委托的技术原理

如今的 JavaScript 技术界里最火热的一项技术应该是'事件委托(event delegation)'了.使用事件委托技术能让你避免对特定的每个节点添加事件监听器:相反,事件监听器是被添加到它们的父元素上.事件监听器会分析从子元素冒泡上来的事件,找到是哪个子元素的事件.基本概念非常简单,但仍有很多人不理解事件委托的工作原理.这里我将要解释事件委托是如何工作的,并提供几个纯JavaScript的基本事件委托的例子. 假定我们有一个UL元素,它有几个子元素: 1 2 3 4 5 6 7 8 <

Javascript的事件委托和事件处理

随着Ajax和RIA越来越成为主流,Javascript对事件(Event)的支持也得到了越来越多的关注.像雅虎这样的公司正在突破RIA的极限,让web应用程序在浏览器中更有效的运行,就像桌面应用程序一样.雅虎的邮箱应用就是一个很好的例子. 雅虎的一些工程师给我们展示了提高Javascript应用程序性能的技术.其中有提到强大的事件处理架构.提高性能的要旨就是用事件委托(Event Delegation)而非传统的事件处理(Event Handling). 我发现一个问题是,网上大部分的例子是用

javascript中的事件委托

这几天看到一个面试题,大概就是,让你给1000个li都添加一个click事件,应该怎么添加?大多数人第一开始的感觉可能就是,每个li上边都添加一个呗,那要是这样的话,估计面试的时候就会GG了,这里就是撤出了我们的事件冒泡和捕获机制,以及事件委托机制,对于上边这些,我们慢慢来看. 首先说一下事件冒泡和事件捕获机制,事件冒泡是有微软公司提出来的,事件捕获是有网景公司提出来的,当时两家是争论的不可开交,后来w3c也没办法,就采取了折中的方式,事件产生后先捕获后冒泡, 通常,在js中监听事件的方法共有三

HTML 事件(三) 事件流与事件委托

本篇主要介绍HTML DOM中的事件流和事件委托. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三) 事件流与事件委托 4. HTML 事件(四) 模拟事件操作[未发布] 目录 1. 事件流 1.1 何为事件流 1.2 事件流的三个阶段 1.3 addEventListener()注册事件流的阶段 1.4 阻止事件流的传播 2. 事件委托 2.1 何为事件委托 2.2 ul.li场景示例 2.3 JQuery的事件委托