jquery on方法原理_jquery中on方法原理分析

于 2021-01-14 14:56:11 发布
阅读量261 收藏
点赞数
文章标签： jquery on方法原理
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39625864/article/details/112946411
版权

jquery中on方法原理分析

时间：6年前

浏览：422

[站内原创，转载请注明出处]

在新版本的jquery中推荐使用on方法来绑定事件，用这个方法绑定的事件会逐个执行不会有后面方法覆盖前面方法的问题，有的人利用addEventerListener的方法处理一些兼容，来绑定事件。这种方式虽说不会有事件覆盖的问题，但是在ie中绑定事件会倒序执行。一个偶然的机会听说一个叫做事件队列的名词，过了一段时间才想明白是什么情况。jquery是基于数组的拓展，事件方面应该也是基于数组做的，就是在调用on的时候将传递的函数push在一个数组里面，当触发事件的时候，将数组里面的函数按顺序call一遍，就会解决绑定的事件覆盖的问题，而且事件执行顺序也会是绑定的顺序，在ie下也不会有倒序的问题了。

补充：下方图片仅仅是一个例子，代码还不完善，看看就算了。(经测试IE6、9、chrome都ok)

由炫木之光最后编辑于：6年前

内容均为作者独立观点，不代表八零IT人立场，如涉及侵权，请及时告知。

本站文章除注明转载外，均为本站原创，欢迎任何形式的转载，但请务必注明出处，尊重他人劳动共创和谐网络社区。

转载请注明：文章转载自-八零IT人 [http://www.80iter.com]

本文标题：jquery中on方法原理分析

本文地址：http://www.80iter.com/blog/1417439611534974

weixin_39625864
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery中bind和on绑定事件的区别
qq_42462656的博客
12-11 95
链接：https://www.cnblogs.com/binghuaZhang/p/10950816.html
jQuery on()方法
weixin_30765577的博客
02-12 442
jQuery on()方法是官方推荐的绑定事件的一个方法。 $(selector).on(event,childSelector,data,function,map) 由此扩展开来的几个以前常见的方法有. bind() 　　$("p").bind("click",function(){ 　　　　alert("The paragraph was clicked."); 　　}); ...
javascript事件委托理解，jQuery .on()方法一步到位实现事件委托
orange0111的博客
11-13 3743
本篇文章借鉴自：博客园文章，只为自己巩固下事件委托方面的知识 概述: 什么叫事件委托？他还有一个名字叫做事件代理，（时间代理 === 事件委托，现在才知道这两个是一个意思） 高程3上讲：事件委托即是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。 借鉴其他大牛的一个例子，也为自己更好的理解一下：收快递例子 有三个同事预计会在周一收到快递。为签收快递，有两种办法
jQuery源码分析之on方法
高山上的鱼
09-27 2769
on函数源码详解 on: function( types, selector, data, fn, /*INTERNAL*/ one ) { var type, origFn; // Types can be a map of types/handlers //如果第一个types的对象是object类型 /*给出一个案例： var data = { id: 5, name: "张三"
jquery lazyload延迟加载技术的实现原理分析
12-12
《jQuery LazyLoad延迟加载技术的实现原理》 延迟加载（LazyLoad）技术是现代网页优化的重要策略之一，尤其对于图片、Flash资源、iframe以及类似FCK的网页编辑器等大容量资源，它能够显著提升页面加载速度，提高...
JQuery事件委托原理与用法实例分析
11-27
JQuery事件委托是一种高效处理大量动态元素事件绑定的技术，它基于JavaScript中的事件冒泡机制。在HTML结构中，事件通常会从最深的元素向上冒泡到其父元素，直至到达文档的根节点。事件委托就是利用这个特性，将事件...
jQuery实现在新增加的元素上添加事件方法案例分析
12-12
在jQuery 1.7及以上版本中，`live()`方法已经被废弃，取而代之的是更为灵活和高效的`on()`方法。本文将深入探讨如何使用`on()`方法在动态添加的元素上绑定事件，以及其工作原理和优化策略。 `on()`方法的基本语法...
Jquery源码资料_jquery_
09-30
- 事件委托：jQuery的事件委托通过`.delegate()`和`.live()`（在新版本中被`.on()`取代）实现，源码中可以看到如何处理事件的代理和传递，提高性能。 3. **动画效果** - 动画API：`.fadeIn()`, `.slideUp()`, `....
jQuery源码详细分析中文注释
12-30
总的来说，这份《jQuery源码详细分析中文注释》是学习和研究jQuery源码的绝佳资料，通过深入阅读和理解注释，开发者不仅可以掌握jQuery的工作原理，还能提升JavaScript编程技巧，为自己的项目开发带来更高的效率和更...
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
11-23
本文实例分析了jQuery中bind(),live(),delegate(),on()绑定事件方法。分享给大家供大家参考，具体如下： 前言 因为项目中经常会有利用jquery操作dom元素的增删操作，所以会涉及到dom元素的绑定事件方式，简单的归纳一下bind,live,delegate,on的区别，以便以后查阅，也希望该文章日后能帮助到各位朋友，文中如有不当之处，还望各位指正，话不多说，直接进入正题。 一、bind() 简要描述 bind()向匹配元素添加一个或多个事件处理器。 使用方式 复制代码 代码如下:$(selector).bind(event,data,function) even
jQuery的原生js实现---on方法
wujimiao的专栏
09-30 6733
国庆节来了，心情不错，但学习还得继续，今天特意对jQuery的on事件绑定做一个笔记。 1 2 3 4 5 6 7 8 //原生js简单实现jQuery---on方法 //IE9以下支持
Jquery的on()方法使用
RinSing
04-01 6921
此方法可以在匹配元素上绑定一个或者多个事件处理函数。 使用off()方法可以删除on()方法绑定的事件。 语法结构一: $(selector).on(events,[selector],[data],fn) events：一个或多个用空格分隔的事件类型和可选的命名空间。 selector：可选。一个选择器字符串，用以过滤选定的元素，该选择器的后裔元素将调用处理程序。如果选择是空或被忽略，当它到...
jQuery事件中on实现绑定多个事件
极客神殿
04-06 8427
相信大家都知道在jQuery1.9版本中，已经去掉了live和delegate方法，从而将on方法的地位进一步提升。 jQuery如此推崇on方法，必有其独到的地方。所以我们就有必要了解这个on，并在代码中利用它，从而优化代码和提高性能。那么接下来我们就来看看on的使用方法 一、使用on进行普通事件绑定 1.1使用on绑定一个事件 语法结构： jq对象.on(“事件类型”,”事件处理函数”) 1....
Jquery on方法
我只是个小学生 能力有限 一直抱着学习的态度
06-18 764
<div class="search"> <!--已选类别--> <div class="atp_choosed overflow"> <div class="left title col666">已选类别：</div> <div class="left conn" style="width: 780px;"&g...
jQuery中的on方法
fun
10-13 7503
在jQuery的1.7+的版本之中，原来的live方法被去除了，那么怎么做到live方法的一样的绑定时间的效果呢？答案就是on方法，on 方法有怎么去使用呢？1. on 给已经在dom 中的元素绑定事件jQuery的文档里面已经给出示例了,先看看on方法的完整的形态： on(events,[selector],[data],fn) 参数：events,[selector],[data],
jQuery事件绑定原理(2)
sysuzhyupeng的博客
05-28 946
jQuery事件jQuery需要处理事件对象不同浏览器的兼容性。event 对象的属性和方法包含了当前事件的状态。在 W3C 规范中，event 对象是随事件处理函数传入的，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持这种方式；但是对于 IE8.0 及其以下版本，event 对象必须作为 window 对象的一个属性。event的某些属性只对特定的事件有意义。
html事件委托原理,JQuery事件委托原理与用法实例分析
最新发布
06-08
JQuery事件委托原理：JQuery中使用on()方法来实现事件委托，该方法的参数有三个：事件类型、选择器、事件处理函数。当事件类型发生在选择器匹配的元素上时，事件处理函数就会被调用。JQuery会在父元素上绑定一个事件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值