jQuery绑定事件的四种方式介绍


Posted in Javascript onOctober 31, 2016

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

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

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

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

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

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

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

bind的源码:

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一样,它又有什么蹊跷呢,我们还是先瞄一眼源码:

live: 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);

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

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

delegate: 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来代替其他三种写法。至于如何代替我想就不必这么直白的写出来了,真正理 解它们的区别之后自然而然也就不是难事了。

以上所述是小编给大家介绍的jQuery绑定事件的四种方式介绍,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 对象比较实现代码
Apr 27 Javascript
jquery学习笔记二 实现可编辑的表格
Apr 09 Javascript
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
Jan 17 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
Dec 09 Javascript
jQuery 获取跨域XML(RSS)数据的相关总结分析
May 18 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
Jul 26 Javascript
微信开发 js实现tabs选项卡效果
Oct 28 Javascript
基于jQuery实现滚动刷新效果
Jan 09 Javascript
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
Angular4实现动态添加删除表单输入框功能
Aug 11 Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
Nov 24 Javascript
微信小程序分享小程序码的生成(带参数)以及参数的获取
Mar 25 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
Oct 31 #Javascript
JS中作用域和变量提升(hoisting)的深入理解
Oct 31 #Javascript
jsp 网站引入外部css或者js失效问题解决
Oct 31 #Javascript
js学习笔记之事件处理模型
Oct 31 #Javascript
基于JS实现checkbox全选功能实例代码
Oct 31 #Javascript
新手学习前端之js模仿淘宝主页网站
Oct 31 #Javascript
vue.js学习笔记之绑定style样式和class列表
Oct 31 #Javascript
You might like
PHP的FTP学习(二)
2006/10/09 PHP
将时间以距今多久的形式表示,PHP,js双版本
2012/09/25 PHP
PHP编译安装中遇到的两个错误和解决方法
2014/08/20 PHP
php获取字符串中各个字符出现次数的方法
2015/02/23 PHP
php实现将二维关联数组转换成字符串的方法详解
2017/07/31 PHP
PHP聚合式迭代器接口IteratorAggregate用法分析
2017/12/28 PHP
使用TextRange获取输入框中光标的位
2006/10/14 Javascript
javascript中call和apply方法浅谈
2013/09/27 Javascript
js 对小数加法精度处理示例说明
2013/12/27 Javascript
JQuery下拉框应用示例介绍
2014/04/23 Javascript
JavaScript DOM节点添加示例
2014/07/16 Javascript
浅谈JavaScript中指针和地址
2015/07/26 Javascript
12种JavaScript常用的MVC框架比较分析
2015/11/16 Javascript
简单讲解jQuery中的子元素过滤选择器
2016/04/18 Javascript
全面了解JavaScript对象进阶
2016/07/19 Javascript
微信小程序 实战程序简易新闻的制作
2017/01/09 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
2018/06/20 Javascript
详解Vue.js自定义tipOnce指令用法实例
2018/12/19 Javascript
react 中父组件与子组件双向绑定问题
2019/05/20 Javascript
vue+elementUI实现表格关键字筛选高亮
2020/10/26 Javascript
el-select数据过多懒加载的解决(loadmore)
2019/05/29 Javascript
VUE项目中加载已保存的笔记实例方法
2019/09/14 Javascript
深入探索VueJS Scoped CSS 实现原理
2019/09/23 Javascript
详解Vue3中对VDOM的改进
2020/04/23 Javascript
python装饰器使用方法实例
2013/11/21 Python
Django中实现一个高性能计数器(Counter)实例
2014/07/09 Python
python通过pil模块获得图片exif信息的方法
2015/03/16 Python
深入理解Python中字典的键的使用
2015/08/19 Python
Python基于csv模块实现读取与写入csv数据的方法
2018/01/18 Python
基于python判断字符串括号是否闭合{}[]()
2020/09/21 Python
python中绕过反爬虫的方法总结
2020/11/25 Python
使paramiko库执行命令时在给定的时间强制退出功能的实现
2021/03/03 Python
怎样实现H5+CSS3手指滑动切换图片的示例代码
2019/05/05 HTML / CSS
函授本科毕业生自我鉴定
2013/10/16 职场文书
2016年保险公众宣传日活动总结
2016/04/05 职场文书
JavaScript中时间格式化新思路toLocaleString()
2021/11/07 Javascript