`
这些年
  • 浏览: 399903 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jquery 绑定事件(转)

    博客分类:
  • js
 
阅读更多

转自:http://blog.csdn.net/borishuai/article/details/8115277

今天浏览jQuery的deprecated列表,发现live()和die()在里面了,赶紧看了一下,发现从jQuery1.7开始,jQuery引入了全新的事件绑定机制,on()和off()两个函数统一处理事件绑定。因为在此之前有bind(), live(), delegate()等方法来处理事件绑定,jQuery从性能优化以及方式统一方面考虑决定推出新的函数来统一事件绑定方法并且替换掉以前的方法。

on(events,[selector],[data],fn)

  • events:一个或多个用空格分隔的事件类型和可选的命名空间,如"click"或"keydown.myPlugin" 。
  • selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择器为null或省略,当它到达选定的元素,事件总是触发。
  • data:当一个事件被触发时要传递event.data给事件处理函数。
  • fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写,返回false。

替换bind()

当第二个参数'selector'为null时,on()和bind()其实在用法上基本上没有任何区别了,所以我们可以认为on()只是比bind()多了一个可选的'selector'参数,所以on()可以非常方便的替换掉bind()

替换live()

在1.4之前相信大家非常喜欢使用live(),因为它可以把事件绑定到当前以及以后添加的元素上面,当然在1.4之后delegate()也可以做类似的事情了。live()的原理很简单,它是通过document进行事件委派的,因此我们也可以使用on()通过将事件绑定到document来达到live()一样的效果。

live()写法

 $('#list li').live('click','#list li',function(){//function code here. }); 

on()写法

 $(document).on('click','#list li',function(){//function code here. }); 

这里的关键就是第二个参数'selector'在起作用了。它是一个过滤器的作用,只有被选中元素的后代元素才会触发事件。

替换delegate()

delegate()是1.4引入的,目的是通过祖先元素来代理委派后代元素的事件绑定问题,某种程度上和live()优点相似。只不过live()是通过document元素委派,而delegate则可以是任意的祖先节点。使用on()实现代理的写法和delegate()基本一致。

delegate()的写法

 $('#list').delegate('li','click',function(){//function code here. }); 

on()写法

 $('#list').on('click','li',function(){//function code here. }); 

貌似第一个和第二个参数的顺序颠倒了一下,别的基本一样。

总结

jQuery推出on()的目的有2个,一是为了统一接口,二是为了提高性能,所以从现在开始用on()替换bind(), live(), delegate吧。尤其是不要再用live()了,因为它已经处于不推荐使用列表了,随时会被干掉。如果只绑定一次事件,那接着用one()吧,这个没有变化。

分享到:
评论

相关推荐

    JQuery绑定事件

    **jQuery绑定事件**是JavaScript库jQuery中的核心功能之一,它极大地简化了DOM元素事件处理的流程,使得开发者能够更加高效地编写代码。在JavaScript原生语法中,为元素添加事件监听器通常涉及到`addEventListener`...

    jquery绑定事件中怎样调用函数?视频教程

    jquery绑定事件中怎样调用函数?视频教程,介绍的是jquery绑定事件中怎样调用函数?

    多种jQuery绑定事件的实现方式

    本文将深入探讨多种jQuery绑定事件的实现方式,并提供解决事件重复绑定问题的策略。 首先,让我们来看看jQuery如何绑定单个事件。基本语法是使用`.bind()`函数,传入事件类型和处理函数。例如,绑定点击事件(click...

    jquery绑定click事件传递参数

    本文将深入探讨如何使用jQuery来绑定click事件,并传递参数。 首先,`click`事件是jQuery中用于监听元素被点击时触发的事件。它允许我们在用户点击DOM元素时执行特定的函数或代码块。基本的用法是在目标元素上调用`...

    JQuery调用绑定click事件的3种写法

    `.bind()`是jQuery中更通用的事件绑定方法,不仅可以绑定`click`事件,还可以绑定其他多种事件,如`mouseover`、`mouseout`等。下面是如何使用`.bind()`绑定`click`事件的例子: ```javascript $('#clickmebind')....

    jquery绑定事件不生效的解决方法

    关于jQuery绑定事件不生效的问题,首先需要了解jQuery为JavaScript封装了一套简便的API,极大地简化了JavaScript代码的编写,尤其在事件处理方面。但是,在实际开发过程中,可能会遇到绑定的事件不生效的情况,这...

    jquery事件绑定例子

    这里,`selector`是用于选择要绑定事件的元素的jQuery选择器,`event`是想要监听的事件名称(如`click`、`mouseover`等),而`handler`则是当事件发生时要执行的函数。 例如,如果我们想要在点击按钮时显示一条消息...

    Jquery为单选框checkbox绑定单击click事件

    这是Jquery中的一个非常重要的方法,它确保了绑定事件的代码只会在DOM完全加载后执行,避免了因文档未完全加载而导致的脚本错误。 在总结上述知识点的同时,我们还应该注意一些常见的开发实践。例如,为了提高代码...

    JQuery 绑定事件时传递参数的实现方法

    在jQuery中,`bind()`方法是用来绑定事件处理函数到元素上的。当事件发生时,绑定的函数会被调用。在某些情况下,我们可能需要在事件处理函数中传递额外的参数,以便更好地处理事件。以下是一些在jQuery中实现这一...

    Jquery数据绑定分页源码

    在这个上下文中,"Jquery数据绑定"可能指的是利用jQuery与其他库(如Knockout.js或AngularJS)配合,或者使用jQuery自定义方法来创建双向数据绑定。 分页则是大型数据集展示时常用的一种优化手段,它将大量数据分割...

    JQuery绑定事件四种实现方法解析

    jQuery提供了多种绑定事件的方式,每种方式各有其特点,明白了它们之间的异同点,有助于我们在写代码的时候进行正确的选择,从而写出优雅而容易维护的代码。下面我们来看下jQuery中绑定事件的方式都有哪些。 jQuery...

    jQuery给动态添加的元素绑定事件的方法

    本文实例讲述了jQuery给动态添加的元素绑定事件的方法。分享给大家供大家参考。具体分析如下: jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要...

    jquery绑定原理 简单解析与实现代码分享

    这里我们将深入解析jQuery绑定事件的原理,并通过示例代码来理解其工作方式。 首先,jQuery中的`data`方法用于在DOM元素上存储和检索数据。它通过一个唯一的标识符(uuid)来关联数据,这个标识符是通过`now`函数...

    对jQuery的事件绑定的一些思考(补充)

    然而,正如标题和描述所指出的,jQuery的事件绑定有时也会带来一些问题,比如内存消耗过大、动态生成元素需要重新绑定事件以及语法冗余。本文将深入探讨这些问题,并提供相应的解决方案。 首先,让我们看看jQuery中...

    jquery使用bind绑定事件

    本篇文章将深入探讨如何使用jQuery中的`bind()`方法来绑定事件,并通过实例讲解如何改变页面上单行文本框(input[type="text"])的背景色。 `bind()`方法是jQuery提供的一种事件绑定功能,它可以将一个或多个事件...

    jQuery 绑定事件的方式总结

    jQuery 绑定事件 jQuery提供了多种绑定事件的方式,每种方式各有其特点,明白了它们之间的异同点,有助于我们在写代码的时候进行正确的选择,从而写出优雅而容易维护的代码。下面我们来看下jQuery中绑定事件的方式都...

    jQuery实现给input绑定回车事件的方法

    jQuery的`.bind()`方法可以用于为选定的元素绑定事件处理函数。对于input元素绑定回车事件,可以监听`keypress`事件。当用户按下键盘上的回车键时,触发事件处理函数。 示例代码如下: ```javascript $(function()...

    jQuery搜索框实例绑定提交事件.zip

    jQuery搜索框实例绑定提交事件是一款下拉选择多种搜索引擎分类,搜索框输入文字键盘回车绑定提交搜索按钮代码。    dropdown-toggle search-select" data-toggle="dropdown">百度搜索  ...

Global site tag (gtag.js) - Google Analytics