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. golang 性能

    服务器: 阿里云ECS:1核1G内存,CentOS6.5 x64 返回内容: {"ErrInfo":{"ErrCode":0,"ErrMsg" ...

  2. 如何重载ComboBox 使其下拉按钮(带下箭头的)和下拉列表的垂直滚动条的宽度改变?(自绘ComboBox) [转]

    原文地址:http://bbs.csdn.net/topics/390135022 http://blog.csdn.net/scsdn/article/details/4363299 想使用winf ...

  3. 【转】web开发需要知道的事情

    在StackExchange上有人问了这样一个问题:What should every programmer know about web development?(关于Web开发,什么是所有程序员需 ...

  4. Ugly Windows

    poj3923:http://poj.org/problem?id=3923 题意:给出两个整数n.m表示屏幕的长宽.屏幕上有一些窗口,每个窗口都是矩形的,窗口的边框用同一个大写字母来表示,不同的窗口 ...

  5. 工程师必知ZigBee技术问答精华汇总

    本文是关于ZigBee技术的一些基础知识.行业应用方面的精华汇总.希望通过本文的分析,能让大家对ZigBee技术的起源.发展.特点.前景及其在通信网络中的相关应用有全面直观的了解. 1.基础知识篇 Q ...

  6. npm check failed 解决办法

    npm ERR! shasum check failed for C:\Users\MM\AppData\Local\Temp\npm-10900-415697c8\registry.npmjs.or ...

  7. 【Linux】鸟哥的Linux私房菜基础学习篇整理(二)

    1. dumpe2fs [-bh] devicename:查询superblock信息.参数:-b:列出保留为坏道的部分:-h:列出superblock的数据,不会列出其他的区段内容. 2. df [ ...

  8. The fundamental knowledge of Node JS.

    D3 JSJava scirpt is an awesome language for Internface Design.All Obejcts in JavaScirpt could be use ...

  9. CMOS Sensor的调试经验分享

    转自:http://bbs.52rd.com/forum.php?mod=viewthread&tid=276351 CMOS Sensor的调试经验分享 我这里要介绍的就是CMOS摄像头的一 ...

  10. HDOJ(HDU) 2164 Rock, Paper, or Scissors?

    Problem Description Rock, Paper, Scissors is a two player game, where each player simultaneously cho ...