怎么确定事件委托的事件源

javascript 冒泡和事件源形成的事件委托

冒泡:即使通过子级元素的事件来触发父级的事件,通过阻止冒泡可以防止冒泡发生. 事件源:首先这个东西是有兼容行问题的,当然解决也很简单. 两者结合使用,形成的事件委托有两个优势: 1.减少性能消耗: 2.新添加的事件,也可以绑定时间,因为使用的是事件源而不是直接通过前面的程序来绑定. 以下例子,功能是通过事件冒泡的原理,将li的点击事件来触发ul的点击事件,在this指向确定的情况下,通过事件源的原理来确定当前点击的li,并获取li的内容.另外通过button的按钮可以添加li,而且这个li也可以

[JS]笔记14之事件委托

-->什么是事件委托-->事件委托原理-->事件委托优点-->事件源 / 目标源一.什么是事件委托通俗的讲,onclick,onmouseover,onmouseout等这些就是事件委托,就是这个事件本来应该加在某些元素上的,而你却加到其他元素上来完成这个事件. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &

从零开始的全栈工程师——js篇2.21（事件对象 arguments 阻止事件默认行为兼容事件委托事件源对象）

一.事件对象 1.常用的事件2.每个元素身上的事件都是天生存在的不需要我们去定义只需要我们给这个事件绑定一个方法当事件触发的时候就会执行这个方法 3.事件绑定的写法 ①div.onclick=function (dom 0级)②addEventListener( ) 或 attachEvent( ) (dom 2级事件绑定)③二者的区别:onclick是这个元素私有的属性天生自带的而addEventlistener是公有的属性从EventTarget(事件源)对象上继承来的④ie低版

JavaScript权威设计--事件冒泡，捕获，事件句柄，事件源，事件对象(简要学习笔记十八)

1.事件冒泡与事件捕获 2.事件与事件句柄 3.事件委托:利用事件的冒泡技术.子元素的事件最终会冒泡到父元素直到跟节点.事件监听会分析从子元素冒泡上来的事件. 事件委托的好处: 1.每个函数都是对象,都会占用内存,内存中对象越多,性能越差. 2.必须事先指定所有事件处理程序而导致的DOM访问次数,会延迟整个页面的交互就绪时间. 怎样处理由于事件较多引起的性能差: 1.采用事件委托技术,限制简历的连接数量 2.在不需要的时候移除事件处理程序例子: html: <div id=

js中的事件委托

原文 http://itindex.net/detail/48661-js-事件 1,什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件. 也就是:利用冒泡的原理,把事件加到父级上,触发执行效果. 好处呢:1,提高性能. 我们可以看一个例子:需要触发每个li来改变他们的背景颜色. <ul id="ul"> <li>

js_事件委托

起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它还有一个名字叫事件代理,JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件.那这是什么意思呢?网上的各位大牛们讲事件委托基本上都用了同一个例子,就是取快递来解释这个现象,我仔细揣摩了一下,这个例子还真是恰当,我就不去想别的例子来解释了

jQuery-1.9.1源码分析系列（十）事件系统——事件委托

jQuery的事件绑定有几个比较优秀的特点: 1. 可以绑定不限数量的处理函数 2. 事件可以委托到祖先节点,不必一定要绑到对应的节点,这样后添加的节点也照样能被处理. 3. 链式操作下面主要分析事件的委托设计.事件源我们成为委托节点,委托节点委托他的祖先节点替他执行事件处理,这个祖先节点被成为被委托节点. DOM的原生事件将处理绑定在相应的节点上,相应节点触发事件才能执行处理.将事件处理委托给祖先节点,这个事件处理是附加到祖先节点的.那么需要做到的是,原节点触发了事件,想要执行已经附加到祖先

js事件委托

什么是事件委托:通俗的讲,onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件. 也就是:利用冒泡的原理,把事件加到父级上,触发执行效果. 好处1,提高性能. 先看一个例子:需要触发每个li来改变他们的背景颜色. <ul id="ul"> <li>aaaaaaaa</li> <li>bbbbbbb</li> &l

js中的事件委托或是事件代理详解

起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它还有一个名字叫事件代理,JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件.那这是什么意思呢?网上的各位大牛们讲事件委托基本上都用了同一个例子,就是取快递来解释这个现象,我仔细揣摩了一下,这个例子还真是恰当,我就不去想别的例子来解释了

事件委托和JQ事件绑定总结

事件委托: 比喻:事件委托的事例在现实当中比比皆是.比如,有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三个人在公司门口等快递:二是委托给前台MM代为签收.现实当中,我们大都采用委托的方案(公司也不会容忍那么多员工站在门口就为了等快递).前台MM收到快递后,她会判断收件人是谁,然后按照收件人的要求签收,甚至代为付款.这种方案还有一个优势,那就是即使公司里来了新员工(不管多少),前台MM也会在收到寄给新员工的快递后核实并代为签收. 实现原理:我们知道,DOM在为页面中的每个元素分派事

js的事件委托

什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件. 也就是:利用冒泡的原理,把事件加到父级上,触发执行效果. 好处: 1,提高性能我们可以看一个例子:需要触发每个li来改变他们的背景颜色. <ul id="ul"> <li id="1">001</li> <li id=&

javascript事件监听与事件委托

事件监听与事件委托在js中,常用到element.addEventListener()来进行事件的监听.但是当页面中存在大量需要绑定事件的元素时,这种方式可能会带来性能影响.此时,我们可以用事件委托的方式来进行事件的监听. 每个事件都经历三个阶段捕获到达目标冒泡事件委托需要用到事件的冒泡,冒泡就是事件发生时,上层会一层一层的接收这个事件. 如下页面结构: <body> <div id="div1"> <div id="div2&qu

JS事件委托学习（转）

JS 事件委托就是利用冒泡原理,把事件加到父级上触发,执行效果. 好处: 1.提高性能 2.新添加的元素还会有之前的事件 <</</</</li></ul> 这样一个HTML结构我想要给LI增加一个鼠标点击的效果通常写法 window.onload ; i ) } }} 如果事件委托呢,我会把时间委托给ul 就把for 循环直接改 oUl.onclick )} 接下来我们想写过一个,给LI加一个鼠标经过的效果

事件委托(event delegation)

事件委托给我带来的第一印象是,如果可以的话请尝试得经常使用它,性能好! 通过字符串拼接后,并进行DOM插入,不会复制事件,此时需要进行事件委托了!!! 优点事件委托对于web应用程序的性能有如下几个优点: 1.需要管理的函数变少了 2.占用的内存少了 3.javascript代码和Dom结构之间的关联更少了 4.在改变DOM结构中的innerHTML时,不需要改动事件处理函数使用方法: 1.给一组元素的父级添加事件(通过冒泡机制) oUl.onclick=fun

js和jquery中的事件委托

[转+自己的修改] 概念: 什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件. 举个列子:有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三个人在公司门口等快递:二是委托给前台MM代为签收.现实当中,我们大都采用委托的方案(公司也不会容忍那么多员工站在门口就为了等快递).前台MM收到快递后,她会判断收件人是谁,然后按照收件人的要求签

JS与Jquery的事件委托——解决了绑定相同事件的问题

概念: 什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件. 举个列子:有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三个人在公司门口等快递:二是委托给前台MM代为签收.现实当中,我们大都采用委托的方案(公司也不会容忍那么多员工站在门口就为了等快递).前台MM收到快递后,她会判断收件人是谁,然后按照收件人的要求签收,甚至代为付款.这

javascript事件委托，事件代理，元素绑定多个事件之练习篇

<ul id="parent-list"> <li id="post-1">item1</li> <li id="post-2">item2</li> <li id="post-3">item3</li> <li id="post-4">item4</li> <li id="post-

js中的事件委托详解

概述: 那什么叫事件委托呢?它还有一个名字叫事件代理,JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件.那这是什么意思呢?网上的各位大牛们讲事件委托基本上都用了同一个例子,就是取快递来解释这个现象,我仔细揣摩了一下,这个例子还真是恰当,我就不去想别的例子来解释了,借花献佛,我摘过来,大家认真领会一下事件委托到底是一个什么原理: 有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三个人在公司门口等快递:二是委托给前台MM

JS中的事件委托（事件代理）

一步一步来说说事件委托(或者有的资料叫事件代理) js中事件冒泡我们知道,子元素身上的事件会冒泡到父元素身上. 事件代理就是,本来加在子元素身上的事件,加在了其父级身上. 那就产生了问题:父级那么多子元素,怎么区分事件本应该是哪个子元素的? 答案是:event对象里记录的有“事件源”,它就是发生事件的子元素. 它存在兼容性问题,在老的IE下,事件源是 window.event.srcElement,其他浏览器是 event.target 用事件委托有什么好处呢? 第一个好处是效率高,比如,不用f

javascript事件委托的原理与实现

事件委托事件流捕获:查找目标元素: 目标:执行目标的事件: 冒泡:依次执行祖先元素的事件. onmouseenter和onmouseleave不支持冒泡: onmouseover和onmouseout支持冒泡. 事件对象 event 属性target:可以判定当前点击的目标对象火狐谷歌: target srcElement 在IE低版本 event不兼容 window.event srcElement 要想获取到目标对象 3.事件委托将对自己的操作委托给父元素去执行 //box 是

怎么确定事件委托的事件源

热门专题