js和jquery中的事件委托

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

JQuery中的事件委托

JQuery 中的事件委托定义事件委托就是利用冒泡的原理,把事件加到父级上,通过判断事件来源的子集,执行相应的操作,事件委托首先可以极大减少事件绑定次数,提高性能:其次可以让新元素的子元素也可以拥有相同的操作.可以理解为生命一个全局标量,所有的子元素,都要执行我声明父元素的参数. 事件与事件委托代码对比事件 <!DOCTYPE html> <!DOCTYPE html> <html> <head> <meta charse…

JavaScript(jQuery)中的事件委托

一:什么是事件委托? 事件委托是利用事件冒泡,只指定一个事件处理程序来管理某一类型的所有事件. 二:为什么要用事件委托? 1.在JavaScript中添加到页面上的事件处理程序的个数直接关系到页面的整体运行性能.为什么呢?因为,每个事件处理函数都是对象,对象会占用内存,内存中的对象越多,性能就越差.此外,必须事先指定所有的事件处理程序而导致的DOM访问次数,会延迟整个页面的交互就绪时间. 2.对有很多个数据的表格以及很长的列表逐个添加事件,简直就是噩梦.所以事件委托,能极大地提高页面的运行性能,…

JS和jQuery中的事件总结（一）

学而时习之,小白现在天天写页面,基础知识还是要恶补的. 进入正题,什么是事件(此处单独对jQuery.JS)?就是JS和Html之间的交互时呢,用户和浏览器操作页面时的动作(其实是为引发的效果的执行操作),此处注明,这是楼主自己的理解哈. 1.页面加载事件 JS提供了一个 window.onload 它的执行时机呢,是页面完全加载完毕后,包括页面上的文件.图片等完全加载到浏览器后才开始执行: 另外,此方法仅能保存对一个函数的引用,会自动的用后面的覆盖前面的.看个例子: function A(){…

JS和JQuery中的事件托付学习笔记

事件托付事实上并非一个非常高级的技巧,比方在一个页面里面.当仅仅存在两个button的时候.可能你给button加入监听是这种:(本文不考虑浏览器兼容性.关于事件的兼容性可參考前面的学习笔记) <div id="container"> <button id="btn1">button1</button> <button id="btn2">button2</button> </di…

js和jQuery中的事件绑定与普通事件

普通事件,是指直接对元素进行事件注册,然后触发而事件绑定是将事件注册到元素上两者区别就是在于普通事件不可以重复添加多个事件,若添加也会覆盖,只会触发其中一个事件(最后注册的那个) 而事件绑定是可以重复绑定多个事件,而且都可以触发 <html> <a class="ack1">点击触发绑定事件</a><br><br> <a class="ack2">点击触发普通事件</a> <…

JavaScript和JQuery中的事件\委托链\事件冒泡\事件捕获,兼容所有浏览器

有做过北大青鸟培训讲师经验的我,如今在一家公司做技术部经理的职位,发现有很多程序员的基本功相当糟糕,在组织企业内部培训时讲解了一些案例,总结了一些经典代码,希望对自己和有需要的人提供一些帮助吧: JavaScript版本: DOM0事件不支持委托链 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-T…

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

JavaScript(jQuery)中的事件委托 https://www.cnblogs.com/zhoushengxiu/p/5703095.html js中的事件委托或是事件代理详解 https://www.cnblogs.com/liugang-vip/p/5616484.html…

简单说 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…

怎么理解js中的事件委托

怎么理解js中的事件委托时间 2015-01-15 00:59:59 SegmentFault 原文 http://segmentfault.com/blog/sunchengli/1190000002487141 主题 jQuery 随着DOM结构的复杂化和Ajax等动态脚本技术的运用,事件委托自然浮出了水面.jQuery为绑定和委托事件提供了.bind()..live()和.delegate()方法.本文在讨论这几个方法内部实现的基础上,展示它们的优劣势及适用场合. 事件委托事件委托…

js实例分析JavaScript中的事件委托和事件绑定

我们在学习JavaScript中,难免都会去网上查一些资料.也许偶尔就会遇到“事件委托”(也有的称我“事件代理”,这里不评论谁是谁非.以下全部称为“事件委托”),尤其是在查JavaScript的事件处理的时候.但是,大多数时说的是“事件绑定”,对于“事件委托”,或是不提,或是浅尝辄止.对于我这个比较好奇的人来说,实在很蛋疼.尤其是想更多的了解“事件委托”的时候. 这次干脆一劳永逸,自己把查出来的资料整理成一篇日志,总结这块的知识,也方便需要的朋友查阅. JavaScript中事件传播过程那些事儿…

Javascript事件模型系列（三）jQuery中的事件监听方式及异同点

作为全球最知名的js框架之一,jQuery的火热程度堪称无与伦比,简单易学的API再加丰富的插件,几乎是每个前端程序员的必修课.从读<锋利的jQuery>开始,到现在使用jQuery有一年多的时间了,对jQuery算是比较了解了,唯一没做到的就是读源码.网上看到有人写jQuery源码解析的,我也没细看,个人觉得如果光是为了解析源码而解析源码,未免有点太劳神了,没有实际用途,我更倾向于在实际应用中遇到不懂的方法或是文档说明不清楚的地方,可以查找到相应的位置看下源码,足矣. 闲话不多讲了,今天的主…

jQuery中的事件监听方式及异同点

jQuery中的事件监听方式及异同点作为全球最知名的js框架之一,jQuery的火热程度堪称无与伦比,简单易学的API再加丰富的插件,几乎是每个前端程序员的必修课.从读<锋利的jQuery>开始,到现在使用jQuery有一年多的时间了,对jQuery算是比较了解了,唯一没做到的就是读源码.网上看到有人写jQuery源码解析的,我也没细看,个人觉得如果光是为了解析源码而解析源码,未免有点太劳神了,没有实际用途,我更倾向于在实际应用中遇到不懂的方法或是文档说明不清楚的地方,可以查找到相应的位置看…

jQuery中绑定事件的几种方法

以click事件为例,jQuery中绑定事件有三种方法: (1)target.click(function(){}); (2)target.bind("click",function(){}); (3)target.live("click",function(){}); 第一种方法很好理解,其实就和普通JS的用法差不多,只是少了一个on而已第二.三种方法都是绑定事件,但是二者又有很大的不同,下面着重讲解一下,因为这个如果用到Jquery的框架的话是用的挺多的,尤…

jQuery中的事件绑定方法

在jQuery中,事件绑定方法大致有四种:bind(),live(), delegate(),和on(). 那么在工作中应该如何选择呢?首先要了解四种方法的区别和各自的特点. 在了解这些之前,首先要知道,不管你用的是(live/ bind / delegate)之中那个方法,最终都是jQuery底层都是调用on方法来完成最终的事件绑定;.unbind(), .die(), .undelegate(),也是一样的都是通过.off()来实现的; 因此从某种角度来讲除了在书写的方便程度及习惯上挑选,不…

jQuery学习笔记（三）jQuery中的事件

目录加载DOM 事件绑定合成事件事件冒泡移除事件一．加载DOM Javascript 与HTML之间的交互是通过用户操作浏览器页面引发的事件来处理的.jQuery提供了丰富的事件处理机制.从上篇博客中,我们知道浏览器先是加载DOM树的,在加载DOM元素之后,浏览器就开始为元素添加事件.所以,首先要明白浏览器是通过什么方法加载DOM的.在js中,加载DOM的方法是通过window.onload方法,而在jQuery中使用的是$(document).ready()方法.这两种方法的区别在于…

Jquery中的事件和动画

在学习Jquery中的过程中我们绝大部分都用到了事件的操作,也可以说事件是Jquery中必不可少的一部分,我们常见的一些事件有单击事件,鼠标事件,键盘事件等等.在Jquery中的学习中为了能使让页面以更绚丽的方式呈现给用户浏览,往往会用到动画.下面我主要就针对事件和动画进行详细的说明. 一.Jquery中的事件我们说事件总体上可以分为两大类:简单事件和复合事件.这里的简单事件和JavaScript中的事件几乎完全一样,都含有windos的事件,鼠标事件,键盘事件,表单事件等,只是在JavaSc…

jQuery中的事件机制深入浅出

昨天呢,我们大家一起分享了jQuery中的样式选择器,那么今天我们就来看一下jQuery中的事件机制,其实,jQuery中的事件机制与JavaScript中的事件机制区别是不大的,只是,JavaScript中调用是原生的函数方法,而jQuery中调用的绑定的是jQuery中的对象方法,那么在昨天的第一篇中,我们已经说过了jQuery对象和DOM对象之间的转换,至于其中的转换的原理,我们就需要去分析一下jQuery中的源码了,这个我们在源码分析中再去做讨论, 首先呢,我们先来看一下,jQuery中…

【jQuery基础学习】03 jQuery中的事件与动画

关于jQuery中的事件 js与HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的. jQuery增加并扩展了基本的事件处理机制,jQuery不仅提供了更加优雅的事件处理方法,而且极大地增强了事件处理能力. $(document).ready()只需要等文档结构加载完就能执行,而window.onload还要等到文档元素所关联的元素(比如图片)加载完才行. 而因为图片未加载完时ready()事件就执行了,因此图片的长宽属性未必有效,要想解决这个问题可以用$(document).lo…

锋利的jQuery读书笔记---jQuery中的事件

jQuery中的事件: 1.加载DOM:注意window.onload和$(document).ready()的不同 2.事件绑定 3.合成事件 --2和3的详细信息见代码- <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script type="text/javascript" src="../../…

jQuery中绑定事件bind() on() live() one()的异同

jQuery中绑定事件的四种方法,他们可以同时绑定一个或多个事件 bind()-------------------------版本号小于3.0(在Jquery3.0中已经移除,相应unbind()也移除) live()--------------------------版本号小于1.7(在Jquery1.7中已经移除,相应die()也移除) delegate()-------------------版本号小于1.7(在Jquery1.7中已经移除) on()------------------…

jQuery 中的事件绑定

一.事件概念和数据库中的触发器一样,当操作了数据的时候会引发对应的触发器程序执行一样,JS 中的事件就是对用户特定的行为作出相应的响应的过程,其实上就是浏览器监听到用户的某些行为的时候会执行对应绑定程序. 二.事件的绑定在 html元素上将触发事件的行为和事件响应的程序关联起来的过程就是事件绑定.在绑定事件的时候需要先取得 html 中的按钮,但是此时html 还没有加载完毕,所以不能取得按钮元素(button).此时我们可以将js 的导入放到页面的最后(这是之前的方案),也可以使用一…

JQuery制作网页—— 第七章 jQuery中的事件与动画

1. jQuery中的事件: ●和WinForm一样,在网页中的交互也是需要事件来实现的,例如tab切换效果,可以通过鼠标单击事件来实现 ●jQuery事件是对JavaScript事件的封装,常用事件分类 ●基础事件鼠标事件键盘事件 window事件表单事件 ●复合事件鼠标光标悬停鼠标连续点击 2.基础事件: ●语法: 时间名=”函数名()”; 或: DOM 对象.事件名=函数 ●载入事件:在jQuery中,常用的window事件有文档载入事件,它对应的方法是ready(). ●…

jQuery中的事件和动画以及视频展示效果实例

经过这几天学习jQuery中的事件和动画,对jQuery更深的认识,接下来先把视频展示效果的代码贴出来,最后把我在学习jQuery事件和动画之后总结的思维导图 <!doctype html> <html> <head> <meta charset="utf-8"> <title>视频展示效果实例</title> <script type="text/javascript" src=&quo…

jquery-11 jquery中的事件切换如何实现

jquery-11 jquery中的事件切换如何实现一.总结一句话总结:事件切换hover()和toggle()函数.参数两个,都是函数,依次执行两个函数. 1.如何实现单击切换图片? 用toggle()方法,参数为两函数 26 $('img').toggle( 27 function(){ 28 this.src='b.png'; 29 }, 30 function(){ 31 this.src='a.png'; 32 } 33 ); 2.如何实现谋元素鼠标移入和移出执行不同的函数? 用h…

锋利的jQuery ——jQuery中的事件和动画（四）

一.jQuery中的事件 1)加载DOM $(document).ready()和window.onload的区别 1>执行时机 $(document).ready(){} 方法内注册的事件,只要DOM就绪就会被执行. window.onload则是所有内容加载完毕后才会触发. 2>多次使用 js的onload事件一次只能保存对一个函数的引用,他会自动用后面的函数覆盖前面的函数. 3>简写方式 $(document).ready(function(){ 编写代码})==$(funct…

jQuery笔记（三）jQuery中的事件

; padding:0;} body { font-size:13px; line-height:130%; padding:60px;} #panel { width:300px; border:1px solid #0050D0;} .head { height:24px; line-height:24px; text-indent:10px; background:#96E555; cursor:pointer; width:100%;} .content { padding:10px;…

jQuery：详解jQuery中的事件（二）

上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件.事件冒泡和事件移除等内容. 接上篇jQuery:详解jQuery中的事件(一) 3.合成事件 jQuery有两个合成事件——hover()方法和toggle()方法,同ready()方法一样,这些都是jQuery自定义的方法. hover()方法:hover()方法的语法结构为: hover(enter, leave); hover()方法用于模拟鼠标悬停事件.当鼠标移动到元素…

jQuery：详解jQuery中的事件（一）

之前用过一些jQuery的动画和特效,但是用到的部分也不超过10%的样子,感觉好浪费啊——当然浪费的不是jQuery,而是Web资源.后来就想深入研究下jQuery的内部机理,读过两遍jQuery源代码,但是自觉还差的好远,跟好多大神(比如阮一峰)的理解还是有很大差距.现在就一点一点积累自己的知识体系,记录自己学到的和自己所理解的jQuery. JavaScript和HTML之间的交互式通过用户和浏览器操作页面时引发的事件机制来处理的.当文档或者它的某些元素发生某些变化或操作时,浏览器就会自动生…

jQuery中的事件与动画 (你的明天Via Via)

众所周知,页面在加载时,会触发load事件:当用户单击某个按钮时,会触发该按钮的click事件. 这些事件就像日常生活中,人们按下开关,灯就亮了(或者灭了),往游戏机里投入游戏币就可以启动游戏一样, 通过种种事件实现各项功能或执行某项操作.事件在元素对象与功能代码中起着重要的桥梁作用. 在jQuery中,事件总体分为两大类:简单事件和复合事件. jQuery中的简单事件,与JavaScript中的事件几乎一样,都含有window事件.鼠标事件.键盘事件.表单事件等, 只是其对应的方法名称有略微不…

【js和jquery中的事件委托】的更多相关文章