javascript事件之:jQuery事件中实例对象和拓展对象之间的通信
我们总结过jQery事件中的实例原型对象对外接口和拓展对象,现在我们看看他们是如何进行通信联系的。
先来看便捷方法:
1 //调用的还是实例对象下的on()和trigger() 2 jQuery.each( ("blur focus focusin focusout load resize scroll unload click dblclick " + 3 "mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " + 4 "change select submit keydown keypress keyup error contextmenu").split(" "), function( i, name ) { 5 jQuery.fn[ name ] = function( data, fn ) { 6 return arguments.length > 0 ? 7 this.on( name, null, data, fn ) : 8 this.trigger( name ); 9 }; 10 }); 11 12 jQuery.fn.extend({ 13 //调用的是上面实例的mouseenter和mouseleave 14 hover: function( fnOver, fnOut ) { 15 return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver ); 16 }, 17 //调用的是实例下的on 18 bind: function( types, data, fn ) { 19 return this.on( types, null, data, fn ); 20 }, 21 //调用的是实例下的off 22 unbind: function( types, fn ) { 23 return this.off( types, null, fn ); 24 }, 25 //调用的是实例下的on 26 delegate: function( selector, types, data, fn ) { 27 return this.on( types, selector, data, fn ); 28 }, 29 //调用的是实例下的off 30 undelegate: function( selector, types, fn ) { 31 // ( namespace ) or ( selector, types [, fn] ) 32 return arguments.length === 1 ? this.off( selector, "**" ) : this.off( types, selector || "**", fn ); 33 } 34 });
所以便捷方法知识调用了实例下的on,off,triger三个方法。其本身的学习价值不高。
接下来是另外几个供便捷方法调用的实例方法。
1 jQuery.fn.extend({ 2 //调用的是jQuery.event下的add() 3 on: function( types, selector, data, fn, /*INTERNAL*/ one ) { 4 jQuery.event.add( this, types, fn, data, selector );... 5 }, 6 //调用的是上面的on 7 one: function( types, selector, data, fn ) { 8 return this.on( types, selector, data, fn, 1 ); 9 }, 10 //调用的是jQuery.event下的remove() 11 off: function( types, selector, fn ) { 12 jQuery.event.remove( this, types, fn, selector );... 13 }, 14 //调用的是jQuery.event下的trigger() 15 trigger: function( type, data ) { 16 return this.each(function() { 17 jQuery.event.trigger( type, data, this ); 18 }); 19 }, 20 //调用的是jQuery.event下的trigger() 21 triggerHandler: function( type, data ) { 22 return jQuery.event.trigger( type, data, elem, true );... 23 } 24 })
这里调用的主要是jQuery.event下的3个方法:add(), remove(), trigger()。其本身的学习意义也不大。我们来看jQuery.event下的这三个方法。
1 jQuery.event = { 2 global: {}, 3 //绑定事件 4 add: function( elem, types, handler, data, selector ) { 5 ... 6 special = jQuery.event.special[ type ] || {}; 7 ... 8 jQuery.event.dispatch.apply( eventHandle.elem, arguments ) 9 10 }, 11 //移除事件 12 remove: function( elem, types, handler, selector, mappedTypes ) { 13 ... 14 special = jQuery.event.special[ type ] || {}; 15 if ( rfocusMorph.test( type + jQuery.event.triggered ) ) { 16 }, 17 //手动触发事件 18 trigger: function( event, data, elem, onlyHandlers ) {}, 19 //事件分发 20 dispatch: function( event ) {}, 21 handlers: function( event, handlers ) {}, 22 props: "altKey bubbles cancelable ctrlKey currentTarget eventPhase metaKey relatedTarget shiftKey target timeStamp view which".split(" "), 23 fixHooks: {}, 24 //对键盘事件对象的属性和修正方法 25 keyHooks: {}, 26 //对鼠标事件对象的属性和修正方法 27 mouseHooks: {}, 28 //兼容性相关 29 fix: function( event ) {}, 30 //事件修正对象集 31 special: { 32 load: { 33 noBubble: true 34 }, 35 focus: { 36 trigger: function() {}, 37 delegateType: "focusin" 38 }, 39 blur: { 40 trigger: function() {}, 41 delegateType: "focusout" 42 }, 43 click: { 44 trigger: function() {}, 45 _default: function(){} 46 }, 47 beforeunload: { 48 postDispatch: function( event ) {} 49 } 50 }, 51 //模拟事件,修正事件兼容性游泳 52 simulate: function( type, elem, event, bubble ) {} 53 }
jQuery事件对象下的这三个方法是主题。其余都是修正浏览器的兼容性和为这三个方法服务的工具方法。
转载于:https://www.cnblogs.com/pfzeng/p/4158695.html
javascript事件之:jQuery事件中实例对象和拓展对象之间的通信相关推荐
- Vue中父子及非父子组件之间的通信方法
Vue中父子及非父子组件之间的通信方法 父子组件之间的通信方法 父级->子级通信 (依赖单向数据绑定+props实现) Vue.component('Father', { //注册了含有data ...
- JavaScript事件与JQuery事件
JavaScript JQuery <script> function display(){ alert("段落被点击了."); } </script& ...
- DOM事件与jQuery事件的是非纠葛
在javascript和JQuery之中,都有事件的处理方式,在我们编写程序实现某些功能的时候,我们会发现使用原生的DOM事件与JQuery中封装的事件都能实现同样的效果,那么也许我们会认为他们之间的 ...
- 53.垃圾回收算法的实现原理、启动Java垃圾回收、Java垃圾回收过程、垃圾回收中实例的终结、对象什么时候符合垃圾回收的条件、GC Scope 示例程序、GC OutOfMemoryError的示例
53.垃圾回收算法的实现原理 53.1.目录 53.2.启动Java垃圾回收 53.3.Java垃圾回收过程 53.4.垃圾回收中实例的终结 53.5.对象什么时候符合垃圾回收的条件? 53.5.1. ...
- VC中利用多线程技术实现线程之间的通信
当前流行的Windows操作系统能同时运行几个程序(独立运行的程序又称之为进程),对于同一个程序,它又可以分成若干个独立的执行流,我们称之为线程,线程提供了多任务处理的能力.用进程和线程的观点来研究软 ...
- Android中Activity、Service和线程之间的通信
Activity.Service和线程应该是Android编程中最常见的几种类了,几乎大多数应用程序都会涉及到这几个类的编程,自然而然的,也就会涉及到三者之间的相互通信,本文就试图简单地介绍一下这三者 ...
- jQuery→事件、jQuery事件对象属性方法、多事件、自定义事件
click() mousedown()mouseup() mousemove() mouseout() hover() focusin() blur()focus() change() select( ...
- html5 点击事件委托,jquery事件委托
一,.on( events [, selector ] [, data ], handler(eventObject) )// .on( events [, selector ] [, data ] ...
- python中类的属性一般来说_python中实例属性和类属性之间的关系
匿名用户 1级 2018-06-25 回答 一般来说,在Python中,类实例属性的访问规则算是比较直观的. 但是,仍然存在一些不是很直观的地方,特别是对C++和Java程序员来说,更是如此. 在这里 ...
最新文章
- 分享一个高质量的 小程序UI框架
- Cloudify — 系统架构
- TableView 隐藏多余的分割线
- Unity5x编辑器的主菜单和布局
- python基础学习[python编程从入门到实践读书笔记(连载二)]:外星人入侵项目
- try not let others think you are good enough
- Visual Studio 2005 快捷键
- etag flag setting in metadata MPC_EXT
- java aop execution_Spring AOP -- execution表达式
- Oracle10g数据库的完全卸载:
- dpkg status database is locked by another process
- Ethercat解析(四)之搭建RTAI实时内核(Ubuntu12.04)
- IDEA中Maven项目导入依赖包,出现红线波浪线
- 产品经理该如何做竞品分析
- 黑马程序员_Java高新技术
- Swing JTree用法总结
- idea代码自动格式化配置
- delphi pi怎么得到?
- 使用DreamweaverMX2004的搜索替换功能提高工作效率。
- 移植AT91Bootstrap1.15