什么是事件委托？什么时候用？

js中事件冒泡我们知道，子元素身上的事件会冒泡到父元素身上。
事件代理就是，本来加在子元素身上的事件，加在了其父级身上。

事件委托就是通过事件冒泡的原理，利用父级去触发子级的事件（即事件绑定在父节点上）

那就产生了问题：父级那么多子元素，怎么区分事件本应该是哪个子元素的？

答案是：event对象里记录的有“事件源”，它就是发生事件的子元素。

它存在兼容性问题，在老的IE下，事件源是
window.event.srcElement，其他浏览器是 event.target

用事件委托有什么好处呢？

第一个好处是效率高，比如，不用for循环为子元素添加事件了
第二个好处是，js新生成的子元素也不用新为其添加事件了，程序逻辑上比较方便

好吧，下面还是用例子来说，更容易理解。

例子1. 页面有个ul包含着4个li，鼠标移动到li上，li背景变成红色，移出，背景恢复原色。

如果按照以前的写法，代码如下：

<ul id="ul1"><li>111</li><li>222</li><li>333</li><li>444</li></ul><script type="text/javascript">window.onload = function(){var oUl = document.getElementById('ul1');var aLi = oUl.children;console.log(aLi);//传统方法，li身上添加事件，需要用for循环，找到每个lifor (var i=0;i<aLi.length;i++) {aLi[i].onmouseover = function() {this.style.background = 'red';}aLi[i].onmouseout = function(){this.style.background = '';}}//for结束}</script>

现在用事件委托的方式，onmouseover、onmouseout方法要加在ul身上了，再通过找事件源的方式，改变li背景。加个判断。通过事件源的nodeName判断是不是li，是才做出反应，不是不理它。为了防止nodeName在不同浏览器获取的字母大小写不同，加个toLowerCase()

<script type="text/javascript">window.onload = function(){var oUl = document.getElementById('ul1');oUl.onmouseover = function(ev){var ev = ev || window.event;var oLi = ev.srcElement || ev.target;if(oLi.nodeName.toLowerCase() == 'li'){oLi.style.background = 'red';}}oUl.onmouseout = function(ev){var ev = ev || window.event;var oLi = ev.srcElement || ev.target;if(oLi.nodeName.toLowerCase() == 'li'){oLi.style.background = '';}}}</script>

第二个好处：js新生成的子元素也不用新为其添加事件了，程序逻辑上比较方便

上面的文件，假如我再新添加个按钮，点击按钮，ul里就新增加个li，如果用传统的方法，for循环为li添加事件，问题就出现了，最开始有的4个li是有onmouseover和onmouseout事件的，但是后来动态生成的li里没有这两个事件处理函数，因为for循环的时候它还没生成。怎么办呢？只能在按钮点击后，生成li，然后再为生成的li再绑定事件，真是麻烦的很。而事件委托的方式就没事，当后来动态生成的li出现的时候，不用做改变，移到它身上，还是变色的，因为事件是绑定在ul身上的。

使用事件委托的优势在于哪里？
1.比如你有1000个li标签，并且要为这1000个li标签绑定事件，通常的做法就是用一个循环，给每个li标签绑定事件，但是这有个什么问题，每个函数都是一个对象，是对象就会占用内存，对象越多，内存占用率就越大，自然性能就越差了，你内存够吗？

2.减少dom操作，不必访问1000个dom节点。

3.在日常工作中，经常会遇到的一个问题，页面的内容是通过ajax请求获得的，内容数量也是不固定的，就不能先在html里面写死，而是通过动态添加的方法，将标签嵌入到html里面，然而动态添加的标签，在外部绑定事件是无效的，只能在ajax请求结束的时候绑定事件（也就是你的success函数里面），因为一开始绑定事件的时候，这些标签没有获取到，ajax绑定之后才能获取，这样会出现什么问题，没一次ajax请求，我就要给添加的标签绑定事件，是不是又回到了第1点，而且有时候还会出现事件重复绑定的情况，但是你用事件委托不会出现这种情况。

//html
<ul id="oul"><li>1</li><li>2</li><li>3</li>
</ul>//js$("#oul").click(function(e){//e对象在jquery里面做了兼容处理//target目标元素，el即是你点击的对象var el = e.target;//el是js对象,如果要用jquery请用$(el)//el.tagName 对象的标签名，一定要大写if(el.tagName === "LI"){//你要执行的代码console.log(el.innerHTML);}
})

原文链接：https://blog.csdn.net/qq_34562689/article/details/79152494

事件委托(事件代理)的作用?

1.支持为同一个DOM元素注册多个同类型事件

2.可将事件分成事件捕获和事件冒泡机制

什么是事件委托？什么时候用？相关推荐

dom元素滚动条高度 js_DOM 事件与事件委托
点击事件 <div class = 爷爷><div class = 爸爸><div class = 儿子>文字</div></div> &l ...
JavaScript：事件冒泡和事件委托
2019独角兽企业重金招聘Python工程师标准>>> JavaScript事件代理和委托(Delegation) JavaScript事件冒泡和事件委托 JavaScript:通过 ...
html5 点击事件委托,jquery事件委托
一,.on( events [, selector ] [, data ], handler(eventObject) )// .on( events [, selector ] [, data ] ...
javascript和jq的事件委托
2019独角兽企业重金招聘Python工程师标准>>> 今天在公司,有个需求是,通过ajax动态查询数据,回来,再添加到一个ul的li元素中,例如(点击生成 li 模拟,加载数据生成 ...
事件委托技术原理和使用（js，jquery）
事件委托技术原理和使用(js,jquery) 原创 2016年03月10日 11:18:56 标签: 技术 / jquery / javascript 2555 一:事件委托技术原理摘自http:/ ...
js中的事件委托或是事件代理详解(转载)
起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它 ...
JS事件委托或者事件代理原理以及实现
事件委托(事件代理)原理:简单的说就是将事件交由别人来执行,就是将子元素的事件通过冒泡的形式交由父元素来执行. 为什么要用时间委托? 在JavaScript中,添加到页面上的事件处理程序数量将直接关系 ...
在C#中使用代理的方式触发事件 (委托和事件 ) （转）
From: http://www.cnblogs.com/gzhnan/articles/1859477.html 在C#中使用代理的方式触发事件 (委托和事件 ) 事件(event)是一个非常重要 ...
JS事件流和事件委托
在上一篇<JS知识点大杂烩>中说到了事件流但没有详细的介绍,这篇文章就来介绍一下事件流. 事件流一共由三个阶段分别是: 1.捕获阶段 2.目标阶段 3.冒泡阶段复制代码事件绑定大家都知 ...
Javascript事件模型系列（二）事件的捕获-冒泡机制及事件委托机制
一.事件的捕获与冒泡由W3C规定的DOM2标准中,一次事件的完整过程包括三步:捕获→执行目标元素的监听函数→冒泡,在捕获和冒泡阶段,会依次检查途径的每个节点,如果该节点注册了相应的监听函数,则执行监 ...

什么是事件委托？什么时候用？

什么是事件委托？什么时候用？相关推荐

最新文章

热门文章