博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery学习-事件之绑定事件(四)
阅读量:4654 次
发布时间:2019-06-09

本文共 2691 字,大约阅读时间需要 8 分钟。

今天我们来学习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

你可能感兴趣的文章
ES6深入学习记录(一)class方法相关
查看>>
C语言对mysql数据库的操作
查看>>
INNO SETUP 获得命令行参数
查看>>
HTML5与CSS3权威指南之CSS3学习记录
查看>>
docker安装部署
查看>>
AVL树、splay树(伸展树)和红黑树比较
查看>>
多媒体音量条显示异常跳动
查看>>
运算符及题目(2017.1.8)
查看>>
React接入Sentry.js
查看>>
ssh自动分发密匙脚本样板
查看>>
转 小辉_Ray CORS(跨域资源共享)
查看>>
Linux安装postgresql
查看>>
MyBatis启动:MapperStatement创建
查看>>
【 全干货 】5 分钟带你看懂 Docker !
查看>>
[转]优化Flash性能
查看>>
popStar手机游戏机机对战程序
查看>>
lambda表达式树
查看>>
二次注入原理及防御
查看>>
会话记住已登录功能
查看>>
Linux内核分析——可执行程序的装载
查看>>