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

【JavaScript / JQuery事件委托如何实现？】的更多相关文章

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

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

JavaScript, JQuery事件委托

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

javascript事件委托和jquery事件委托

元旦过后,新年第一篇. 初衷:很多的面试都会涉及到事件委托,前前后后也看过好多博文,写的都很不错,写的各有千秋,自己思前想后,为了以后自己的查看,也同时为现在找工作的前端小伙伴提供一个看似更全方位的解读事件委托的地方来认识了解他的原理,本篇文章汇总了两个版本的事件委托:javascript.jquery; 事件委托的定义: 利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件. 事件委托的优势: 在js中添加到页面上的事件处理程序的个数直接影响到网页的运行性能.因为每个事件处理函数…

js进阶---12-12、jquery事件委托怎么使用

js进阶---12-12.jquery事件委托怎么使用一.总结一句话总结:通过on方法(事件委托),给要绑定事件的元素的祖先绑定事件,从而达到效果. 1.事件委托是什么? 通过事件冒泡,让子元素绑定的事件冒泡到父元素(或祖先元素)上,然后再进行处理. //使用事件委托,只在table上绑定一次事件 //可以动态绑定事件 $('table').on('click','td',function(){ //$(this).css('background','orange') alert('clic…

jQuery事件委托

jQuery事件委托 <ul id="ulBox"> <li data-id="1"></li> <li data-id="2"></li> <li data-id="3"></li> </ul> $("#ulBox").on('click','li',function(){ console.log($(this…

jquery事件委托详解

jQuery事件委托处理流程上一章分析jQuery.event.add的时候已经分析了事件绑定,再把绑定的部分源码抽出来 if ( !(eventHandle = elemData.handle) ) { eventHandle = elemData.handle = function( e ) { //当一个事件被调用后页面已经卸载,则放弃jQuery.event.trigger()的第二个事件, return typeof jQuery !== core_strundefined &&…

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

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

Jquery事件委托之Safari

什么是事件委托事件委托是Jquery中一种事件绑定的方式,不同于常见的事件绑定方式将事件绑定在目标元素上,而是将事件绑定在父级元素上通过事件冒泡来执行绑定函数. //常见的事件绑定(Jquery) $(element).click(function(){ //do something }) //事件委托(Jquery) $(parents).on("click",element,function(){ //do something }) 事件委托的原理事件委托将事件监听绑定在目标元…

转载： jQuery事件委托( bind() \ live() \ delegate()) [委托和绑定的故事]

转载:http://blog.csdn.net/zc2087/article/details/7287429 随着DOM结构的复杂化和Ajax等动态脚本技术的运用,事件委托自然浮出了水面.jQuery为绑定和委托事件提供了.bind()..live()和.delegate()方法.本文在讨论这几个方法内部实现的基础上,展示它们的优劣势及适用场合. 事件委托事件委托的事例在现实当中比比皆是.比如,有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三个人在公司门口等快递:二是委托给前台M…

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

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

javascript使用事件委托

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

jQuery事件委托之Safari失效的解决办法--摘抄

什么是事件委托事件委托是Jquery中一种事件绑定的方式,不同于常见的事件绑定方式将事件绑定在目标元素上,而是将事件绑定在父级元素上通过事件冒泡来执行绑定函数. //常见的事件绑定(Jquery) $(element).click(function(){ //do something }) //事件委托(Jquery) $(parents).on("click",element,function(){ //do something }) 事件委托的原理事件委托将事件监听绑定在目标元…

jquery 事件委托

什么事件委托? DOM在为页面中的每个元素分派事件时,相应的元素一般都在事件冒泡阶段处理事件.在类似 body > div > a 这样的结构中,如果单击a元素,click事件会从a一直冒泡到div和body(即document对象).因此,发生在a上面的单击事件,div和body元素同样可以处理.而利用事件传播(这里是冒泡)这个机制,就可以实现事件委托.具体来说,事件委托就是事件目标自身不处理事件,而是把处理任务委托给其父元素或者祖先元素,甚至根元素(document). 事件委托的使用情景…

jQuery事件委托方法 bind live delegate on

1.bind jquery 1.3之前定义和用法:主要用于给选择到的元素上绑定特定事件类型的监听函数语法: bind(type,[data],function(e)); 特点: a.适合页面元素静态绑定,只能调用已经存在的元素绑定事件 b.当页面加载完后,才可以进行bind(), 所以有可能产生效率问题 $("#box").bind("click",function(e){ $(this).css({"width":"20…

jquery 事件委托（利用冒泡）

将事件绑定在父元素上,格式$(父元素).on("事件名称","子元素选择器",function(方法体){}) <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"…

Javascript的事件委托

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

javaScript绑定事件委托 demo

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

jquery 事件委托绑定click的使用方法

直接绑定ul的click事件代码如下复制代码 $("ul").click(function(e) 例子代码如下复制代码 $(function(){ //$("ul").on('click',this,function(e){ $("ul").click(function(e){ $target = $(e.target); if ($target.is("h3")) { alert("h3&quo…

JavaScript jQuery 事件、动画、扩展

事件因为JavaScript在浏览器中以单线程模式运行,页面加载后,一旦页面上所有的JavaScript代码被执行完后,就只能依赖触发事件来执行JavaScript代码. 浏览器在接收到用户的鼠标或键盘输入后,会自动在对应的DOM节点上触发相应的事件.如果该节点已经绑定了对应的JavaScript处理函数,该函数就会自动调用. 由于不同的浏览器绑定事件的代码都不太一样,所以用jQuery来写代码,就屏蔽了不同浏览器的差异,我们总是编写相同的代码. 举个例子,假设要在用户点击了超链接时弹出提示框…

Javascript - Jquery - 事件

事件(Event) 文档事件文档的载入事件 ready(fn) $(document).ready(function () { }); //或$(function () {}); //或$(document).ready(fn)function fn() { } //或$(document).ready(fn = function () {}); 文档的键盘鼠标事件 keyup(fn) 键盘按下并抬起时发生 $(document).keydown(function () { alert(…

jquery事件委托遇到的小坑记录

jquery 事件委托三种事件绑定方式.bind(),.live(),.delegate()

http://www.ituring.com.cn/article/467# http://www.cnblogs.com/lvdabao/archive/2013/08/30/3290603.html http://developer.51cto.com/art/201103/249694.htm http://www.cnblogs.com/dumuqiao/archive/2011/09/09/2172511.html 非常好…

解密jQuery事件核心 - 委托设计（二）

第一篇 http://www.cnblogs.com/aaronjs/p/3444874.html 从上章就能得出几个信息: 事件信息都存储在数据缓存中对于没有特殊事件特有监听方法和普通事件都用addEventListener来添加事件了. 而又特有监听方法的特殊事件,则用了另一种方式来添加事件. 本章分析的重点: 通过addEventListener触发事件后,回调句柄如何处理? 具体来说就是,如何委派事件的,用到哪些机制,我们如果用到项目上是否能借鉴? 涉及的处理: 事件句柄的读取与处理…

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…

【jQuery源码】事件委托

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

jQuey事件委托

javascript的事件模型,采用"冒泡"模式,子元素的事件会逐级向上"冒泡",成为父元素的事件. 在需要为较多的元素绑定事件时应该使用事件委托 event delegation javascript事件传播 html如下: <body> <table> <tr><td id="targetTd"></td><td></td><td></td&…

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

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

JQuery --- 第三期 (jQuery事件相关)

个人学习笔记 1.JQuery事件绑定 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JQuery事件绑定</title> <script src="../jquery-1.12.4.js"></script> <script> $(functio…

javascript事件委托和jQuery事件绑定on、off 和one

一. 事件委托什么是事件委托?用现实中的理解就是:有100 个学生同时在某天中午收到快递,但这100 个学生不可能同时站在学校门口等,那么都会委托门卫去收取,然后再逐个交给学生.而在jQuery 中,我们通过事件冒泡的特性,让子元素绑定的事件冒泡到父元素(或祖先元素)上,然后再进行相关处理即可.如果一个企业级应用做报表处理,表格有2000 行,每一行都有一个按钮处理.如果用之前的.bind()处理,那么就需要绑定2000 个事件,就好比2000 个学生同时站在学校门口等快递,不断会堵塞路口,还会…