Query中提供了四种事件监听方式,分别是bind、live、delegate、on,对应的解除监听的函数分别是unbind、die、undelegate、off。

bind(type,[data],function(eventObject))  live(type, [data], fn)  live(type, [data], fn)  on(type,[selector],[data],fn)

bind是使用频率较高的一种,作用就是在选择到的元素上绑定特定事件类型的监听函数,参数的含义如下:

type:事件类型,如click、change、mouseover等;

data:传入监听函数的参数,通过event.data取到。可选;

function:监听函数,可传入event对象,这里的event是jQuery封装的event对象,与原生的event对象有区别,使用时需要注意。

bind的特点就是会把监听器绑定到目标元素上,有一个绑一个,在页面上的元素不会动态添加的时候使用它没什么问题。但如果列表中动态增加一个“元素”,点击它是没有反应的,必须再bind一次才行。

live的参数和bind一样,源码:

live: function( types, data, fn ) {

jQuery( this.context ).on( types, this.selector, data, fn );

return this;

}

可以看到live方法并没有将监听器绑定到自己(this)身上,而是绑定到了this.context上了。

delegate(selector,type,[data],fn)

参数多了一个selector,用来指定触发事件的目标元素,监听器将被绑定在调用此方法的元素上。看看源码:

delegate: function( selector, types, data, fn ) {

return this.on( types, selector, data, fn );

}

又是调用了on,并且把selector传给了on。看来这个on真的是举足轻重的东西。

几种办法中使用on,因为其他方法都是内部调用on来完成的,直接使用on可以提高效率,而且完全可以用on来代替其他三种写法

参考原文:http://www.51edu.com/it/bckf/35687.html

jQuery绑定事件的四种基本方式的更多相关文章

  1. jQuery绑定事件的四种方式:bind、live、delegate、on

    1.jQuery操作DOM元素的绑定事件的四种方式 jQuery中提供了四种事件监听方式,分别是bind.live.delegate.on,对应的解除监听的函数分别是unbind.die.undele ...

  2. jQuery绑定事件的四种方式

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

  3. jQuery绑定事件的四种方式区别

    jQuery中提供了四种事件监听方式,分别是bind.live.delegate.on,对应的解除监听的函数分别是unbind.die.undelegate.off.在开始看他们之前 一:bind(t ...

  4. jQuery绑定事件的四種方式

    这篇文章主要介绍的是jQuery绑定事件的四种方式相关内容,下面我们就与大家一起分享. jQuery绑定事件的四种方式 jQuery提供了多种绑定事件的方式,每种方式各有其特点,明白了它们之间的异同点 ...

  5. jquery阻止事件的两种实现方式

    再阻止事件冒泡的方面,jquery有两种方式: 一种是 return false;另外一种是 e.stopPropagation() html代码 <form id="form1&qu ...

  6. jq绑定事件的4种方式

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

  7. JS与JQ绑定事件的几种方式.

    JS与JQ绑定事件的几种方式 JS绑定事件的三种方式 直接在DOM中进行绑定 <button onclick="alert('success')" type="bu ...

  8. Android_安卓为按钮控件绑定事件的五种方式

    一.写在最前面 本次,来介绍一下安卓中为控件--Button绑定事件的五种方式. 二.具体的实现 第一种:直接绑定在Button控件上: 步骤1.在Button控件上设置android:onClick ...

  9. jQuery绑定事件-多种方式实现

    jQuery绑定事件-多种方式实现: <html> <head> <meta charset="utf-8" /> <script src ...

随机推荐

  1. 01:A+B问题

    总时间限制:  1000ms 内存限制:  65536kB 描述 在大部分的在线题库中,都会将A+B问题作为第一题,以帮助新手熟悉平台的使用方法. A+B问题的题目描述如下:给定两个整数A和B,输出A ...

  2. windows系统安装ubuntu后,grub中没有windows启动项

    我的问题: 安装系统时候,选择grub安装在sdb磁盘 http://forum.ubuntu.org.cn/viewtopic.php?f=139&t=474289&start=15 ...

  3. Idea设置自动导包

    默认 IntelliJ IDEA 是没有开启自动 import 包的功能.  勾选标注 1 选项,IntelliJ IDEA 将在我们书写代码的时候自动帮我们优化导入的包,比如自动去掉一些没有用到的包 ...

  4. 转:100个高质量Java开发者博客

    原文来自于:http://www.importnew.com/7469.html ImportNew注:原文中还没有100个.作者希望大家一起来推荐高质量的Java开发博客,然后不段补充到这个列表.欢 ...

  5. GNU MAKE指南

    GNU make 指南 翻译: 哈少 译者按: 本文是一篇介绍 GNU Make 的文章,读完后读者应该基本掌握了 make 的用法.而 make 是所有想在 Unix (当然也包括 Linux )系 ...

  6. Browsing History

    hdu4464:http://acm.hdu.edu.cn/showproblem.php?pid=4464 题意:就是统计n个字符串中每个字符串每个字符对印的Asci,然后输出最大的长度. 题解:水 ...

  7. (转载)调用ob_end_flush()网页仍旧不能显示有关问题

    (转载)http://www.myexception.cn/php/558638.html 调用ob_end_flush()网页仍旧不能显示问题?写了一个简单的demo,理论上调用ob_end_flu ...

  8. 数据结构(树链剖分,堆):HNOI 2016 network

    2215. [HNOI2016]网络 ★★★☆   输入文件:network_tenderRun.in   输出文件:network_tenderRun.out   简单对比时间限制:2 s   内存 ...

  9. [JAVA关键字] synchronized

    synchronized, Example: public synchronized void XXX() {} 参考 http://wenku.baidu.com/link?url=ecb1Zivf ...

  10. poj1222

    貌似又是一个矩阵图形的问题,看起来应该是不太容易,不管了先做做吧! 题目大意: 题目:灯光延伸出去(延长熄灯)?? 在一个扩展的游戏版本 熄灯,它是一个难题(或者谜)在一个5行每一行有6个按钮(实际是 ...