zoukankan      html  css  js  c++  java
  • 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事件对象下的这三个方法是主题。其余都是修正浏览器的兼容性和为这三个方法服务的工具方法。

  • 相关阅读:
    第01组 Beta版本演示
    2019 SDN上机第7次作业
    第01组 Beta冲刺(4/4)
    系统综合实践第6次作业
    系统综合实践第5次作业
    系统综合实践第4次作业
    系统综合实践第3次作业
    系统综合实践第2次作业
    系统综合实践第1次作业
    软工实践个人总结
  • 原文地址:https://www.cnblogs.com/pfzeng/p/4158695.html
Copyright © 2011-2022 走看看