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 相关文章推荐
js 父窗口控制子窗口的行为-打开,关闭,重定位,回复
Apr 20 Javascript
jquery 倒计时效果实现秒杀思路
Sep 11 Javascript
浅谈Javascript中深复制
Dec 01 Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
Mar 03 Javascript
JavaScript实现的伸展收缩型菜单代码
Oct 14 Javascript
JS实现双击屏幕滚动效果代码
Oct 28 Javascript
浅谈Angular中ngModel的$render
Oct 24 Javascript
微信小程序 地图(map)实例详解
Nov 16 Javascript
vue+express 构建后台管理系统的示例代码
Jul 19 Javascript
React SSR样式及SEO的实践
Oct 22 Javascript
Ajax获取node服务器数据的完整步骤
Sep 20 Javascript
Vue图片裁剪组件实例代码
Jul 02 Vue.js
防止重复发送 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
终于听上了直流胆调频
2021/03/02 无线电
php 缓存函数代码
2008/08/27 PHP
深入PHP中的HashTable结构详解
2013/06/13 PHP
怎么在Windows系统中搭建php环境
2013/08/31 PHP
CodeIgniter使用phpcms模板引擎
2013/11/12 PHP
PHP和javascript常用正则表达式及用法实例
2014/07/01 PHP
Zend Framework教程之响应对象的封装Zend_Controller_Response实例详解
2016/03/07 PHP
php读取qqwry.dat ip地址定位文件的类实例代码
2016/11/15 PHP
Laravel框架Eloquent ORM修改数据操作示例
2019/12/03 PHP
网页的标准,IMG不支持onload标签怎么办
2006/06/29 Javascript
使用TextRange获取输入框中光标的位置的代码
2007/03/08 Javascript
零基础学JavaScript最新动画教程+iso光盘下载
2008/01/22 Javascript
Javascript 中介者模式实例
2009/12/16 Javascript
js substr支持中文截取函数代码(中文是双字节)
2013/04/17 Javascript
jquery索引在使用中的一些困惑
2013/10/24 Javascript
简单解析JavaScript中的__proto__属性
2016/05/10 Javascript
js显示动态时间的方法详解
2016/08/20 Javascript
浅谈JQ中mouseover和mouseenter的区别
2016/09/13 Javascript
AngularJS ionic手势事件的使用总结
2017/08/09 Javascript
vue2.0.js的多级联动选择器实现方法
2018/02/09 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
2018/12/09 Javascript
jQuery实现验证用户登录
2019/12/10 jQuery
JavaScript async/await原理及实例解析
2020/12/02 Javascript
[26:40]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第一局
2016/02/25 DOTA
pygame 精灵的行走及二段跳的实现方法(必看篇)
2017/07/10 Python
python+matplotlib实现鼠标移动三角形高亮及索引显示
2018/01/15 Python
Python django框架输入汉字,数字,字符生成二维码实现详解
2019/09/24 Python
Python过滤序列元素的方法
2020/07/31 Python
python tqdm实现进度条的示例代码
2020/11/10 Python
澳大利亚在线百货商店:Real Smart
2017/08/13 全球购物
医学生自我鉴定范文
2013/11/08 职场文书
竞选班长演讲稿500字
2014/08/22 职场文书
关于运动会的广播稿(10篇)
2014/09/12 职场文书
2014教师党员自我评议(5篇)
2014/09/20 职场文书
事业单位个人查摆问题及整改措施
2014/10/28 职场文书
中学生自我评价2015
2015/03/03 职场文书