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 相关文章推荐
ImageFlow可鼠标控制图片滚动
Jan 30 Javascript
javascript 闭包
Sep 15 Javascript
jquery easyui使用心得
Jul 07 Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
Sep 01 Javascript
javascript随机显示背景图片的方法
Jun 18 Javascript
js的flv视频播放器插件使用方法
Jun 23 Javascript
Javascript函数式编程简单介绍
Oct 11 Javascript
原生和jQuery的ajax用法详解
Jan 23 Javascript
js遍历json对象所有key及根据动态key获取值的方法(必看)
Mar 09 Javascript
JS实现自定义状态栏动画文字效果示例
Oct 12 Javascript
js经验分享 JavaScript反调试技巧
Mar 10 Javascript
JavaScript常用数组操作方法,包含ES6方法
May 10 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选项与信息函数的使用详解
2013/05/10 PHP
PHP中iconv函数转码时截断字符问题的解决方法
2015/01/21 PHP
win7 wamp 64位 php环境开启curl服务遇到的问题及解决方法
2018/09/16 PHP
laravel 框架实现无限级分类的方法示例
2019/10/31 PHP
基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
2006/12/06 Javascript
javascript 面向对象编程基础:封装
2009/08/21 Javascript
js弹出div并显示遮罩层
2014/02/12 Javascript
浅析JS异步加载进度条
2016/05/05 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
2016/06/06 Javascript
JS类的定义与使用方法深入探索
2016/11/26 Javascript
BootStrop前端框架入门教程详解
2016/12/25 Javascript
vue-router 源码之实现一个简单的 vue-router
2018/07/02 Javascript
在微信小程序中使用vant的方法
2019/06/07 Javascript
[02:28]DOTA2 2017国际邀请赛小组赛回顾
2017/08/09 DOTA
[46:44]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
python结合API实现即时天气信息
2016/01/19 Python
python正则表达式爬取猫眼电影top100
2018/02/24 Python
Python如何爬取微信公众号文章和评论(基于 Fiddler 抓包分析)
2019/06/28 Python
python设计微型小说网站(基于Django+Bootstrap框架)
2019/07/08 Python
python 默认参数相关知识详解
2019/09/18 Python
基于python的BP神经网络及异或实现过程解析
2019/09/30 Python
python模拟实现斗地主发牌
2020/01/07 Python
PyTorch中Tensor的数据统计示例
2020/02/17 Python
英国排名第一的礼品体验公司:Red Letter Days
2018/08/16 全球购物
德国拖鞋网站:German Slippers
2019/11/08 全球购物
哥德堡通行证:Gothenburg Pass
2019/12/09 全球购物
自荐信如何“自荐”
2013/10/24 职场文书
大客户销售经理职责
2013/12/04 职场文书
自我评价是什么
2014/01/04 职场文书
家庭贫困证明范本(经典版)
2014/09/22 职场文书
2014年政协委员工作总结
2014/12/01 职场文书
以权谋私检举信范文
2015/03/02 职场文书
教师党员个人自我评价
2015/03/04 职场文书
pycharm debug 断点调试心得分享
2021/04/16 Python
Pandas||过滤缺失数据||pd.dropna()函数的用法说明
2021/05/14 Python
Java多条件判断场景中规则执行器的设计
2021/06/26 Java/Android