【Javascript的事件委托】的更多相关文章

JavaScript中事件委托(事件代理)详解

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

javascript使用事件委托

事件委托是javascript中一个很重要的概念,其基本思路就是利用了事件冒泡的机制,给上级(父级)元素触发事件的dom对象上绑定一个处理函数.在当有需要很多dom对象要绑定事件的情况下,可以使用事件委托.即使是各个dom对象所触发的事件不同的时候,也可以通过事件委托,利用switch语句按需绑定事件,可以帮助我们减少大量的DOM绑定带来的内存开销. 从事件冒泡时开始就发生了事件委托,我们可以直接给父元素绑定事件监听,用来检测在其子元素内发生的事件.这也是类似 SproutCore(http:/…

JavaScript / JQuery事件委托如何实现？

一:什么是事件委托? 事件委托是利用事件冒泡,只指定一个事件处理程序来管理某一类型的所有事件. 事件委托就是利用事件冒泡原理实现的! 事件冒泡:就是事件从最深节点开始,然后逐步向上传播事件: 例:页面上有一个节点树,div > ul  > li  >  a 比如给最里面的a 加一个click 事件,那么事件就会一层一层的往外执行,执行顺序 a > li > ul > div,  有这样一个机制,当我们给最外层的div 添加点击事件,那么里面的ul , li  , a  …

Javascript的事件委托

在谈js的事件委托之前,先来简单说说js事件的一些基础知识吧. 什么是事件?Javascipt与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器中发生的一些特定的交互瞬间. 什么是事件流?事件流描述的是从页面接受事件的顺序.事件流主要分为两种,事件冒泡和事件捕获. 什么是事件冒泡和事件捕获? 事件冒泡即事件开始时有最具体的元素(文档中嵌套最深的那个节点) 接收,然后逐级向上传播到较为不具体的节点. 比如有那么一个节点树,document>html>body>div,当我们给di…

javaScript绑定事件委托 demo

事件绑定通常发生在 onload 或 DOMContentReady , 事件绑定占用 处理时间 占用内存, 而且不是每个事件都会被 点击执行. 由此 事件委托 可以优化事件绑定行为.. 事件逐层冒泡 直到被父级元素捕获. 事件代理  给外层元素绑定一个处理事件, 就可以处理子元素上出发所有事件. DOM 标准 事件三个阶段: 捕获 到达目标. 冒泡 IE 不支持捕获, 但冒泡够用了. event.currentTarget 事件处理程序当前正在处理事件的那个元素 event.target 事件…

JavaScript之事件委托（附原生js和jQuery代码）

事件委托的原理依赖于事件冒泡,可以通过给父元素的事件委托来确定是哪个子元素触发了事件从而做一系列操作. 使用事件委托的优点 1.操作子元素时不用一一遍历,可以根据事件触发的对象而进行相应操作 dom结构如下: <ul id = "oUl"> <li class = "item"></li> <li class = "item"></li> <li class = "ite…

JavaScript, JQuery事件委托

1.引言 现实当中,前台MM收到快递后,她会判断收件人是谁,然后按照收件人的要求签收,甚至代为付款.(公司也不会容忍那么多员工站在门口就为了等快递); 这种事件委托还有个好处,就是即便公司又来很多员工,前台MM照样可以签收新员工的快递,新员工即便刚来但一样拥有拿自己快件的方法: 2.概念 通俗来讲: 事件有:onclick.onmouseover.onmouseout等等:委托呢,就是让别人来做,这件事情本身是加在元素上,然而你却加载别人身上来做,完成事件: 3.原理 利用冒泡原理,将事件加在父…

Javascript事件模型系列（二）事件的捕获-冒泡机制及事件委托机制

一.事件的捕获与冒泡 由W3C规定的DOM2标准中,一次事件的完整过程包括三步:捕获→执行目标元素的监听函数→冒泡,在捕获和冒泡阶段,会依次检查途径的每个节点,如果该节点注册了相应的监听函数,则执行监听函数.以下面的HTML结构为例: <div id="parentdiv"> 父亲 <div id="childdiv">孩子</div> </div> 执行的流程应该是这样的: 下面是一组例子,分别点击孩子节点可以清楚的…

简单说 JavaScript中的事件委托(下)

说明 上次我们说了一些,关于 JavaScript中事件委托的 基础知识,这次我们继续来看. 解释 先来一段代码 <!doctype html> <html lang="en"> </head> <body> <ul id=ul> <li id='li1'>1</li> <li id='li2'>2</li> </ul> <script> ul.oncli…

javascript事件监听与事件委托

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