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 相关文章推荐
学习ExtJS(二) Button常用方法
Oct 07 Javascript
推荐25个超炫的jQuery网格插件
Nov 28 Javascript
jquery操作复选框checkbox的方法汇总
Feb 05 Javascript
深入浅析JavaScript中的作用域和上下文
Mar 26 Javascript
浅谈jQuery效果函数
Sep 16 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
Dec 12 Javascript
老生常谈jquery中detach()和remove()的区别
Mar 02 Javascript
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 jQuery
vue router自动判断左右翻页转场动画效果
Oct 10 Javascript
对angular 实时更新模板视图的方法$apply详解
Oct 09 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
Sep 05 Javascript
在vue中使用防抖函数组件操作
Jul 26 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
excellent!――ASCII Art(由目标图象生成ascii)
2007/02/20 PHP
php 数组的合并、拆分、区别取值函数集
2010/02/15 PHP
php里array_work用法实例分析
2015/07/13 PHP
Symfony2使用Doctrine进行数据库查询方法实例总结
2016/03/18 PHP
利用PHP判断文件是否为图片的方法总结
2017/01/06 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
php-app开发接口加密详解
2018/04/18 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
PHP pthreads v3使用中的一些坑和注意点分析
2020/02/21 PHP
[推荐]javascript 面向对象技术基础教程
2009/03/03 Javascript
基于jquery实现的表格分页实现代码
2011/06/21 Javascript
jQuery+css+html实现页面遮罩弹出框
2013/03/21 Javascript
jQuery的each终止或跳过示例代码
2013/12/12 Javascript
js中array的sort()方法使用介绍
2014/02/20 Javascript
js实现单击图片放大图片的方法
2015/02/17 Javascript
ashx文件获取$.ajax()方法发送的数据
2016/05/26 Javascript
vue引入swiper插件的使用实例
2017/07/19 Javascript
用node-webkit把web应用打包成桌面应用(windows环境)
2018/02/01 Javascript
详解Webpack-dev-server的proxy用法
2018/09/08 Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
2018/09/21 Javascript
JavaScript根据json生成html表格的示例代码
2018/10/24 Javascript
vue实现固定位置显示功能
2019/05/30 Javascript
基于原生js实现九宫格算法代码实例
2020/07/03 Javascript
JavaScript中reduce()的5个基本用法示例
2020/07/19 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
2020/11/05 Javascript
Vue中避免滥用this去读取data中数据
2021/03/02 Vue.js
[01:00:30]TFT vs VGJ.T Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
python日志记录模块实例及改进
2017/02/12 Python
Flask之请求钩子的实现
2018/12/23 Python
django中瀑布流写法实例代码
2019/10/14 Python
美国二手奢侈品寄售网站:TheRealReal
2016/10/29 全球购物
Hawes & Curtis官网:英国经典品牌
2019/07/27 全球购物
2015年妇女工作总结
2015/05/14 职场文书
河童之夏观后感
2015/06/11 职场文书
护士工作心得体会
2016/01/25 职场文书
Java 数组的使用
2022/05/11 Java/Android