JS事件代理（也称事件委托）是什么，及实现原理

JS事件代理就是通过给父级元素（例如：ul,tr等等）绑定事件，不给子级元素（例如:li,td等等）绑定事件，然后当点击子级元素时，通过事件冒泡机制在其绑定的父元素上触发事件处理函数，主要目的是为了提升性能，因为我不用给每个子级元素绑定事件，只给父级元素绑定一次就好了，在原生js里面就是通过event对象的taget属性实现。

   var ul=document.querySelector("ul");ul.onclick=function(e){//e这里指event对象var target=e.target=e.target||e.srcElement;//target 获取触发事件的目标（li）if（target.nodeName.toLowerCase()==' li '）{//目标（li）节点名转小写字母，不转换的话是大写字母alert（target.innerHTML）}
}

jq方式实现相对而言简单

$('ul').on('click','li',function(){//事件逻辑
})

其中第二个参数指的是触发事件的具体目标，特别是给动态添加的元素添加事件。

JS事件代理（也称事件委托）是什么，及实现原理相关推荐

JavaScript系列—简述JS中的事件委托和事件代理
JS中的事件委托和事件代理什么是事件委托? 事件委托还有一个名字叫事件代理,JS高程上讲:事件委托就是利用事件冒泡,只制定一个时间处理程序,就可以管理某一类型的所有事件.我用取快递来解释这个现象: ...
JS 事件高级（包括DOM事件流，阻止事件冒泡，阻止事件默认行为，，，以及对我来说，很好用的事件代理）
事件对象概念事件处理函数:事件发生时调用的函数事件对象:window.event,内置的对象,事件发生的时候会将所有和事件相关的信息都存储在事件对象中,鼠标位置,事件类型,事件目标... //事件 ...
【DOM系列】你真的理解事件委托（事件代理）吗？
目录 1. 基本概念 1.1 原理 2. 事件冒泡和事件捕获代码演示 3. addEventListener的第三个参数 4. 事件委托阶段案例 4.1 事件冒泡案例 4.2 事件捕获案例 5. 经 ...
使用事件代理实现vue的手风琴组件
1.为什么要使用事件代理? 在项目中要做一个手风琴组件,需求是页面created事件中请求数据,以显示在列表中,加载数据时显示"正在加载",没有数据了就显示"没有更多数据 ...
javascript 事件冒泡和事件代理
事件冒泡简单的讲,当子元素的事件处理函数被触发(如onclick),该事件会从事件源(当前子元素)逐级向上层元素传递,触发祖先元素的 onclik 事件,一直到最外层 html 根元素. 这可能会带 ...
react组件事件代理的原理
React的事件系统和浏览器事件系统相比,主要增加了两个特性:事件代理.和事件自动绑定. 1.事件代理区别于浏览器事件处理方式,React并未将事件处理函数与对应的DOM节点直接关联,而是在顶层使用 ...
浏览器事件代理机制原理？
关于浏览器事件代理弄明白浏览器事件代理事前,先了解下事件.事件流. 一,事件 HTML DOM 允许 JavaScript 对 HTML 事件作出反应.即操作对应HTML元素时,会触发相应事件(包含 ...
9 jQuery事件代理
1. 事件代理介绍事件代理就是利用事件冒泡的原理(事件冒泡就是事件会向它的父级一级一级传递),把事件加到父级上,通过判断事件来源,执行相应的子元素的操作,事件代理首先可以极大减少事件绑定次数,提高性 ...
jquery实现事件代理
$('.parent').on('click','.child',function () {$(".parent").hide();}) 事件代理利用了事件冒泡的原理,通过在父级元 ...
javaScript事件（一）事件流
一.事件事件是文档或者浏览器窗口中发生的,特定的交互瞬间. 事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字. 事件是javaScript和DOM之间交 ...

JS事件代理（也称事件委托）是什么，及实现原理

JS事件代理（也称事件委托）是什么，及实现原理相关推荐

最新文章

热门文章