jQuery怎么绑定事件?

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

一、bind()

bind(type,[data],function(eventObject))
  1. bind是使用频率较高的一种,作用就是在选择到的元素上绑定特定事件类型的监听函数,参数的含义如下:

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

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

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

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()

live(type, [data], fn)

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

function( types, data, fn ) {
 
jQuery( this.context ).on( types, this.selector, data, fn );
 
return this;
 
}

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

$('#myol li').context; //document
 
$('#myol li','#myol').context; //document
 
$('#myol li',$('#myol')[0]); //ol

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

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

三、delegate()和on()

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

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

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

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

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

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

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

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

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

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

可以看到event.currentTarget是li自己,与bind的效果一样。至于传selector进去,就是跟delegate一样的意义了,除了参数顺序不同,其他完全一样。

终于看到on的真实作用了,那么,这么多的事件绑定方式,我们该如何进行选择呢?

其实这个问题是完全不必纠结的,因为你已经知道他们之间的区别了不是么?根据实际情况斟酌使用就行。不过官方有一个推荐就是尽量使用on,因为其他 方法都是内部调用on来完成的,直接使用on可以提高效率,而且你完全可以用on来代替其他三种写法。至于如何代替我想就不必这么直白的写出来了,真正理 解它们的区别之后自然而然也就不是难事了。

Image placeholder
前端答疑
未设置
  90人点赞

没有讨论,发表一下自己的看法吧

推荐文章
jquery怎么确定滚动事件的方向?

在jQuery中可以使用scrollTop()方法来确定滚动事件的方向,scrollTop()方法用于设置或返回所选元素的垂直滚动条位置。利用这种方法,我们就可以确定滚动方向。下面通过示例来具体看看。

jquery有哪些常用事件?

jquery有哪些常用事件?1、$(document).ready()$(document).ready()是jQuery中响应JavaScript内置的onload事件并执行任务的一种典型方式。它和

jquery和jquery ui的区别?

jquery和jqueryui的区别?区别有:1、jQuery是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等。 2、jQueryUI则是在jQuery的基础上,利用jQuery的扩展性,

jquery怎么写ajax?

jquery怎么写ajax?两种在客户端和服务器端进行请求-响应的常用方法是:GET和POST。GET-从指定的资源请求数据POST-向指定的资源提交要处理的数据GET基本上用于从服务器获得(取回)数

jquery怎么判断元素是第几个?

jquery怎么判断元素是第几个?假设有下面这样一段HTML代码: jQuery判断当前元素是第几个元素示例 jQuery获取第N个元素示例 jQuery选择器示例 如果我们点击任何一个li标签,想知

jquery怎么遍历json数组?

jquery怎么遍历json数组?jquery遍历集合可以使用$.each(集合,回调函数)方法,//这里直接使用Array来构造json数组,服务器返回的数据可以使用JSON.parse()函数进行

jquery怎么获取a标签href的值?

jquery怎么获取a标签href的值?href是a标签的一个属性,获取属性的值,在jquery中使用attr()方法。获取a标签的href属性就是$('a').attr('href')语法:$(se

jQuery :empty怎么用?

jQuery:empty怎么用?作用::empty选择器选取空的元素。空元素指的是不包含子元素或文本的元素。语法:$(":empty")(推荐学习:jQuery教程手册)jquery:empty选择器

jquery怎么实现淡入淡出效果?

jquery怎么实现淡入淡出效果?jquery实现淡入效果使用fadeIn()、淡出效果使用fadeOut(),来回切换使用fadeToggle()。●jQueryfadeIn()方法:用于淡入已隐藏

jquery怎么操作json?

使用jquery中的$.parseJSON()将字符串转为json对象,它对json数据格式的要求较高,必须要双引号包围起来格式:$.parseJSON(string)例如: varjsonStr='

jquery怎么禁用a标签?

jquery怎么禁用a标签?1、使用attr()方法删除a标签的链接,并重新设置click事件。$("a").each(function(){ $(this).css("cursor","defaul

jQuery怎么删除select选项?

jQuery怎么删除select选项?一、使用伪类选择器、属性选择器+remove()方法删除select选项$("#select_idoption:last").remove();//删除Selec

jquery怎么操作select?

jquery怎么操作select?jquery操作select分为获取option的值、删除option、增加option、获取option的长度、清空select、判断select框中是否存在某个值

jquery怎么判断对象是否为空?

jquery怎么判断对象是否为空?jquery的isEmptyObject方法可以判断对象是否为空此方法是jquery将forin进行的封装(相关课程推荐:jQuery教程)vardata={}; v

jquery怎么设置checkbox不选中?

jquery怎么设置checkbox不选中?jquery对checkbox进行操作需要使用prop()方法。1、设置不选中:$("#my-checkbox").prop("checked",false

ie不兼容jquery怎么办?

解决方法:1、可以使用原生JS或者低版本的Jquery1.x版本。因为Jquery从2.x版本开始已经不再进行IE低版本(IE6、IE7、IE8)的兼容性处理。如果需要兼容低版本的IE版本,建议使用原

jQuery怎么跳转页面?

jQuery怎么跳转页面?1、使用Jquery来写JS脚本代码,所以需要在页面里先引入脚本库文件。2、html很简单,一个按钮,用来触发跳转的,并且注意的是当前页面是叫‘页面A’的。3、然后编写JS脚

jquery怎么下载?

jquery怎么下载?jQuery的版本有很多,大家在选择版本的时候,一般原则是越新越好,但其实不然,jQuery版本是在不断进步和发展的,最新版是当时最高技术水平,也是最先进的技术理念。(推荐:jQ

Jquery怎么让contains不区分大小写?

Jquery怎么让contains不区分大小写?默认的Jquerycontains方法是区分大小写的,以下方法可以使contains不区分大小写(在匹配时将要匹配的元素内容全部转换成小写再进行匹配)/

jquery怎么判断input是否为空?

jquery怎么判断input是否为空?首先需要通过val()函数获取input框的内容,然后通过比较是否和“”空字符串相等,或者字符串长度是否等于0,来进行判断。1、判断input内容是否等于空字符

jquery怎么遍历?

什么是遍历?jQuery遍历,意为"移动",用于根据其相对于其他元素的关系来"查找"(或选取)HTML元素。以某项选择开始,并沿着这个选择移动,直到抵达您期望的元素为止。下图展示了一个家族树。通过jQ

jquery怎么获取name属性值?

新建一个html文件,命名为test.html,用于讲解jquery中怎么获取元素的name属性。在test.html文件内,在p标签内,使用input标签创建一个文本框,并设置其id为mytxt,主

jquery怎么判断元素是否存在?

使用JQuery想要判断元素是否存在,可以使用jQuery.length属性来实现。当DOM中存在特定元素时触发某个事件,那么就可以使用jQuery.length属性来确定元素是否存在。下面我们就结合

jQuery怎么删除元素节点?

1、使用empty()删除empty顾名思义,清空方法,但是与删除又有点不一样,因为它只移除了指定元素中的所有子节点。 p元素1 p元素2 点击通过jQuery的empty移除元素 $("but

jquery怎么获取第几个元素?

在jquery中,可以使用eq()方法找到第几个元素或第N个元素,jquery中eq()的使用如下:eq()选择器选取带有指定index值的元素。index值从0开始,所有第一个元素的index值是0