JQuery的click、bind、delegate、off、unbind

.click与.bind

  .click和.bind都是给每个元素绑定事件,对于只绑定一个click事件,.bind事件的简写就是.click那种方式。

  这两种方式都会出现两个问题:

  第一个问题,如果要绑定的事件特别多,比如要绑定100个元素,要绑定100次,对于大量元素来说,影响到了性能。但是如果是id选择器,因为id唯一,用bind()方法就很快捷了。
  第二个问题,对于尚未存在的元素,无法绑定。动态添加一个span元素,点击这个span元素,会发现没有动作响应。

  那么你就会问,为什么要出现.bind()这个事件呢?

  .bind()可以一次添加多个事件。

  你给一个元素一次性添加了好多事件,.unbind()事件解绑,可以有选择性的解绑。

  比如说,一个按钮,你点击后他要提交到后台等返回结果是,你不希望它能够再次被点击,但是它的其他效果还有,你就需要解绑。

  还可以给绑定的事件起名字.bind("mouseover.plugin" function(){})

  解绑的时候 unbind(".plugin");

  unbind("mouseover!")加!的是匹配所有不含命名空间的mouseover事件

.click和.bind 与.delegate

  这个效果和普通绑定事件和on委托事件效果一样.

  这种方式采用了事件委托的概念。不是直接为btn3元素绑定事件,而是为其父元素(或祖先元素也可)绑定事件,当在父元素内任意元素上点击时,事件会一层层从event target向上冒泡,直至到达你为其绑定事件的元素。冒泡的过程中,如果事件的currentTarget与选择器匹配时,就会执行代码。

  这样就解决了用。click(),bind()方法的上面两个问题,不用再一个个地去为btn元素绑定事件,也可以为动态添加进来的btn元素绑定。甚至,如果你将事件绑定到document上,都不用等document准备好就可执行绑定。

  这样,绑定是容易了,但是调用的时候也可能出现问题。如果事件目标在DOM树中很深的位置,这样一层层冒泡上来查找与选择器匹配的元素,又影响到性能了。

  .bind 与.delegate都可以同时绑定多个事件。

.delegat与.on

  这两个函数实现的效果是一样的,以前没有开放on,只有bind,click,live,delagate,他们都是通过on实现的,后面把live删了,把on直接开放出来用。但是为什么不把.delegate也删掉,就不知道了,知道的可以告诉我。

.delegate和.on还是有一些细微的区别的:

  参数的位置不太一样。

对于他们的解绑/解除委托

  click和bind用unbind解绑,delegate和on的都是相应的解除委托,假如你要直接解绑一个元素的一个事件,那么你就用id选择器好了~,对一个单独元素这样解除委托不可以哦!

  这样用类解除委托

总结:

  ①选择器匹配到较多元素时,不用click和bind,用delegate和on,增加效率并且可动态添加元素。注意dom树不要太深,父元素选择得当。Jq版本要高

  ②选择器匹配的元素少时,可以用click和bind。 Jq低版本支持

综上所述呢,目前用on就对了。

原文地址:https://www.cnblogs.com/guanghe/p/9529578.html

时间: 2024-10-13 15:40:53

JQuery的click、bind、delegate、off、unbind的相关文章

jQuery的.click,.bind,.unbind,.on,.off,.delegate,.undelegate

.click与.bind .click和.bind都是给每个元素绑定事件,对于只绑定一个click事件,.bind事件的简写就是.click那种方式. 这两种方式都会出现两个问题: 第一个问题,如果要绑定的事件特别多,比如要绑定100个元素,要绑定100次,对于大量元素来说,影响到了性能.但是如果是id选择器,因为id唯一,用bind()方法就很快捷了. 第二个问题,对于尚未存在的元素,无法绑定.动态添加一个span元素,点击这个span元素,会发现没有动作响应. 那么你就会问,为什么要出现.b

jQuery中的bind() live() delegate()之间区别分析

jQuery中的bind() live() delegate()之间区别分析 首先,你得要了解我们的事件冒泡(事件传播)的概念,我先看一张图 1.bind方式 $('a').bind('click',function (){ alert('click'); }) 解析:这种方式最简单,jq扫描文档找出所有的a,让将函数绑定到每个元素的click事件上 2.live方式 $('a').live('click',function (){ alert('click'); }) 解析:jq将函数绑定到$

click() bind() live() delegate()区别

click(),bind(),live()都是执行事件时使用的方法 1.click()单击事件方法: $("a").click(function() { alert("hello"); }); 2.在bind()中,jQuery所有JavaScript事件对象,比如focus, mouseover, 和 resize,都是可以作为type参数传递进来的. var message = "left"; $("a").bind(&q

JQuery中的bind()和unbind()的理解

bind()和unbind()提供了事件的绑定和取消机制,既可以绑定html默认支持的事件,也能够绑定自定义的事件. 1.JQuery中事件可以重复绑定,不会覆盖. 1 $("#button1").bind("click",function(){ 2 alert("func1"); 3 }); 4 $("#button1").bind("click",function(){ 5 alert("fu

JS: javascript 点击事件执行两次js问题 ,解决jquery绑定click事件出现点击一次执行两次问题

javascript 点击事件执行两次js问题 在JQuery中存在unbind()方法,先解绑再添加点击事件,解决方案为: $(".m-layout-setting").unbind('click').click(function(){ //此处填写逻辑代码 }) ------ 因为利用js在页面加载后添加需要点击事件的代码,发现在点击后会代码会执行两次,因为有toggle效果,导致弹窗出现又很快丢失 查了一些资料,发现这是冒泡的原因,需要在点击事件代码中加入阻止冒泡的方法: e.s

Jquery中的bind(),live(),delegate(),on()绑定事件方式 前言

前言 因为项目中经常会有利用jquery操作dom元素的增删操作,所以会涉及到dom元素的绑定事件方式,简单的归纳一下bind,live,delegate,on的区别,以便以后查阅,也希望该文章日后能帮助到园友,文中如有不当之处,还望各位指正,话不多说,直接进入正题. bind() 简要描述 bind()向匹配元素添加一个或多个事件处理器. 使用方式 $(selector).bind(event,data,function) event:必需项:添加到元素的一个或多个事件,例如 click,db

jQuery事件:bind、delegate、on的区别

最近在AngularJS的开发中,遇到一个神奇的事情:我们用到livebox来预览评论列表中的图片, 然而评论列表是由Angular Resource动态载入的.不可思议的是,点击这些动态载入的图片仍然会触发lightbox的图片预览. 难道lightbox使用先进的MutationObserver技术监听了DOM的变化?观察lightbox源码才发现,原来只是jQuery的.on()方法: $('body').on('click', 'a[rel^=lightbox], ...', funct

浅谈Jquery中的bind(),live(),delegate(),on()绑定事件方式

前言 因为项目中经常会有利用jquery操作dom元素的增删操作,所以会涉及到dom元素的绑定事件方式,简单的归纳一下bind,live,delegate,on的区别,以便以后查阅,也希望该文章日后能帮助到园友,文中如有不当之处,还望各位指正,话不多说,直接进入正题. bind() 简要描述 bind()向匹配元素添加一个或多个事件处理器. 使用方式 $(selector).bind(event,data,function) event:必需项:添加到元素的一个或多个事件,例如 click,db

jQuery中的.bind()、.live()和.delegate()之间区别分析

DOM树   首先,可视化一个HMTL文档的DOM树是很有帮助的.一个简单的HTML页面看起来就像是这个样子: 事件冒泡(又称事件传播) 当我们点击一个链接时,其触发了链接元素的单击事件,该事件则引发任何我们已绑定到该元素的单击事件上的函数的执行. 复制代码 代码如下: $('a').bind('click',function(){alert('that tickles!')}) 因此一个单击操作会触发alert函数的执行. click事件接着会向树的根方向传播,广播到父元素,然后接着是每个祖先