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 相关文章推荐
jQuery 使用手册(五)
Sep 23 Javascript
浅谈Javascript Base64 加密解密
Dec 28 Javascript
使用JavaScript实现弹出层效果的简单实例
May 31 Javascript
Angularjs的Controller间通信机制实例分析
Nov 07 Javascript
JS实现微信弹出搜索框 多条件查询功能
Dec 13 Javascript
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
详解JavaScript添加给定的标签选项
Sep 17 Javascript
JS实现的类似微信聊天效果示例
Jan 29 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
turn.js异步加载实现翻书效果
Jul 25 Javascript
Vue-cli打包后部署到子目录下的路径问题说明
Sep 02 Javascript
javascript实现时钟动画
Dec 03 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
php smarty 二级分类代码和模版循环例子
2011/06/01 PHP
解析PHP汉字转换拼音的类
2013/06/18 PHP
Yii中CGridView关联表搜索排序方法实例详解
2014/12/03 PHP
php强制更新图片缓存的方法
2015/02/11 PHP
jQuery+PHP发布的内容进行无刷新分页(Fckeditor)
2015/10/22 PHP
PHP实现微信JS-SDK接口选择相册及拍照并上传的方法
2016/12/05 PHP
php使用PDO从数据库表中读取数据的实现方法(必看)
2017/06/02 PHP
PHP登录验证功能示例【用户名、密码、验证码、数据库、已登陆验证、自动登录和注销登录等】
2019/02/25 PHP
javascript 精粹笔记
2010/05/09 Javascript
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
2011/12/20 Javascript
JavaScript将数组转换成CSV格式的方法
2015/03/19 Javascript
Bootstrap零基础入门教程(二)
2016/07/18 Javascript
微信小程序 SocketIO 实例讲解
2016/10/13 Javascript
vue webpack开发访问后台接口全局配置的方法
2018/09/18 Javascript
vue中使用codemirror的实例详解
2018/11/01 Javascript
Vue 图片压缩并上传至服务器功能
2020/01/15 Javascript
JavaScript布尔运算符原理使用解析
2020/05/06 Javascript
简单介绍Ruby中的CGI编程
2015/04/10 Python
python实现TCP服务器端与客户端的方法详解
2015/04/30 Python
python对html代码进行escape编码的方法
2015/05/04 Python
python爬虫框架talonspider简单介绍
2017/06/09 Python
python中实现指定时间调用函数示例代码
2017/09/08 Python
python opencv摄像头的简单应用
2019/06/06 Python
pyecharts调整图例与各板块的位置间距实例
2020/05/16 Python
keras训练曲线,混淆矩阵,CNN层输出可视化实例
2020/06/15 Python
详解pycharm2020.1.1专业版安装指南(推荐)
2020/08/07 Python
OpenCV图片漫画效果的实现示例
2020/08/18 Python
通过代码简单了解django model序列化作用
2020/11/12 Python
完美解决torch.cuda.is_available()一直返回False的玄学方法
2021/02/06 Python
html5录音功能实战示例
2019/03/25 HTML / CSS
Topshop美国官网:英国快速时尚品牌
2019/05/16 全球购物
Java语言程序设计测试题选择题部分
2014/04/03 面试题
土建资料员岗位职责
2014/01/04 职场文书
2015年创先争优活动总结
2015/03/27 职场文书
PostgreSQL将数据加载到buffer cache中操作方法
2021/04/16 PostgreSQL
windows11选中自动复制怎么开启? Win11自动复制所选内容的方法
2022/07/23 数码科技