事件委托（事件代理）概述

什么是事件委托（事件代理）

事件委托（事件代理）是基于Js冒泡原理，把本来加在子元素身上的事件，加在了其父级身上。
通过event对象里记录的“事件源”，查找发生事件的真正子元素
获取事件源的方法存在兼容性问题，老IE浏览器是 window.event.srcElement，其他浏览器是 event.target

事件委托（事件代理）的优点

（1）可以大量节省内存占用，减少事件注册
（2）可以方便地动态添加和修改元素，不需要因为元素的改动而修改事件绑定
案例
页面有个ul包含着4个li，鼠标移动到li上，li背景变成红色，移出，背景恢复原色。

html文件：

<ul id="ul1"><li>111</li><li>222</li><li>333</li><li>444</li></ul>

js文件：

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

//jq写法$("#ul1").on('mouseover',function(ev){var ev = ev || window.event;var target = ev.target || ev.srcElement;if(target.nodeName.toLowerCase() == 'li'){target.style.background = "red";}});$("#ul1").on('mouseout',function(ev){var ev = ev || window.event;var target = ev.target || ev.srcElement;if(target.nodeName.toLowerCase() == 'li'){target.style.background = "";}});

事件委托（事件代理）概述相关推荐

JQuery 之事件委托(事件代理)
事件委托/事件代理: 事件委托就是利用冒泡的原理,把事件加到父级上,通过判断事件来源的子集,执行相应的操事件委托的写法: $(选择器).delegate( 事件真实发生在谁身上, 事件属性,匿名函 ...
js事件委托(事件代理)的原理以及优缺点
js事件委托/事件代理的原理以及优缺点什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上 ...
JS中的事件委托/事件代理详解
起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它 ...
js事件委托(事件代理)
起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它 ...
事件传播机制/事件委托/事件代理
事件传播机制分为三个阶段: 第一阶段:从window对象传导到目标节点,称为"捕获阶段" 第二阶段:在目标节点上触发,称为"目标阶段" 第三阶段:从目标节点传导 ...
事件委托（代理/委派）
事件委托也叫事件代理,jQuery中叫事件委派事件委托就是不给每个子元素设置事件侦听器,而是给其父元素设置事件侦听器,然后利用冒泡阶段的原理影响每个子节点给ul绑定注册事件,点击 li 标签后会冒 ...
详解js中EventListener监听器（事件委托/事件代理）
监听器: 语法: addEventListener(event,function,userCapture) 方法第一个参数写事件句柄,不需要加"on",直接写时间名就可以(如:c ...
JS 事件代理和事件委托
目录事件委托的概念理解为什么要用事件委托事件委托的原理: 事件代理(委托)实现总结: 事件委托的概念理解为什么叫事件委托?它还有一个名字叫事件代理. JavaScript高级程序设计上讲:事 ...
事件绑定、事件监听、事件委托
2019独角兽企业重金招聘Python工程师标准>>> 在JavaScript的学习中,我们经常会遇到JavaScript的事件机制,例如,事件绑定.事件监听.事件委托(事件代理)等 ...
JS事件委托的概念和作用
一.写在前头接到某厂电话问什么是事件代理的时候,一开始说addEventListener,然后他说直接绑定新的元素不会报dom不存在的错误吗?然后我就混乱了,我印象中这个方法是可以绑定新节点的.后面 ...

事件委托（事件代理）概述

事件委托（事件代理）概述

事件委托（事件代理）概述相关推荐

最新文章

热门文章