【代码片-1】 jQuery源码学习（版本1.11）-事件处理-实例函数

来源：互联网发布：手机fq软件编辑：程序博客网时间：2024/06/07 03:52
作者：wfbob-----感谢作者！！
标签：事件处理 jquery 实例函数事件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<pre name="code"class="javascript">// 实例对象的事件处理方法
jQuery.fn.extend({
 
    // 绑定事件方法on（参数one仅限是内部使用，JQ实例对象需要的话可以直接调用后面的one方法）
    on: function( types, selector, data, fn, /*INTERNAL*/one ) {
        var type, origFn;
 
        // 支持types传入一个map，里面保存types/handlers的场景
        if( typeof types === "object") {
            // selector不为string的场景( types-Object, selector, data )
            if( typeof selector !== "string") {
                // 重定义data，假设data为空，则data = selector，( types-Object, data )
                data = data || selector;
                // 置空selector
                selector = undefined;
            }
            // 遍历对象里的事件类型，逐一调用on
            for( type in types ) {
                this.on( type, selector, data, types[ type ], one );
            }
            returnthis;
        }
 
        // data跟fn同时为空的场景
        if( data == null&& fn == null) {
            // ( types, fn )
            fn = selector;
            data = selector = undefined;
        } elseif ( fn == null) {
            if( typeof selector === "string") {
                // ( types, selector, fn )
                fn = data;
                data = undefined;
            } else{
                // ( types, data, fn )
                fn = data;
                data = selector;
                selector = undefined;
            }
        }
        if( fn === false) {
            fn = returnFalse;
        } elseif ( !fn ) {
            returnthis;
        }
 
        // 传入了one的场景
        if( one === 1) {
            // 先引用原回调
            origFn = fn;
            // 定义新回调，封装原回调
            fn = function( event ) {
                // 去除绑定
                jQuery().off( event );
                // 执行回调
                returnorigFn.apply( this, arguments );
            };
            // 从之前分析的jQuery.event代码可知，回调里面保存guid，删除的时候用于会判断，这样才知道解除绑定的是不是同一个回调函数
            fn.guid = origFn.guid || ( origFn.guid = jQuery.guid++ );
        }
         
        // 以上各种选择判断分支，均是对不同入参场景进行分类处理
        // 最终还是调用each方法，对JQ对象里的每一个元素，执行jQuery.event.add增加绑定事件
        returnthis.each( function() {
            jQuery.event.add( this, types, fn, data, selector );
        });
    },
    // one方法，表明事件回调只处理一次
    one: function( types, selector, data, fn ) {
        returnthis.on( types, selector, data, fn, 1);
    },
    // 解除事件绑定off
    off: function( types, selector, fn ) {
        var handleObj, type;
        if( types && types.preventDefault && types.handleObj ) {
            // ( event )  dispatched jQuery.Event
            handleObj = types.handleObj;
            jQuery( types.delegateTarget ).off(
                handleObj.namespace ? handleObj.origType + "."+ handleObj.namespace : handleObj.origType,
                handleObj.selector,
                handleObj.handler
            );
            returnthis;
        }
        if( typeof types === "object") {
            // ( types-object [, selector] )
            for( type in types ) {
                this.off( type, selector, types[ type ] );
            }
            returnthis;
        }
        if( selector === false|| typeof selector === "function") {
            // ( types [, fn] )
            fn = selector;
            selector = undefined;
        }
        if( fn === false) {
            fn = returnFalse;
        }
         
        // 前面也是兼容各种入参的场景
        // 最终同样是使用each对JQ对象每个元素调用jQuery.event.remove解除绑定
        returnthis.each(function() {
            jQuery.event.remove( this, types, fn, selector );
        });
    },
 
    // 触发事件方法trigger
    trigger: function( type, data ) {
        // 直接使用each方法调用jQuery.event.trigger
        returnthis.each(function() {
            jQuery.event.trigger( type, data, this);
        });
    },
    // 会影响到前面event.isTrigger的值，用途暂时不明
    triggerHandler: function( type, data ) {
        var elem = this[0];
        if( elem ) {
            returnjQuery.event.trigger( type, data, elem, true);
        }
    }
});</pre>
阅读全文
0 0