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获取图片的原始尺寸以宽度为例
May 04 Javascript
JavaScript截取字符串的2个函数介绍
Aug 27 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
May 04 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
May 11 Javascript
jQuery满意度星级评价插件特效代码分享
Aug 19 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
Dec 14 Javascript
浅析JavaScript作用域链、执行上下文与闭包
Feb 01 Javascript
JS去除重复并统计数量的实现方法
Dec 15 Javascript
基于Bootstrap分页的实例讲解(必看篇)
Jul 04 Javascript
基于Vuejs的搜索匹配功能实现方法
Mar 03 Javascript
Vue.js 中的实用工具方法【推荐】
Jul 04 Javascript
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 Vue.js
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中for循环语句的几种变型
2006/11/26 PHP
用PHP生成html分页列表的代码
2007/03/18 PHP
phpMyAdmin出现无法载入 mcrypt 扩展,请检查PHP配置的解决方法
2012/03/26 PHP
基于PHP array数组的教程详解
2013/06/05 PHP
ubuntu12.04使用c编写php扩展模块教程分享
2013/12/25 PHP
php递归遍历删除文件的方法
2015/04/17 PHP
firefox中JS读取XML文件
2006/12/21 Javascript
关于__defineGetter__ 和__defineSetter__的说明
2007/05/12 Javascript
Add a Picture to a Microsoft Word Document
2007/06/15 Javascript
微信小程序  简单实例(阅读器)的实例开发
2016/09/29 Javascript
Bootstrap 模态框(Modal)插件代码解析
2016/12/21 Javascript
Vue项目自动转换 px 为 rem的实现方法
2018/10/29 Javascript
微信小程序实现的一键连接wifi功能示例
2019/04/24 Javascript
vue-router源码之history类的浅析
2019/05/21 Javascript
深入理解JavaScript 箭头函数
2019/05/30 Javascript
对layer弹出框中icon数字参数的说明介绍
2019/09/04 Javascript
在antd Table中插入可编辑的单元格实例
2020/10/28 Javascript
[53:13]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS LGD-GAMING
2014/05/22 DOTA
python3 判断列表是一个空列表的方法
2018/05/04 Python
PyCharm设置SSH远程调试的方法
2018/07/17 Python
Python常用的json标准库
2019/02/19 Python
django admin后台添加导出excel功能示例代码
2019/05/15 Python
python time.sleep()是睡眠线程还是进程
2019/07/09 Python
利用python-pypcap抓取带VLAN标签的数据包方法
2019/07/23 Python
详解Python是如何实现issubclass的
2019/07/24 Python
使用pygame编写Flappy bird小游戏
2020/03/14 Python
python中threading开启关闭线程操作
2020/05/02 Python
Python基于内置函数type创建新类型
2020/10/22 Python
英国床和浴室商场:Bed & Bath Emporium
2018/05/20 全球购物
婴儿鞋,独特的婴儿服装和配件:Zutano
2018/11/03 全球购物
青春寄语大全
2014/04/09 职场文书
学校安全责任书
2014/04/14 职场文书
体育教师求职信
2014/06/30 职场文书
优秀纪检干部材料
2014/08/27 职场文书
支部书记四风对照材料
2014/08/28 职场文书
2014大四本科生自我鉴定总结
2014/10/04 职场文书