jQuery-1.9.1源码分析系列(十) 事件系统——事件绑定

  事件绑定的方式有很多种。使用了jQuery那么原来那种绑定方式(elem.click = function(){...})就不推荐了,原因?

  最主要的一个原因是elem.click = fn这种方式只能绑定一个事件处理,多次绑定的只会保留最后一次绑定的结果。

  

  看一下jQuery绑定事件的方式有哪些

jQuery.fn.eventType([[data,] fn])

  比如eventType指的是事件类型,比如click: $("#chua").click(fn);

  data这个参数一般都不会使用。这种方式事件绑定在("#chua")上,没有委托事件,和js原生的事件绑定更接近。我们看一下源码

jQuery.each( ("blur focus focusin focusout load resize scroll unload click dblclick " +"mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " +"change select submit keydown keypress keyup error contextmenu").split(" "), function( i, name ) {//合并15种事件统一增加到jQuery.fn上,内部调用this.on / this.triggerjQuery.fn[ name ] = function( data, fn ) {return arguments.length > 0 ?this.on( name, null, data, fn ) ://如果不带参数表示立刻触发指定事件this.trigger( name );};
});

 

jQuery.fn.bind( types[, data], fn )

  比如$("#chua").bind("click",fn)。直接将事件绑定到$("#chua")上,没有委托事件。源码

bind: function( types, data, fn ) {return this.on( types, null, data, fn );
},
unbind: function( types, fn ) {return this.off( types, null, fn );
}

 

jQuery.fn.delegate(selector, types[, data], fn)

  顾名思义delegate这个函数是用来做事件委托的,将选择器selector对应的响应处理委托给当前jQuery所匹配的元素。

  比如:$(document).delegate('#big',"click",dohander);分析到这里顺便分析一下事件委托的处理流程

  当点击"#big"元素的时候,事件click会冒泡直到document节点;

  document绑定了处理事件,这个处理事件会调用到事件分发器dispatch;

  dispatch中取出对应事件类型click的所有的委托事件列表handlers;

  根据事件源event.target过滤出委托事件列表handlers中每一个元素的selector属性对应的节点处于事件原和委托节点document之间(包括事件源)的委托事件,保存为handlerQueue;

  执行handlerQueue里面的事件处理。

  上面是一个大致的流程,后续会详细分析。先看delegate源码

delegate: function( selector, types, data, fn ) {return this.on( types, selector, data, fn );
},
undelegate: function( selector, types, fn ) {// ( namespace ) or ( selector, types [, fn] )return arguments.length === 1 ? this.off( selector, "**" ) : this.off( types, selector || "**", fn );
}

 

jQuery.fn.one( types[, selector[, data]], fn )

  通过one()函数绑定的事件处理函数都是一次性的,只有首次触发事件时会执行该事件处理函数。触发之后,jQuery就会移除当前事件绑定。

  比如$("#chua").one("click",fn);为#chua节点绑定一次性的click事件

  $(document).one("click","#chua",fn);将#chua的click事件委托给document处理。源码

one: function( types, selector, data, fn ) {return this.on( types, selector, data, fn, 1 );
}

 

jQuery.fn.trigger(type[, data])

jQuery.fn.triggerHandler(type[, data])

  trigger触发jQuery对象所匹配的每一个元素对应type类型的事件。比如$("#chua").trigger("click");

  triggeHandler只触发jQuery对象所匹配的元素中的第一个元素对应的type类型的事件,且不会触发事件的默认行为。

//立刻触发jQuery对象内所有元素的指定type的事件
trigger: function( type, data ) {return this.each(function() {jQuery.event.trigger( type, data, this );});
},
//立刻触发jQuery对象内第一个元素的指定type的事件,且不会触发事件(比如表单提交)的默认行为
triggerHandler: function( type, data ) {var elem = this[0];if ( elem ) {return jQuery.event.trigger( type, data, elem, true );}
}

  

  上面分析了那么些个事件绑定,有么有发现他们都是使用.on方式绑定的?这也是为什么提倡统一使用on来绑定的原因(one方式除外)。

jQuery.fn.on( types[, selector[, data]], fn )

  .on的事件绑定一半的代码都实在处理传递不同参数的处理,这也是jQuery的口号Write less, do more的代价吧。最终使用jQuery.event.add来绑定事件。

  jQuery.event.add绑定事件有几个比较关键的地方:

  第一个,使用内部缓存来保存节点elem的事件信息

            //获取缓存数据 
       elemData = jQuery._data( elem );...
       
       //设置缓存数据
if ( !(events = elemData.events) ) {events = elemData.events = {};}if ( !(eventHandle = elemData.handle) ) {eventHandle = elemData.handle = function( e ) {...};//将elem作为handle函数的一个特征防止ie非本地事件引起的内存泄露eventHandle.elem = elem;}

  第二个,设置绑定事件信息,特别是指定的选择器selector、响应处理handler、响应事件类型type、命名空间namespace

        // handleObj:设置绑定事件信息。贯穿整个事件处理handleObj = jQuery.extend({type: type,origType: origType,data: data,handler: handler,guid: handler.guid,selector: selector,// For use in libraries implementing .is(). We use this for POS matching in `select`//"needsContext": new RegExp( "^" + whitespace + "*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\(" +//whitespace + "*((?:-\\d)?\\d*)" + whitespace + "*\\)|)(?=[^-]|$)", "i" )//用来判断亲密关系needsContext: selector && jQuery.expr.match.needsContext.test( selector ),namespace: namespaces.join(".")}, handleObjIn );

  第三个,节点的事件列表中,真正的委托事件列表放置在前面,和delegateCount属性同步,即events.click.length假设为3,events.click.delegateCount假设为2。那么events.click[0]和events.click[1]所指定事件是委托事件。第三个events.click[2]对应的事件不是委托事件,而是节点自身的事件。

        //将事件对象handleObj添加到元素的处理列表,委托事件放在前面,委托代理计数递增if ( selector ) {handlers.splice( handlers.delegateCount++, 0, handleObj );} else {handlers.push( handleObj );}

  源码和添加事件后的结构上一章已经分析,详情请点击查看

  

  绑定有一个公用函数jQuery.fn.on。解绑同样有一个公用函数jQuery.fn.off

jQuery.fn.off([ types[, selector][, fn]] )

  这里的传参有个比较特殊的情况:当types是浏览器事件对象event的时候,表示要去掉(解绑)委托节点上event.selector指定的委托事件

//传入的参数是事件且绑定了处理函数
if ( types && types.preventDefault && types.handleObj ) {// ( event )  dispatched jQuery.EventhandleObj = types.handleObj;//types.delegateTarget是事件托管对象
        jQuery( types.delegateTarget ).off(//组合jQuery识别的typehandleObj.namespace ? handleObj.origType + "." + handleObj.namespace : handleObj.origType,handleObj.selector,handleObj.handler);return this;
}

  无论如何最终都是调用jQuery.event.remove函数来解绑事件。

  jQuery.fn.off完整的源码如下

off: function( types, selector, fn ) {var handleObj, type;//传入的参数是事件且绑定了处理函数if ( types && types.preventDefault && types.handleObj ) {// ( event )  dispatched jQuery.EventhandleObj = types.handleObj;//types.delegateTarget是事件托管对象
        jQuery( types.delegateTarget ).off(//组合jQuery识别的typehandleObj.namespace ? handleObj.origType + "." + handleObj.namespace : handleObj.origType,handleObj.selector,handleObj.handler);return this;}if ( typeof types === "object" ) {// ( types-object [, selector] )for ( type in types ) {this.off( type, selector, types[ type ] );}return this;}if ( selector === false || typeof selector === "function" ) {// ( types [, fn] )fn = selector;selector = undefined;}if ( fn === false ) {fn = returnFalse;}return this.each(function() {jQuery.event.remove( this, types, fn, selector );});
}
View Code

  

  接下来分析一下事件解绑的低级api jQuery.event.remove。

jQuery.event.remove

  jQuery使用.off()函数伤处绑定的事件时内部调用的基础函数是jQuery.event.remove。该函数的处理流程如下

  1. 分解传入的要删除的事件类型types,遍历类型,如果要删除的事件没有事件名,只有命名空间则表示删除该命名空间下所有绑定事件

//分解types为type.namespace为单位元素的数组
types = ( types || "" ).match( core_rnotwhite ) || [""];
t = types.length;
while ( t-- ) {tmp = rtypenamespace.exec( types[t] ) || [];type = origType = tmp[1];namespaces = ( tmp[2] || "" ).split( "." ).sort(); //解绑当前元素的当前命名空间(types[ t ])上所有的事件if ( !type ) {for ( type in events ) {jQuery.event.remove( elem, type + types[ t ], handler, selector, true );}continue;}...

  2. 遍历类型过程中,删除匹配的事件,代理计数修正

type = ( selector ? special.delegateType : special.bindType ) || type;
handlers = events[ type ] || [];
tmp = tmp[2] && new RegExp( "(^|\\.)" + namespaces.join("\\.(?:.*\\.|)") + "(\\.|$)" );//删除匹配事件
origCount = j = handlers.length;
while ( j-- ) {handleObj = handlers[ j ]; //各种满足移除事件的条件才能移除if ( ( mappedTypes || origType === handleObj.origType ) &&( !handler || handler.guid === handleObj.guid ) &&( !tmp || tmp.test( handleObj.namespace ) ) &&( !selector || selector === handleObj.selector || selector === "**" && handleObj.selector ) ) {handlers.splice( j, 1 ); 
        if ( handleObj.selector ) {handlers.delegateCount--;}
        if ( special.remove ) {special.remove.call( elem, handleObj );}}
}

  3. 如果节点上指定类型的事件处理器已经为空,则将events上的该类型的事件处理对象移除

// 移除事件处理对象
// (移除特殊事件处理过程中避免潜在的无限递归,下一章会专门详解这种情况)
if ( origCount && !handlers.length ) {
//例如 var js_obj = document.createElement("div"); js_obj.onclick = function(){ …}
//上面的js_obj是一个DOM元素的引用,DOM元素它长期在网页当中,不会消失,而这个DOM元素的一属性onclick,又是内部的函数引用(闭包),而这个匿名函数又和js_obj之间有隐藏的关联(作用域链)所以形成了一个,循环引用.
if ( !special.teardown || special.teardown.call( elem, namespaces, elemData.handle ) === false ) {jQuery.removeEvent( elem, type, elemData.handle );
} delete events[ type ];
}

  4. 如果节点上没有任何绑定的事件,则清空事件处理入口handle

if ( jQuery.isEmptyObject( events ) ) {
  delete elemData.handle;
  //removeData还检事件对象是否为空,所以使用它替代deletejQuery._removeData( elem, "events" );
}

 

拓展: 浏览器事件删除jQuery.removeEvent

jQuery.removeEvent = document.removeEventListener ?
function( elem, type, handle ) {if ( elem.removeEventListener ) {elem.removeEventListener( type, handle, false );}
} :
function( elem, type, handle ) {var name = "on" + type;if ( elem.detachEvent ) {// #8545, #7054,避免自定义事件在IE6-8中的内存泄露// detachEvent需要传递第一个参数,不能是undefined的if ( typeof elem[ name ] === core_strundefined ) {elem[ name ] = null;}elem.detachEvent( name, handle );}
};

 

   如果觉得本文不错,请点击右下方【推荐】!

 

 

 

  

转载于:https://www.cnblogs.com/chuaWeb/p/jQuery-1-9-1-addEvents-2.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/289835.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Windows 8系统平台上应用软件安装心得

1.ArcGIS 10.2安装 需要单独安装.NET 3.5,GIS软件自带的.NET系统不识别,点击360云盘地址进行下载(提取码为:1ed3)。(另外,Win8系统上安装.NET可以参考:http://blog.csdn.net/aijavaer/article/d…

Android视图绘制流程完全解析,带你一步步深入了解View(二)

转自:http://blog.csdn.net/guolin_blog/article/details/16330267 在上一篇文章中,我带着大家一起剖析了一下LayoutInflater的工作原理,可以算是对View进行深入了解的第一步吧。那么本篇文章中,我们将继续对View进行深入探究&…

C# 线程问题之死锁

过多的锁定也会有麻烦。在死锁中,至少有两个线程被挂起,并等待对方解除锁定。由于两个线程都在等待对方,就出现了死锁,线程将无限等待下去。为了说明死锁,下面实例化 StateObject 类型的两个对象,并把它们传…

Matlab图形绘制

1.正余弦曲线 例如自变量从0到10,间隔为0.1的曲线代码如下: 正弦 t 0:.1:10; y sin(t); plot(t,y); 余弦 t 0:.1:10; y cos(t); plot(t,y); 正余弦图形显示如下:

Blazor University (5)组件 — 字面量、表达式和指令

原文链接:https://blazor-university.com/components/literals-expressions-and-directives/字面量、表达式和指令源代码[1]请注意,本节一般不涵盖 Razor 标记。它不会涵盖诸如条件输出、循环等内容。该主题在网络和书籍中的其他地方得到了广泛的介绍。使…

.NET6之MiniAPI(二十七):Metrics

应用的各种Metrics是保证应用健康稳定运行的基础,特别对于一些可用性有所要求的应用,本文介绍prometheus-net这个三方指示库。prometheus-net的工作原理是,在应用内部埋点,通过prometheus采集数据,然后通过grafana把采…

回溯算法之布罗夫卫队(最大团问题)

1、问题 在原始部落中,由于食物缺乏,部落居民经常因为争夺猎物发生冲突,几乎每个居民都 有自己的仇敌。部落酋长为了组织一支保卫部落的卫队,希望从居民中选出最多的居民加入 卫队,并保证卫队中任何两个人都不是仇敌。假设已给定部落中居民间的仇敌关系图,编程 计算构建部落护…

microdot - 一个开源 .NET 微服务框架。

简介Microdot 是一个开源 .NET 框架,可满足轻松创建微服务的许多需求。它的一些主要特点•用于托管微服务的服务容器•服务间 RPC,便于基于接口的服务通信•服务之间的客户端透明响应缓存•日志记录和分布式跟踪支持•客户端负载均衡和服务发现•详细的健…

slider控件控制文本框字体大小

1.控件代码 <pre name"code" class"csharp"> <Slider x:Name"slider1" HorizontalAlignment"Left" Margin"0,261,0,0" VerticalAlignment"Top" Width"446" ValueChanged"Slid…

争时金融java_Java高并发编程基础之AQS

引言曾经有一道比较比较经典的面试题“你能够说说java的并发包下面有哪些常见的类&#xff1f;”大多数人应该都可以说出CountDownLatch、CyclicBarrier、Sempahore多线程并发三大利器。这三大利器都是通过AbstractQueuedSynchronizer抽象类(下面简写AQS)来实现的&#xff0c;所…

Xamarin效果第十三篇之弹窗PopupPage

在上一篇文章中使用Xamarin实现控制了一下祖传的PLC;基本的功能也就完事了,这不总觉得少点最基本的配置;那就趁着激情还在赶紧再去完善一下,不然激情已过就懒得去摸索了;来看看最终咱实现的视频效果:1、关于弹窗,直接使用开源的PopupPageInstall-Package Rg.Plugins.Popup -Ver…

C# 线程问题之争用条件

用多个线程编程并不容易。在启动访问相同数据的多个线程时&#xff0c;会间歇性地遇到难以发现的问题。如果使用任务、并行 LINQ 或 Parallel 类&#xff0c;也会遇到这些问题。为了避免这些问题&#xff0c;必须特别注意同步问题和多个线程可能发生的其他问题。下面探讨与线程…

尾调用优化 java_为什么JVM仍然不支持尾调用优化?

拉丁的传说也许您已经知道这一点&#xff0c;但是这个功能并不像听起来那么简单&#xff0c;因为Java语言实际上将堆栈跟踪暴露给程序员。考虑以下程序&#xff1a;public class Test {public static String f() {String s Math.random() > .5 ? f() : g();return s;}publ…

【AngularJS】—— 2 初识AngularJs(续)

前一篇了解了AngularJS的一些简单的使用&#xff0c;这里继续跟着w3c学习一下剩下的内容。 本篇根据w3cschool.cc继续学习AngularJS剩余的内容&#xff0c;包括&#xff1a; 1 事件 2 模块 3 表单 4 数据验证 5 bootstrap CSS风格 6 include包含其他页面 7 应用程序 8 参考手册…

特斯拉为何使用.NET 技术栈?

【精选转载】| 来源/知乎在知乎上有一个帖子非常热闹&#xff1a;“为何特使拉使用.net core技术栈 而不用 java&#xff1f;”1回答1&#xff1a;Kasim作者&#xff1a;Kasim链接&#xff1a;https://www.zhihu.com/question/496204534/answer/2269157872这题我熟啊&#xff0…

Blazor University (6)组件 — 组件事件

原文链接&#xff1a;https://blazor-university.com/components/component-events/组件事件源代码[1]EventCallback<T> 类是一个特殊的 Blazor 类&#xff0c;可以作为参数公开&#xff0c;以便组件可以在发生感兴趣的事情时轻松通知使用者。一旦声明了 EventCallback&l…

Xamarin效果第十四篇之玩耍GIS

最近再次拾起Xamarin然后也实现了祖传PLC控制和弹窗配置;这不又一次勾起来我想基于他玩玩原来一直玩耍的GIS,毕竟咱前面一直玩耍二维和三维的GIS相关的知识点;有兴趣的小伙伴可以翻翻我的历史文章;趁着激情满满;来看看最终咱实现的加载高德平面地图效果(有水印):再者就是满足群…

PHP进程退出信号_一文吃透 PHP 进程信号处理

背景前两周老大给安排了一个任务&#xff0c;写一个监听信号的包。因为我司的项目是运行在容器里边的&#xff0c;每次上线&#xff0c;需要重新打包镜像&#xff0c;然后启动。在重新打包之前&#xff0c;Dokcer会先给容器发送一个信号&#xff0c;然后等待一段超时时间(默认1…

GitHub Copilot 现已登陆 Visual Studio!

激动人心的好消息来了&#xff0c;GitHub 在3月29日发布博客&#xff0c;宣布 Github Copilot 现在可以在 Visual Studio 中使用。我们知道 Visual Studio 的 IntelliCode 本身已经很智能了, 现在又迎来了 Copilot, 编程体验将进入新的篇章。如何安装? 首先&#xff0c;您…

iOS 9音频应用播放音频之音量设置与声道设置

iOS 9音频应用播放音频之音量设置与声道设置 iOS 9音频应用音量设置 音量又称响度、音强&#xff0c;是指人耳对所听到的声音大小强弱的主观感受&#xff0c;其客观评价尺度是声音的振幅大小。在iOS 9音频应用的应用中&#xff0c;经常会出现播放的音乐音量过大或者过小。此时i…