您现在的位置是:首页 > 正文

jQuery绑定事件的方法四种方法 热门推荐

2024-02-29 13:49:41阅读 0

jq给元素绑定事件的方法有4种,

1.bind()  2.live()  3.live()  4.on()  //on常用

 一:bind(type,[data],function(eventObject))

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

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

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

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

 

   bind的源码:

1
2
3
4
5
6
7
   bind:  function ( types, data, fn ) {
 
   return  this .on( types,  null , data, fn );
 
   }
 
$( '#myol li' ).bind( 'click' ,getHtml);

 

 

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

jQuery还有一种事件绑定的简写方式如a.click(function(){});、a.change(function(){});等,它们的作用与bind一样,仅仅是简写而已。

二:live(type, [data], fn)

live的参数和bind一样,它又有什么蹊跷呢,我们还是先瞄一眼源码:

1
2
3
4
5
6
7
live:  function ( types, data, fn ) {
 
jQuery(  this .context ).on( types,  this .selector, data, fn );
 
return  this ;
 
}

 

 

可以看到live方法并没有将监听器绑定到自己(this)身上,而是绑定到了this.context上了。这个context是什么东西呢?其实就是元素的限定范围,看了下面的代码就清楚了:

1
2
3
4
5
$( '#myol li' ).context;  //document
 
$( '#myol li' , '#myol' ).context;  //document
 
$( '#myol li' ,$( '#myol' )[0]);  //ol

通常情况下,我们都不会像第三种方式那样使用选择器,所以也就认为这个context通常就是document了,即live方法把监听器绑定到了 document上了。不把监听器直接绑定在元素上,你是不是想起事件委托机制来了呢?若没有,可以点击这里回忆一下。live正是利用了事件委托机制来 完成事件的监听处理,把节点的处理委托给了document。在监听函数中,我们可以用event.currentTarget来获取到当前捕捉到事件的 节点。下面的例子来揭晓:

1
$( '#myol li' ).live( 'click' ,getHtml);

 

三:live存在那样的缺点,所以我们就思考,既然老爷子负担那么重,可不可以别把监听器绑定在document上呢,绑定在就近的父级元素上不就好了。顺应正常逻辑,delegate诞生了。

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

1
2
3
4
5
delegate:  function ( selector, types, data, fn ) {
 
return  this .on( types, selector, data, fn );
 
}

 

 

又是调用了on,并且把selector传给了on。看来这个on真的是举足轻重的东西。照样先不管它。看看示例先:

1
$( '#myol' ).delegate( 'li' , 'click' ,getHtml);

 

看了这么多,你是不是迫不及待想看看这个on的真实面目了呢,这就来:

1
on(type,[selector],[data],fn)

 

参数与delegate差不多但还是有细微的差别,首先type与selector换位置了,其次selector变为了可选项。交换位置的原因不好查证,应该是为了让视觉上更舒服一些吧。

我们先不传selector来看一个例子:

1
$( '#myol li' ).on( 'click' ,getHtml);

推荐就是尽量使用on,因为其他 方法都是内部调用on来完成的,

直接使用on可以提高效率,而且你完全可以用on来代替其他三种写法。

网站文章

  • 提取一个目录下的文件夹的名字

    问题描述:windows, 一个目录下面有很多子文件夹,想要批量去获得这些文件夹名称?处理方式:使用DIR命令。将 dir /a:d /b >xxx.txt 复制到记事本中,另存成.bat文件,放到提取文件夹名称的目录中去,双击运行。结果保存到xxx.txt中了。详细信息,可以去掉/b参数,直接写成dir /a:d >xxx.txt更多dir用法,win+r打开...

    2024-02-29 13:49:34
  • 【OS】第二章 进程

    【OS】第二章 进程

    程序:一个在时间上按严格次序、顺序执行的操作序列。概念:一个具有独立功能的程序独占处理机,直至得到最终结果的过程。在计算机系统中只有一个程序在运行,这个程序独占系统中的所有资源,其执行不受外界影响。(...

    2024-02-29 13:49:27
  • solidity之abi编码函数总结

    solidity之abi编码函数总结

    pragma solidity >=0.4.0 <0.6.0; contract Test { function set(uint value) public { } } contract User { function test() public view returns(bytes memory){ /...

    2024-02-29 13:48:57
  • JAVA配置文件服务器登录失败,com.jcraft.jsch.JSchException: Auth fail(示例代码)

    背景服务器信息:服务器A:10.102.110.1服务器B:10.102.110.2需要从服务器A通过Sftp传输文件到服务器B。应用项目中有一个功能,要通个关Sftp进行日志文件的传输,在部署的时候...

    2024-02-29 13:48:51
  • C#常用的加密算法:MD5、Base64、SHA1、SHA256、HmacSHA256、DES、AES、RSA

    C#常用的加密算法:MD5、Base64、SHA1、SHA256、HmacSHA256、DES、AES、RSA

    c#教程https://www.xin3721.com/eschool/CSharpxin3721/简介本文主要讲解一下C#常用的那些加密算法,包括MD5、Base64、SHA1、SHA256、Hma...

    2024-02-29 13:48:38
  • Confluo对比Kafka

    Confluo对比Kafka

    Confluo对比Kafka 最近几天老是看到一篇“伯克利开源 Confluo:吞吐量比 Kafka 高 4 到 10 倍”的文章,到底什么是Confluo,看了一下它的论文和代码,简单分析了一下:初步分析完感觉这个东东为啥要和Kafka比呢?又没有啥可比性,就像Kafka从来不会和Redis比Pub-Sub时延一样。而且这一篇文章感觉比Kafka高大上好多似的,非常容...

    2024-02-29 13:48:08
  • redis复习(参考书籍redis设计与实现)

    redis复习(参考书籍redis设计与实现)

    数据结构与对象 简单动态字符串 Simple Dynamic String struct sdshdr { //记录buf数组中已使用字节的数量 //等于SDS所保存字符串的长度 int len; /...

    2024-02-29 13:48:02
  • Golang 基本常量声明及 iota 使用

    Golang 基本常量声明及 iota 使用

    Golang 常量的基本声明以及 iota 的使用

    2024-02-29 13:47:55
  • 常见的Web应用服务器

    Web应用程序的运行需要有Web服务器来提供支持。在Java Web开发中,最长使用以下四种服务器。 1. Tomcat服务器 Tomcat服务器还是很受欢迎的,是Apache公司下的产品,以轻量级为首要特点。 2. JBoss服务器 JBoss是一种遵从Java EE规范、开放源代码、纯Java的EJB容器,对于J2EE有很好的支持。 它采用 JML API实现软件模块的集成与管理,革...

    2024-02-29 13:47:27
  • SAP PK Oracle

    Oracle

    2024-02-29 13:47:19