南大软院大神养成计划——第十一天

浅浅的花香味﹌ 2022-08-17 14:23 116阅读 0赞

今天是南大软院大神养成计划的第十一天，最近学习速度有点慢，主要是因为还参加了数学建模的比赛，所以不得不先把主要精力投入到数学建模比赛中，所以最近的博客都有点小水了。

今天学习的主要内容还是DOM事件探秘里的内容，感觉这部分的内容好多了，尤其是第四章的内容，加起来大约有100分钟了吧，所以准备明天看，今天就学习了一章的内容，今天主要学习了第三章——事件对象。

首先说说什么是事件对象，在触发dom对象的时候都会产生一个事件对象，这事件对象包含所有跟事件有关的信息，包括导致事件的元素，事件的类型还有跟事件特定的信息，比如键盘触发的事件对象会保存键盘输入的是什么键，比如a，b等，而鼠标则是移动或者点击等，这些都是通过事件对象event获取的。

先说说DOM中的事件对象，dom事件对象包含

(1)、type:获取事件类型  
(2)、target：事件目标  
(3)、stopPropagation() 阻止事件冒泡  
(4)、preventDefault() 阻止事件的默认行为

IE的事件对象和DOM事件对象有点不一样，所以我们在编写事件对象的时候为了考虑兼容性要自己封装一个函数，用于获取事件对象里的信息。

IE中的事件对象  
(1)、type:获取事件类型  
(2)、srcElement：事件目标  
(3)、cancelBubble=true阻止事件冒泡  
(4)、returnValue=false阻止事件的默认行为

然后我们看一下兼容性的代码是怎么样的？

var eventUtil=\{  
         // 添加句柄  
         addHandler:function(element,type,handler)\{  
               if(element.addEventListener)\{  
                 element.addEventListener(type,handler,false);  
               \}else if(element.attachEvent)\{  
                 element.attachEvent('on'+type,handler);  
               \}else\{  
                 element\['on'+type\]=handler;  
               \}  
         \},  
         // 删除句柄  
         removeHandler:function(element,type,handler)\{  
               if(element.removeEventListener)\{  
                 element.removeEventListener(type,handler,false);  
               \}else if(element.detachEvent)\{  
                 element.detachEvent('on'+type,handler);  
               \}else\{  
                 element\['on'+type\]=null;  
               \}  
         \},  
          getEvent:function(event)\{  
            return event?event:window.event;  
          \},//在一些低版本浏览器，不支持直接调用event，所以我们要判断浏览器是否支持event，不支持我们就用window.event  
          getType:function(event)\{  
            return event.type;  
          \},  
          getElement:function(event)\{  
            return event.target || event.srcElement;  
          \},  
          preventDefault:function(event)\{  
            if(event.preventDefault)\{  
              event.preventDefault();  
            \}else\{  
              event.returnValue=false;  
            \}  
          \},  
         stopPropagation:function(event)\{  
           if(event.stopPropagation)\{  
             event.stopPropagation();  
           \}else\{  
             event.cancelBubble=true;  
           \}  
         \}  
  \}

这就是今天学习的内容，今天实在是太忙了，期待明天的学习.

发表评论取消回复

表情：

评论列表（有 0 条评论，116人围观）

还没有评论，来说两句吧...

相关阅读

相关南大软院大神养成计划——第二十天

今天是南大软院大神养成计划的第二十天，离结束只有一天的时间了。今天学习的jQuery基础的最后一个部分——工具类函数。什么是工具类函数呢？工具函数是指在jQuery对象(即

╰+攻爆jí腚メ/ 2022年08月18日 02:19/ 0 赞/ 154 阅读

相关南大软院大神养成计划——第十八天

今天是南大软院大神养成计划实施的第十八天。今天还是继续学习jQuery基础部分——常用插件部分，当我们能够灵活运用jQuery的各种插件时，我们的网页代码将能够简化大量的代码，

╰半橙微兮°/ 2022年08月18日 01:59/ 0 赞/ 154 阅读

相关南大软院大神养成计划——第十七天

今天是南大软院大神养成计划实施的第十七天，今天学习的还是jQuery基础一.jQuery事件与运用页面加载时触发ready()事件 ready()事件类似于onLo

超、凢脫俗/ 2022年08月18日 00:59/ 0 赞/ 167 阅读

相关南大软院大神养成计划——第十六天

今天是南大软院大神养成计划实施的第十六天，今天继续学习jQuery基础。一.过滤性选择器该类型的选择器是根据某过滤规则进行元素的匹配，书写时以“：”号开头,通常用于查找

叁歲伎倆/ 2022年08月18日 00:43/ 0 赞/ 151 阅读

相关南大软院大神养成计划——第十五天

今天是南大软院大神养成计划的第十五天，离比赛的日子越来越近了。今天学习的主要内容是jquery基础。什么是JQuery呢？ jQuery是一套跨浏览器的JavaScrip

曾经终败给现在/ 2022年08月18日 00:40/ 0 赞/ 121 阅读

相关南大软院大神养成计划——第十四天

今天是南大软院大神养成计划实施的第十四天，离结束越来越近了，我也要加紧学习了。今天学习的主要内容是jS动画剩下的部分——链式运动和同时运动和一些动画案例。链式运动：什么

女爷i/ 2022年08月17日 15:23/ 0 赞/ 117 阅读

相关南大软院大神养成计划——第十三天

今天是南大软院大神养成计划实施的第十三天，今天学习的主要内容是JS动画效果。在浏览网页时候，我们经常会看到一些动画，有一些是flash动画，有一些则是用js编写的js动画，

ゞ浴缸里的玫瑰/ 2022年08月17日 15:17/ 0 赞/ 121 阅读

相关南大软院大神养成计划——第十二天

今天是南大软院大神养成计划实施的第十二天，今天学习的内容是DOM事件探秘部分的最后部分——事件类型。事件类型从来大类来分可以分为鼠标事件和键盘事件。先说说鼠标事件，鼠标事件

Myth丶恋晨/ 2022年08月17日 14:27/ 0 赞/ 121 阅读

相关南大软院大神养成计划——第十一天

今天是南大软院大神养成计划的第十一天，最近学习速度有点慢，主要是因为还参加了数学建模的比赛，所以不得不先把主要精力投入到数学建模比赛中，所以最近的博客都有点小水了。今天学习

浅浅的花香味﹌/ 2022年08月17日 14:23/ 0 赞/ 117 阅读

相关南大软院大神养成计划——第十天

今天是南大软院大神养成计划实施的第十天。今天主要学习了“DOM事件探秘”。首先说说第一章“事件流”，那什么是事件流呢？事件流就是描述描述从页面中接受事件的顺序，在浏览器中，

青旅半醒/ 2022年08月17日 14:14/ 0 赞/ 211 阅读