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 相关文章推荐
编写高性能的JavaScript 脚本的加载与执行
Apr 19 Javascript
js调用webservice中的方法实现思路及代码
Feb 25 Javascript
jQuery动画与特效详解
Feb 01 Javascript
jQuery实现在下拉列表选择时获取json数据的方法
Apr 16 Javascript
javascript实现框架高度随内容改变的方法
Jul 23 Javascript
微信小程序 教程之小程序配置
Oct 17 Javascript
React Native仿美团下拉菜单的实例代码
Aug 08 Javascript
React Native时间转换格式工具类分享
Oct 24 Javascript
微信小程序模板(template)使用详解
Jan 31 Javascript
React diff算法的实现示例
Apr 20 Javascript
Vue.js组件props数据验证实现详解
Oct 19 Javascript
通过JS判断网页是否为手机打开
Oct 28 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代码
2010/07/17 PHP
PHP filter_var() 函数 Filter 函数
2012/04/25 PHP
php常用字符串比较函数实例汇总
2014/11/24 PHP
CI框架实现框架前后端分离的方法详解
2016/12/30 PHP
PHP5.0~5.6 各版本兼容性cURL文件上传功能实例分析
2018/05/11 PHP
Laravel框架定时任务2种实现方式示例
2018/12/08 PHP
JavaScript入门学习书籍推荐
2008/06/12 Javascript
Js callBack 返回前一页的js方法
2008/11/30 Javascript
浅谈nodeName,nodeValue,nodeType,typeof 的区别
2015/01/13 Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
2015/04/07 Javascript
jquery操作angularjs对象
2015/06/26 Javascript
jQuery入门基础知识学习指南
2015/08/14 Javascript
跟我学习javascript的隐式强制转换
2015/11/16 Javascript
jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
2016/05/27 Javascript
浅析BootStrap栅格系统
2016/06/07 Javascript
Javascript将数字转化成为货币格式字符串
2016/06/22 Javascript
深入解析Javascript闭包的功能及实现方法
2016/07/10 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
2017/03/09 Javascript
JavaScript面试技巧之数组的一些不low操作
2019/03/22 Javascript
原生js+ajax分页组件
2020/01/30 Javascript
js实现扫雷源代码
2020/11/27 Javascript
[01:10:58]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
[01:06] DOTA2英雄背景故事第三期之秩序法则光之守卫
2020/07/07 DOTA
解决python3在anaconda下安装caffe失败的问题
2017/06/15 Python
python八皇后问题的解决方法
2018/09/27 Python
Python中最大递归深度值的探讨
2019/03/05 Python
Django forms表单 select下拉框的传值实例
2019/07/19 Python
Python调用C/C++的方法解析
2020/08/05 Python
在线吉他课程,学习如何弹吉他:Fender Play
2019/02/28 全球购物
医院工作检讨书范文
2014/02/10 职场文书
烹饪自我鉴定
2014/03/01 职场文书
《沉香救母》教学反思
2014/04/19 职场文书
英文感谢信格式
2015/01/21 职场文书
小学重阳节活动总结
2015/03/24 职场文书
小学生节水倡议书
2015/04/29 职场文书
深入浅出讲解Java8函数式编程
2022/01/18 Java/Android