注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

梦幻雪冰

技在手,能在身,思在脑,从容过生活——陈能堡

 
 
 

日志

 
 

【转载】HTML5-类库系列 事件与获取完成版样式  

2015-03-27 17:43:52|  分类: JS原生框架 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

HTML5-类库系列 事件与获取完成版样式

前一篇博文当中我们书写了“DOM操作方面的类库功能搭建”。这次我们主要讲解如何获取完成版样式,也会就事件的兼容处理进行讲解。

获取完成(渲染后)样式

在IE下,对于获取渲染后的样式,使用currentStyle进行获取,而对于FF,使用的是getComputedStyle方法进行获取。两者的语法并不相同。元素.currentStyle[属性],也可以用点语法进行书写;而getComputedStyle采用的则是document.defaultView.getComputedStyle(元素)[属性]的方式,因此在这里我们需要创建一个函数用于兼容不同浏览器,实现渲染后样式的获取。

  1. /*
  2. * 功能:兼容不同浏览器,获取渲染后样式
  3. * 参数:需要传递元素以及需要获取的当前元素样式属性
  4. * author: 独行冰海 - 利利
  5. * 调用范例: getStyle(con, 'height');
  6. */
  7. function getStyle(element, proName){
  8.     
  9.     var eleStyle;
  10.     if(!document.defaultView){
  11.         eleStyle = element.currentStyle[proName];
  12.     } else {
  13.         eleStyle = document.defaultView.getComputedStyle(element)[proName];
  14.     }
  15.     return eleStyle;
  16. }

事件的兼容问题

在DOM2级当中,提出了事件绑定的新方法-事件侦听器-addEventListener和attachEvent,可是,由于浏览器在事件流的支持程度问题,导致了事件上的兼容问题。在此前的博文当中其实已经总结过DOM2级中存在的兼容问题以及处理办法,这次再次拿出事件绑定和事件移除两种功能来说,并非老调重弹,而是要在之前的代码基础上更进一步~哪一步呢?我们都知道addEventListener和attachEvent两种方法的主要区别是,前者传递的是3个参数,而后者传递的是两个参数,前者第一个参数使用的是事件的名字(click),而后者采用的是事件的绑定(onclick),前者支持事件冒泡和事件捕获,而后者仅仅支持事件冒泡,因此也就省略了最后一个参数。

这些区别都是我们曾经思考过的,然而一直没有去思考的是他们另一点区别,同样是事件绑定,但是功能函数中的this指向是不相同的,从代码构建的角度来说,应当进行合理的修正,因此我们今天的“再进一步”,就是要修正this指向。不多说了,上代码:

  1. /*
  2. *
  3. * 事件监听器 addEvent(con, 'click', functionName);
  4. *
  5. */
  6. function addEvent(obj, eventName, fn){
  7.     if (obj.addEventListener) {
  8.         obj.addEventListener(eventName, fn, false);
  9.     } else {
  10.         obj.attachEvent('on' + eventName, function(){
  11.             // 修正this指向的问题
  12.             fn.call(obj);
  13.             return fn;
  14.         });
  15.     }
  16. }
  17. /*
  18. *
  19. * 移除事件监听器 removeEvent(con, 'click', functionName);
  20. *
  21. */
  22. function removeEvent(obj, eventName, fn){
  23.     if (obj.removeEventListener) {
  24.         obj.removeEventListener(eventName, fn, false);
  25.     } else {
  26.         obj.detachEvent('on' + eventName, function(){
  27.             // 修正this指向的问题 由于移除后没有事件,因此无需修正this
  28.             return fn;
  29.         });
  30.     }
  31. }

结束~!

关于事件方面以及获取完成版样式的类库构建,我们今天就讲到这里~今天也算是把类库的第一个系列书写完成了,这个类库主要包含了DOM、事件、类名处理、样式控制等基本功能~之后会进行整理,大概在5~6月份会对类库进行更进一步的讲解,敬请期待!

 

欢迎大家互相学习交流。独行冰海

  评论这张
 
阅读(13)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017