jQuery学习-事件之绑定事件(四)

今天我们来学习jQuery.Event对象。jQuery为了添加自己的处理机制,及可以传递用户自定义数据,于是Event对象就出世了。

  1 jQuery.Event = function( src, props ) {
  2     //instanceof 用于判断一个变量是否某个对象的实例
  3     if ( !(this instanceof jQuery.Event) ) {
  4         return new jQuery.Event( src, props );
  5     }
  6 
  7     // Event object
  8     if ( src && src.type ) {
  9         /*
 10          如果是event对象
 11          * */
 12         this.originalEvent = src;//将原生的event对象存于Event中
 13         this.type = src.type;//事件类型
 14 
 15         // Events bubbling up the document may have been marked as prevented
 16         // by a handler lower down the tree; reflect the correct value.
 17         /*
 18          修正isDefaultPrevented方法
 19          * */
 20         this.isDefaultPrevented = src.defaultPrevented ||
 21                 src.defaultPrevented === undefined &&
 22                 // Support: IE < 9, Android < 4.0
 23                 src.returnValue === false ?
 24             returnTrue :
 25             returnFalse;
 26 
 27     // Event type
 28     } else {
 29         //如果event是事件名称
 30         this.type = src;
 31     }
 32 
 33     // Put explicitly provided properties onto the event object
 34     //添加自定义属性
 35     if ( props ) {
 36         jQuery.extend( this, props );
 37     }
 38 
 39     // Create a timestamp if incoming event doesn't have one
 40     this.timeStamp = src && src.timeStamp || jQuery.now();//添加时间戳
 41 
 42     // Mark it as fixed
 43     this[ jQuery.expando ] = true;//标识event已被处理过
 44 };
 45 
 46 jQuery.Event.prototype = {
 47     isDefaultPrevented: returnFalse,
 48     isPropagationStopped: returnFalse,
 49     isImmediatePropagationStopped: returnFalse,
 50 
 51     preventDefault: function() {
 52         /*
 53          修正【阻止默认事件】
 54          * */
 55         var e = this.originalEvent;//取出原生evnet
 56 
 57         this.isDefaultPrevented = returnTrue;
 58         if ( !e ) {
 59             return;
 60         }
 61 
 62         // If preventDefault exists, run it on the original event
 63         if ( e.preventDefault ) {
 64             e.preventDefault();
 65 
 66         // Support: IE
 67         // Otherwise set the returnValue property of the original event to false
 68         } else {
 69             e.returnValue = false;
 70         }
 71     },
 72     stopPropagation: function() {
 73         /*
 74          修正【停止冒泡】
 75          * */
 76         var e = this.originalEvent;//取出原生evnet
 77 
 78         this.isPropagationStopped = returnTrue;
 79         if ( !e ) {
 80             return;
 81         }
 82         // If stopPropagation exists, run it on the original event
 83         if ( e.stopPropagation ) {
 84             e.stopPropagation();
 85         }
 86 
 87         // Support: IE
 88         // Set the cancelBubble property of the original event to true
 89         e.cancelBubble = true;
 90     },
 91     stopImmediatePropagation: function() {
 92         /*
 93          修正【stopImmdiatePropagation】
 94          stopImmediatePropagation 的功能比stopPropagation 多一些,
 95          除了可以阻止事件冒泡之外,还可以把这个元素绑定的同类型事件也阻止了。
 96          * */
 97         var e = this.originalEvent;
 98 
 99         this.isImmediatePropagationStopped = returnTrue;
100 
101         if ( e && e.stopImmediatePropagation ) {
102             e.stopImmediatePropagation();
103         }
104 
105         this.stopPropagation();
106     }

107 }; 

Event方法主要是对兼容性做了处理看注释应该就明白了!

原文地址:https://www.cnblogs.com/urols-jiang/p/4322034.html