我们总结过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事件中实例对象和拓展对象之间的通信相关推荐

  1. Vue中父子及非父子组件之间的通信方法

    Vue中父子及非父子组件之间的通信方法 父子组件之间的通信方法 父级->子级通信 (依赖单向数据绑定+props实现) Vue.component('Father', { //注册了含有data ...

  2. JavaScript事件与JQuery事件

    JavaScript JQuery <script> function display(){    alert("段落被点击了.");   } </script& ...

  3. DOM事件与jQuery事件的是非纠葛

    在javascript和JQuery之中,都有事件的处理方式,在我们编写程序实现某些功能的时候,我们会发现使用原生的DOM事件与JQuery中封装的事件都能实现同样的效果,那么也许我们会认为他们之间的 ...

  4. 53.垃圾回收算法的实现原理、启动Java垃圾回收、Java垃圾回收过程、垃圾回收中实例的终结、对象什么时候符合垃圾回收的条件、GC Scope 示例程序、GC OutOfMemoryError的示例

    53.垃圾回收算法的实现原理 53.1.目录 53.2.启动Java垃圾回收 53.3.Java垃圾回收过程 53.4.垃圾回收中实例的终结 53.5.对象什么时候符合垃圾回收的条件? 53.5.1. ...

  5. VC中利用多线程技术实现线程之间的通信

    当前流行的Windows操作系统能同时运行几个程序(独立运行的程序又称之为进程),对于同一个程序,它又可以分成若干个独立的执行流,我们称之为线程,线程提供了多任务处理的能力.用进程和线程的观点来研究软 ...

  6. Android中Activity、Service和线程之间的通信

    Activity.Service和线程应该是Android编程中最常见的几种类了,几乎大多数应用程序都会涉及到这几个类的编程,自然而然的,也就会涉及到三者之间的相互通信,本文就试图简单地介绍一下这三者 ...

  7. jQuery→事件、jQuery事件对象属性方法、多事件、自定义事件

    click() mousedown()mouseup() mousemove() mouseout() hover() focusin() blur()focus() change() select( ...

  8. html5 点击事件委托,jquery事件委托

    一,.on( events [, selector ] [, data ], handler(eventObject) )// .on( events [, selector ] [, data ] ...

  9. python中类的属性一般来说_python中实例属性和类属性之间的关系

    匿名用户 1级 2018-06-25 回答 一般来说,在Python中,类实例属性的访问规则算是比较直观的. 但是,仍然存在一些不是很直观的地方,特别是对C++和Java程序员来说,更是如此. 在这里 ...

最新文章

  1. 分享一个高质量的 小程序UI框架
  2. Cloudify — 系统架构
  3. TableView 隐藏多余的分割线
  4. Unity5x编辑器的主菜单和布局
  5. python基础学习[python编程从入门到实践读书笔记(连载二)]:外星人入侵项目
  6. try not let others think you are good enough
  7. Visual Studio 2005 快捷键
  8. etag flag setting in metadata MPC_EXT
  9. java aop execution_Spring AOP -- execution表达式
  10. Oracle10g数据库的完全卸载:
  11. dpkg status database is locked by another process
  12. Ethercat解析(四)之搭建RTAI实时内核(Ubuntu12.04)
  13. IDEA中Maven项目导入依赖包,出现红线波浪线
  14. 产品经理该如何做竞品分析
  15. 黑马程序员_Java高新技术
  16. Swing JTree用法总结
  17. idea代码自动格式化配置
  18. delphi pi怎么得到?
  19. 使用DreamweaverMX2004的搜索替换功能提高工作效率。
  20. 移植AT91Bootstrap1.15

热门文章

  1. 使用数据增强技术提升模型泛化能力
  2. IDEA 学习笔记之 安装和基本配置
  3. SVN四部曲之SVN设置详解深入
  4. bzoj2751[HAOI2012]容易题(easy)
  5. redhat配置centos的yum源
  6. CentOS6最小化安装默认启动的服务说明
  7. java-developer 性能是怎么样的?
  8. Silverlight 2 应用程序部署到任意HTML页面
  9. 反射学习系列3-反射实例应用
  10. php 修改上传文件大小 (max_execution_time post_max_size)