jQuery中on方法使用注意事项详解


Posted in Javascript onFebruary 15, 2017

on(eventType,[childSelector],[data],fn)

采用事件委托机制绑定事件,好处是子元素动态加入时无需再次绑定。

on方法可以传入childSelector指定添加事件处理函数的具体子元素,还可以传入对象格式的数据data,fn函数内部通过event.data.XXX获取具体参数。传入事件处理函数的data需要在事件绑定时就确定好,不同于trigger('eventType',[data]),tirgger方法中传入的data(对象或数组形式)是事件发生时才计算的值。

如果同一个事件处理程序被多次绑定给同一个元素,触发时就会执行多遍。所以绑定之前,需要先解绑之前的相同事件:

$(“selector”).off("click.xxx").on('click.xxx',function(){…});

如要在同一个元素上绑定不同事件处理函数,可以用事件的命名空间加以区分:click.forSpan、click.forDiv。

delegate()的源码是调用on()方法,只不过参数顺序变了,所以统一用on()。

事件触发顺序:

target是触发事件的元素,不会变;currentTarget是事件处理函数当前所在的元素,会动态变化;delegateTarget是事件处理函数绑定的对象,不会变。

on方法利用了事件冒泡机制,事件会从事件源一直冒泡传递到document,并触发相应元素的事件处理函数(若有)。

jQuery中on方法使用注意事项详解

事件处理队列:从触发事件的元素开始,遍历至delegateTarget,查找childSelector所指定的元素节点,并在事件处理队列handlerQueue中压入事件处理函数,最后将delegateTarget元素直接绑定的事件处理也压入队列(委托事件先于直接绑定的)。

on方法的冒泡过程中,具有事件处理函数的是delegateTarget元素而不是childSelector元素。

$("div").on('click','span',function(event){
 alert("The span element was clicked.");
 });
 $("p").click(function(event){
 
alert("The p element was clicked.");
 });
 $("div").click(function(){
 
alert("The div element was clicked.");
 });

点击span元素时,span元素上没有绑定事件处理函数,冒泡传递到P元素,P元素有直接绑定的事件处理函数,最先弹出P;然后传递到最外层div元素,div元素有事件委托,jQuery会从target (span)遍历到delegateTarget (div),查找childSelector节点,并压入事件处理队列中。最后压入delegateTarget (div)元素直接绑定的事件处理函数。所以会弹出Span后弹出Div。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
用脚本调用样式的几种方法
Dec 09 Javascript
js 图片缩放(按比例)控制代码
May 27 Javascript
Extjs中ComboBox加载并赋初值的实现方法
Mar 22 Javascript
兼容FF和IE的动态table示例自写
Oct 21 Javascript
使用纯javascript实现放大镜效果
Mar 18 Javascript
JavaScript 里的类数组对象
Apr 08 Javascript
跟我学习javascript的Date对象
Nov 19 Javascript
用jQuery向div中添加Html文本内容的简单实现
Jul 13 Javascript
vue+axios 前端实现登录拦截的两种方式(路由拦截、http拦截)
Oct 24 Javascript
vue实现菜单切换功能
May 08 Javascript
vue制作抓娃娃机的示例代码
Apr 17 Javascript
Vue路由 重定向和别名的区别说明
Sep 09 Javascript
防止重复发送 Ajax 请求
Feb 15 #Javascript
Input文本框随着输入内容多少自动延伸的实现
Feb 15 #Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
Feb 15 #Javascript
js记录点击某个按钮的次数-刷新次数为初始状态的实例
Feb 15 #Javascript
Canvas 绘制粒子动画背景
Feb 15 #Javascript
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
Feb 15 #Javascript
js控制按钮,防止频繁点击响应的实例
Feb 15 #Javascript
You might like
SMARTY学习手记
2007/01/04 PHP
php json_encode值中大括号与花括号区别
2013/09/30 PHP
PHP中isset与array_key_exists的区别实例分析
2015/06/02 PHP
php数组函数array_push()、array_pop()及array_shift()简单用法示例
2020/01/26 PHP
jQuery select的操作实现代码
2009/05/06 Javascript
javascript 动态加载 css 方法总结
2009/07/11 Javascript
jQuery 白痴级入门教程
2009/11/11 Javascript
JS学习之一个简易的日历控件
2010/03/24 Javascript
JavaScript高级程序设计阅读笔记(五) ECMAScript中的运算符(一)
2012/02/27 Javascript
jquery中.add()的使用分析
2013/04/26 Javascript
JS数组去重与取重的示例代码
2014/01/24 Javascript
js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,000)
2014/06/02 Javascript
javascript下拉列表中显示树形菜单的实现方法
2015/11/17 Javascript
拥Bootstrap入怀——导航栏篇
2016/05/30 Javascript
JS查找字符串中出现最多的字符及个数统计
2017/02/04 Javascript
Javascript中引用类型传递的知识点小结
2017/03/06 Javascript
js获取json中key所对应的value值的简单方法
2020/06/17 Javascript
微信小程序实现可长按移动控件
2020/11/01 Javascript
[02:57]2014DOTA2国际邀请赛-观众采访
2014/07/19 DOTA
python实现将html表格转换成CSV文件的方法
2015/06/28 Python
今天 平安夜 Python 送你一顶圣诞帽 @微信官方
2017/12/25 Python
Python使用Selenium模块实现模拟浏览器抓取淘宝商品美食信息功能示例
2018/07/18 Python
python提取具有某种特定字符串的行数据方法
2018/12/11 Python
Django高级编程之自定义Field实现多语言
2019/07/02 Python
Python制作微信好友背景墙教程(附完整代码)
2019/07/17 Python
Python如何省略括号方法详解
2020/03/21 Python
STUBHUB日本:购买和出售全球活动门票
2018/07/01 全球购物
印度电子产品购物网站:Vijay Sales
2021/02/16 全球购物
国际语言毕业生求职信
2014/07/08 职场文书
关于青春的演讲稿800字
2014/08/22 职场文书
水利专业大学生职业生涯规划书范文
2014/09/17 职场文书
工作所在部门证明
2014/09/21 职场文书
网络营销计划书
2015/01/17 职场文书
管理失职检讨书范文
2015/05/05 职场文书
行政复议答复书
2015/07/01 职场文书
vue如何实现关闭对话框后刷新列表
2022/04/08 Vue.js