zoukankan      html  css  js  c++  java
  • 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方法主要是对兼容性做了处理看注释应该就明白了!

  • 相关阅读:
    Apache Ant自动化脚本
    使用Mybatis Generator结合Ant脚本快速自动生成Model、Mapper等文件的方法
    Maven Pom文件标签详解
    JAVA正则表达式语法大全
    RSA加密算法--Java实现详细案例:
    Java加密技术(一)——BASE64与单向加密算法MD5&SHA&MAC
    Base64算法的使用
    ElasticSearch使用IK中文分词---安装步骤记录
    ElasticSearch Java api 详解_V1.0
    HBase入门
  • 原文地址:https://www.cnblogs.com/urols-jiang/p/4322034.html
Copyright © 2011-2022 走看看