首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

jQueryon()、bind()、live()、delegate()之间的区别

一个简单的HTML页面看起来就像是这个样子: ? 事件冒泡 当我们点击一个链接,其触发了链接元素的单击事件,该事件则引发任何我们已绑定到该元素的单击事件上的函数的执行。...click事件接着会向树的根方向传播,广播到父元素,然后接着是每个祖先元素,只要是它的某个后代元素上的单击事件被触发,事件就会传给它。 ? 操纵DOM的语境,document是根节点。...接下来就详细说下几者之间的区别: 1 .bind() .bind()是直接绑定在元素上,也很好的解决了浏览器事件处理的兼容问题。...对于利用ID选出来的元素是非常好的,不仅仅是很快的可以hook上去(因为一个页面只有一个id),而且当事件发生,handler可以立即被执行(相对于后面的live, delegate)实现方式; 缺点...它会绑定事件到所有的选出来的元素上 它不会绑定到它执行完后动态添加的那些元素上 当元素很多时,会出现效率问题 当页面加载完的时候,你才可以进行bind(),所以可能产生效率问题 2 .live()

1.2K30
您找到你想要的搜索结果了吗?
是的
没有找到

25个常规方法优化你的jquery代码

浏览器不能同时加载JS脚本(大多数情况下),这意味着如果你同一加载很多脚本的话,将减缓页面加载速度。因此,如果每个页面都要加载这些脚本,你应该考虑发布之前将这些脚本整合成一个稍大的JS脚本。...PC上Firefox 3花费了1066毫秒间(可以设想一下IE6的情况!)...如果你向DOM添加了新的元素,尽管这些新元素被选择器所匹配,但是这些新元素并不会绑定上事件处理(你同意的观点?),因此不会有事件发生。 ...当使用事件代理,你能够事件被DOM绑定后仍然可以添加多个被匹配的元素到其中,而它们同样能够正常工作。 13. 利用classes存储状态 这是html存储信息最基本的方法。...如何得知图片已加载完毕 这也一个没有很好文档说明的问题(至少查找没看到),但是创建照片库、旋转灯笼效果等方面,它是相当常见的需求。而这在jQuery很容易实现。

1.6K10

使用IE6看老赵的博客——比较完美版(可以在线查看、回复)

上一个版本主要是测试一下的想法,也是熟悉一下jQuery,代码这个东东不动手写一下是很难弄明白的。   有想法,写代码,出现错误,修改错误 = 不断进步。   带着问题去学习,动力就很大了。...onclick事件。...然后事件根据属性(myurl)里面提取新的页面内容就可以了。   ...,请单击 运行代码  单击运行代码”按钮,然后会弹出来一个新的页面,然后在按一下浏览器里的“转向”,等上几秒钟就可以看到老赵的博客首页了。  ...而且还可以回复哦。因为都在一个域里面,嘿嘿。  在线运行功能借用了一下“司徒正美”的博客里的方法。

53780

jQuery」基础 - 03

因为ul的li是JS动态创建的,页面加载Docoment并没有此元素,选择器并不能选取。...事件处理 off() 解绑事件 当某个事件上面的逻辑,特定需求下不需要的时候,可以把该事件上的逻辑移除,这个过程我们称为事件解绑。...jQuery 多库共存 实际开发,很多项目连续开发十多年,jQuery版本不断更新,最初的 jQuery 版本无法满足需求,这时就需要保证旧有版本正常运行的情况下,新的功能使用新的jQuery版本实现...凡是软件开发中用到了软件的复用,被复用的部分都可以称为组件,凡是应用程序已经预留接口的组件就是插件。...,然后存储给本地存储 重新渲染加载数据列表 因为a是动态创建的,我们使用on方法绑定事件 1.7.6 案例:toDoList 正在进行和已完成选项操作 当我们点击了小的复选框,修改本地存储数据,再重新渲染数据列表

2.8K30

21道关于性能优化的面试题(附答案)

对于图片懒加载可以页面添加一个滚动条事件,判断图片是否可视区域内或者即将进入可视区域,优先加载。...src属性为空,会重新加载当前页面,影响速度和效率,尽量避免HTML标签写 Style属性 4、移动端性能如何优化? 优化方式如下。 尽量使用CSS3动画,开启硬件加速。...利用性能分析工具监测性能,包括静态 Analyze工具和运行时的 Profile工具(Xcode工具栏依次单击 Product→ Profile项可以启动)。...比如测试程序的运行时间,当单击 Time Profiler项,应用程序开始运行,这就能获取到运行整个应用程序所消耗时间的分布和百分比。...脚本处理不当会阻塞页面加载、渲染,因此使用时需注意。 (1)把CSS写在页面头部,把 JavaScript程序写在页面尾部或异步操作

1.7K20

【面试】1093- 21 道关于性能优化的面试题(附答案)

对于图片懒加载可以页面添加一个滚动条事件,判断图片是否可视区域内或者即将进入可视区域,优先加载。...src属性为空,会重新加载当前页面,影响速度和效率,尽量避免HTML标签写 Style属性 4、移动端性能如何优化? 优化方式如下。 尽量使用CSS3动画,开启硬件加速。...利用性能分析工具监测性能,包括静态 Analyze工具和运行时的 Profile工具(Xcode工具栏依次单击 Product→ Profile项可以启动)。...比如测试程序的运行时间,当单击 Time Profiler项,应用程序开始运行,这就能获取到运行整个应用程序所消耗时间的分布和百分比。...脚本处理不当会阻塞页面加载、渲染,因此使用时需注意。 (1)把CSS写在页面头部,把 JavaScript程序写在页面尾部或异步操作

1.6K20

使用脚本操作UpdatePanel控件的问题

因为UpdatePanel是一个异步的回发页面。这个页面初次加载的时候自然随着整个页面的刷新加载加载,因此作用于页面级别的jQuery代码可以起到作用。...但是等到点击button之后,仅仅是UpdatePanel的内部内容刷新了,整个页面根本不刷新(换句话说,整个页面jQuery根本没有执行)。因此没有任何作用了。   ...后者则从客户端的角度(加载了所有Html以及服务端自动生成的脚本等),可以进行额外的控制了。一般我们开发人员主要考虑在这两个事件处理事情居多。...同样地,这两个事件:  【相同点】一旦页面刷新,或者点击Submit页面导致整个页面回发,或者位于UpdatePanel的按钮导致局部页回发,Page_Load和add_load照样执行。  ...单击Button的时候,就UpdatePanel回发,因此page方面的事件逐一被激发,最后重新加载UpdatePanel,然后Application的load事件才被激发(全部页面加载完毕)。

1.6K100

JS DOM学习笔记

6、onload(页面加载后触发):网页加载完毕触发,浏览器是一边下载文档、一边解析执行,可能会出现JavaScript执行时需要操作某个元素,这个元素还没有加载,如果这样就要把操作的代码放到body...元素的onload事件是元素自己加载完毕触发,body onload才是全部加载完成。...‘右键菜单’触发) 9、window.location对象: window.location.href = "*.html"; //重新导航到新页面可以取值,也可以赋值     window.location.reload...innerText; FireFox里使用textContent 动态为网页或元素绑定事件IE绑定事件的方法是attachEvent; FireFox绑定事件的方法是addEventListener...、CSS都加载完毕后才被触发;而jQuery的ready则是Dom元素创建完毕后被触发,这样可以提高网页的响应速度 15、js打印一个对象的所有属性: //传入一个对象 function (swiper

4K40

AJAX常见面试问题

大家好,又见面了,是你们的朋友全栈君 1.工作当中会和后台交互? 那你能说说封装好的 ajax里的几个参数 ? url: 发送请求的地址。...动态更新页面的情况下,用户无法回到前一个页面状态,因为浏览器仅能记忆历史记录的静态页面。...一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙;用户通常会希望单击后退按钮能够取消他们的前一次操作,但是Ajax应用程序,这将无法实现。...答案是肯定的,用过Gmail的知道,Gmail下面采用的Ajax技术解决了这个问题,Gmail下面是可以后退的,但是,它也并不能改变Ajax的机制,它只是采用的一个比较笨但是有效的办法,即用户单击后退按钮访问历史记录...(例如,当用户Google Maps单击后退,它在一个隐藏的IFRAME中进行搜索,然后将搜索结果反映到Ajax元素上,以便将应用程序状态恢复到当时的状态。)

1.8K20

加点JavaScript魔法

03 页面加载完成后执行函数 很明显,将需要在每个页面加载后立即运行一些JavaScript代码。运行的函数将搜索页面中用户名的所有链接,并使用Bootstrap的弹出窗口组件配置它们。...jQuery JavaScript库作为Bootstrap的依赖项加载,因此将利用它。当使用jQuery,你可以用$(...)封装来注册一个函数,函数将会在页面加载完毕后运行。...可以将它添加到app/templates/base.html模板,以便它可以应用程序的每个页面运行: app/templates/base.html:页面加载完毕后运行函数 ......这个函数将在页面加载完成时运行,并且当完成,将为所有页面配置悬停和弹出行为。现在要集中精力来寻找链接。 回顾第十四章,实时翻译中被调用的HTML元素具有唯一的ID。...当我刚刚创建的元素上调用popover()初始化函数,Bootstrap框架会为动态地插入弹出组件 06 鼠标悬停事件 正如我上面提到的,Bootstrap的popover组件使用的悬停行为不够灵活

3.8K10

web前端开发初学者十问集锦(5)

1.JS的立即执行函数的用法 (1)立即执行函数的定义 立即执行函数(Immediately Invoked Function)是页面加载立即被执行的函数。...,触发事件之后,页面好像重新刷新载入似的,写在页面内的JS脚本从最上面又开始重新执行。...那么JS事件处理函数中使用return的作用是什么呢?原来JavaScript事件调用函数用return返回值实际上是对window.event.returnvalue进行设置。...JavaScript循环给元素添加onclick事件局部变量的值均相同的怪异现象! 故事还没有结束,现在注释掉alert,然后单击任意页面的span,你觉得会弹出什么值呢?0,1或者是2。...); //或者简写成 $(function(){ //执行的内容 }); JQuery ready()的方法执行的时间就是指Dom Ready,他的作用或者意义就是:DOM加载完成后就可以可以

85520

前端学习资料整理

当我们修改原型,与之相关的对象也会继承这一改变。...事件是?IE与火狐的事件机制有什么区别? 如何阻止冒泡? 我们在网页的某个操作(有的操作对应多个事件)。例如:当我们点击一个按钮就会产生一个事件。是可以被 JavaScript 侦测到的行为。...如下的经验规则: 1.当JavaScript要在页面加载过程动态建立一些Web页面的内容,应将JavaScript放在body。...2.定义为函数并用于页面事件的JavaScript应当放在head标记,因为它会在body之前加载。...采用这种方法,页面就不会被脚本搞得一团糟,易于阅读,每个页面,总可以同一个位置找到脚本。 移动端的点击事件的有延迟,时间是多久,为什么会有? 怎么解决这个延时?

3.4K20

前端成神之路-03_jQuery

事件处理 off() 解绑事件 ​ 当某个事件上面的逻辑,特定需求下不需要的时候,可以把该事件上的逻辑移除,这个过程我们称为事件解绑。...多库共存 ​ 实际开发,很多项目连续开发十多年,jQuery版本不断更新,最初的 jQuery 版本无法满足需求,这时就需要保证旧有版本正常运行的情况下,新的功能使用新的jQuery版本实现,这种情况被称为...凡是软件开发中用到了软件的复用,被复用的部分都可以称为组件,凡是应用程序已经预留接口的组件就是插件。...核心思路: 不管按下回车,还是点击复选框,都是把本地存储的数据加载页面,这样保证刷新关闭页面不会丢失数据 // 3....// 1.当我们点击了小的复选框,修改本地存储数据,再重新渲染数据列表。

3K20

JavaScript 开发者需要了解的15个 DevTools 技巧

首先,从 DevTools 菜单的 More tools 子菜单打开 Coverage 。重新加载页面,面板将用条形图显示未使用代码的百分比: ?...单击任何 JavaScript 文件,未使用的代码会用红条突出显示。 5. 找到DOM更改代码 当事件被触发,很难确定哪个函数负责更新特定的 HTML DOM 元素。...断点有的时候并不好用,例如,如果在运行 1000 次的循环的最后一次循环报错了。这时你可以添加一个条件断点,让它仅在满足特定条件才触发断点,例如 i > 999 。...这些请求会显示 DevTools Network 面板可以使用 XHR 按钮进行过滤。 DevTools 显示了很多信息,但是有时你需要重新运行一次 Ajax 调用。...它还将显示 Overrides 选项卡和 localfiles 目录可以 Chrome 或使用任何代码编辑器来编辑文件,每当重新加载页面,都将使用更新的版本。 14.

4.7K20

继续死磕前端

1.1 jquery 选择器 还记到大明湖畔(CSS)的夏雨荷(选择器)?选择器可以快速定位到元素并为其应用样式效果。jquery 选择器的选择规则与 CSS 相同,只是目的是为其添加操作。...除了选择元素,还可以选择样式呢!啥都能找到,强不强?既然都能找到了,重新赋值也必须到位!...html('xxx'); jquery 获取或者设置某个属性值可以使用如下方法: // 取出图片的地址 var $src = $('#img1').prop('src');...当我们验证邮箱格式、手机号、身份证号必不可少,那么 jquery 如何使用呢?...jquery 将它封装成了一个函数 $.ajax(),我们可以直接用这个函数来执行ajax请求。 此部分超级重要!超级重要!超级重要! ajax需要在服务器环境下运行

2.8K10

使用 Tampermonkey 编写高级跨网站自动化任务脚本

TM 具有以下特点: 方便的脚本管理:位于右上方的 TM 图标显示正在运行的脚本的数量,单击图标就可以看到正在运行的脚本和可能在这个网页上运行的脚本。...兼容性:编辑的脚本不仅可以 Chrome 上运行,也可以借助 Greasemonkey 火狐上运行,同时脚本支持 ES6。...我们可以使用这个配置 引入 jQuery 不过要注意:通过 @require 加载的脚本及其“use strict”语句可能会影响用户脚本的 strict 模式!...如果用户单击此按钮,则将自动允许所有未来的请求。 用户还可以通过“脚本设置”选项卡的用户域白名单添加“*”来白名单所有请求。...然后将 style 标签追加到 body ,就这么简单。 有的人会觉得,TM 追加网站样式一点要用这么 low 的方式

4.4K10

阻止a标签的默认事件及延伸

看如下实例: (1)把单击事件处理程序注册到一个锚元素,而不是一个外层的上,那么就要面对另外一个问题:当用户单击链接,浏览器会加载一个新页面。...(2)当用户在编辑完表单后按下回车键,会触发表单的submit事件,在此事件发生后,表单提交才会真正发生。 这种行为与我们讨论的事件处理程序不是同一个概念,它是单击标签元素的默认操作。...如果我们不希望执行这种默认操作,那么事件对象上调用.stopPropagation()方法也无济于事,因为默认操作不是正常的事件传播流中发生的。...}; //既然return false 和 e.preventDefault()都是一样的效果,那它们有区别?...//仅仅是HTML事件属性 和 DOM0级事件处理方法 才能通过返回 return false 的形式组织事件宿主的默认行为。

2.4K60
领券