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 相关文章推荐
asp 的 分词实现代码
May 24 Javascript
JQuery 浮动导航栏实现代码
Aug 27 Javascript
IE8 chrome中table隔行换色解决办法
Jul 09 Javascript
JS实现QQ图片一闪一闪的效果小例子
Jul 31 Javascript
JavaScript中创建类/对象的几种方法总结
Nov 29 Javascript
jquery 表格排序、实时搜索表格内容(附图)
May 19 Javascript
基于 Node.js 实现前后端分离
Apr 23 Javascript
基于node实现websocket协议
Apr 25 Javascript
纯JS实现可拖拽表单的简单实例
Sep 02 Javascript
使用Angular CLI从蓝本生成代码详解
Mar 24 Javascript
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
微信小程序网络请求实现过程解析
Nov 06 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
html中select语句读取mysql表中内容
2006/10/09 PHP
php遍历目录viewDir函数
2009/12/15 PHP
浅析PHP 按位与或 (^ 、&)
2013/06/21 PHP
thinkPHP连接sqlite3数据库的实现方法(附Thinkphp代码生成器下载)
2016/05/27 PHP
多个Laravel项目如何共用migrations详解
2018/09/25 PHP
php字符串过滤strip_tags()函数用法实例分析
2019/06/24 PHP
一个简单的JavaScript 日期计算算法
2009/09/11 Javascript
firefox事件处理之自动查找event的函数(用于onclick=foo())
2010/08/05 Javascript
JS实现静止元素自动移动示例
2014/04/14 Javascript
jQuery中andSelf()方法用法实例
2015/01/08 Javascript
Javascript实现div的toggle效果实例分析
2015/06/09 Javascript
JavaScript获得指定对象大小的方法
2015/07/01 Javascript
js实现图片轮播效果
2015/12/19 Javascript
浅谈javascript 函数表达式和函数声明的区别
2016/01/05 Javascript
Immutable 在 JavaScript 中的应用
2016/05/02 Javascript
url中的特殊符号有什么含义(推荐)
2016/06/17 Javascript
JS实现的表头列头固定页面功能示例
2017/01/10 Javascript
js中getBoundingClientRect的作用及兼容方案详解
2018/02/01 Javascript
Vue中的slot使用插槽分发内容的方法
2018/03/01 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
2018/06/20 jQuery
layerui代码控制tab选项卡,添加,关闭的实例
2019/09/04 Javascript
JavaScript Dom实现轮播图原理和实例
2021/02/19 Javascript
[02:51]DOTA2战队出征照拍摄花絮 TI3明星化身时尚男模
2013/07/22 DOTA
[06:20]2015国际邀请赛第三日top10
2015/08/08 DOTA
Python实现的圆形绘制(画圆)示例
2018/01/31 Python
Python实现查看系统启动项功能示例
2018/05/10 Python
python人民币小写转大写辅助工具
2018/06/20 Python
python 中 .py文件 转 .pyd文件的操作
2021/03/04 Python
EJB2和EJB3在架构上的不同点
2014/09/29 面试题
假日旅行社实习自我鉴定
2013/09/24 职场文书
农村党员一句话承诺
2014/05/30 职场文书
公司市场专员岗位职责
2014/06/29 职场文书
党课心得体会范文
2014/09/09 职场文书
2015年师德师风自我评价范文
2015/03/05 职场文书
事业单位财务人员岗位职责
2015/04/14 职场文书
公司行政管理制度范本
2015/08/05 职场文书