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 相关文章推荐
基于jquery的回到页面顶部按钮
Jun 27 Javascript
js实现的复制兼容chrome和IE
Apr 03 Javascript
jQuery中多个元素的Hover事件解决方案
Jun 12 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
Mar 05 Javascript
微信小程序利用co处理异步流程的方法教程
May 20 Javascript
使用D3.js制作图表详解
Aug 13 Javascript
js 两数组去除重复数值的实例
Dec 06 Javascript
JavaScript中的一些隐式转换和总结(推荐)
Dec 22 Javascript
Vue 创建组件的两种方法小结(必看)
Feb 23 Javascript
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
一定要知道的 25 个 Vue 技巧
Nov 02 Vue.js
Java无向树分析 实现最小高度树
Apr 09 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命名空间(Namespace)简明教程
2014/06/11 PHP
PHP实现远程下载文件到本地
2015/05/17 PHP
yii实现使用CUploadedFile上传文件的方法
2015/12/28 PHP
PHP操作Postgresql封装类与应用完整实例
2018/04/24 PHP
PHP命名空间简单用法示例
2018/12/28 PHP
javascript 清空form表单中某种元素的值
2009/12/26 Javascript
使用Jquery打造最佳用户体验的登录页面的实现代码
2011/07/08 Javascript
如何在一个页面显示多个百度地图
2013/04/07 Javascript
js返回上一页并刷新的多种实现方法
2014/02/26 Javascript
jQuery中outerWidth()方法用法实例
2015/01/19 Javascript
javascript实现点击后变换按钮显示文字的方法
2015/05/13 Javascript
jQuery 实现ajax传入参数含有特殊字符的方法总结
2016/10/17 Javascript
easyui tree带checkbox实现单选的简单实例
2016/11/07 Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
2019/11/01 Javascript
详解JavaScript数据类型和判断方法
2020/09/04 Javascript
介绍Python中内置的itertools模块
2015/04/29 Python
完美解决Python2操作中文名文件乱码的问题
2017/01/04 Python
Python编程实现使用线性回归预测数据
2017/12/07 Python
Python中sort和sorted函数代码解析
2018/01/25 Python
特征脸(Eigenface)理论基础之PCA主成分分析法
2018/03/13 Python
python ftp 按目录结构上传下载的实现代码
2018/09/12 Python
python创造虚拟环境方法总结
2019/03/04 Python
解决使用export_graphviz可视化树报错的问题
2019/08/09 Python
基于Python的Jenkins的二次开发操作
2020/05/12 Python
Python实现列表中非负数保留,负数转化为指定的数值方式
2020/06/04 Python
python os模块在系统管理中的应用
2020/06/22 Python
印尼穆斯林时尚购物网站:Hijabenka
2016/12/10 全球购物
财务部经理岗位职责
2014/02/03 职场文书
不拖欠农民工工资承诺书
2014/03/31 职场文书
抗洪抢险事迹材料
2014/05/06 职场文书
保护环境建议书400字
2014/05/13 职场文书
企业环保标语
2014/06/10 职场文书
考试作弊被抓检讨书
2014/10/02 职场文书
小浪底导游词
2015/02/12 职场文书
公司员工体检通知
2015/04/21 职场文书
教师学习心得体会范文
2016/01/21 职场文书