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

HTML5学堂：最近讲师团队在学习JS类库的知识，因此就跟大家一起共享一下类库的搭建吧。今天要讲解的功能是：获取渲染后样式以及事件兼容处理。渲染后样式修正了通过style属性获取样式的不足，而事件兼容问题主要考虑了this的指向修正。

获取完成（渲染后）样式

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

对于document.defaultView.getComputedStyle()，其实等价于window.getComputedStyle()。其原因在于getComputedStyle本身就存在window对象之中。根据DennisHall的说法，使用defaultView可能一是人们不太乐意在window上专门写个东西，二是让API在Java中也可用。但是在以前3.6版本的火狐浏览器当中，对于获取frame框架样式则仅仅支持document.defaultView的获取方式。不过对于现在，我们完全可以不考虑，原因很简单，从HTML5出现之后，frame以及frameset等标签均被从推荐标准中删除了。当然还有一个原因，就是没有人再去用3.6版本的火狐了~

关于document.defaultView.getComputedStyle()方法的兼容问题：IE6~8不予以支持，需要注意~！

关于第二个参数的兼容问题：IE以及Opera均不支持（因此，我们大可不必书写第二个参数，可以写null，也可以直接省略）

具体支持程度请看下图：

1. /*
2.  * 功能:兼容不同浏览器，获取渲染后样式
3.  * 参数:需要传递元素以及需要获取的当前元素样式属性
4.  * author: 独行冰海 - 利利 - HTML5学堂
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, null)[proName];
14.     }
15.     return eleStyle;
16. }

欢迎沟通交流~HTML5学堂

事件的兼容问题

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

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

1. /*
2.  *
3.  * 移除事件监听器 removeEvent(con, 'click', functionName);
4.  * author: 独行冰海 - 利利 - HTML5学堂
5.  */
6. function removeEvent(obj, eventName, fn){
7.     if (obj.removeEventListener) {
8.         obj.removeEventListener(eventName, fn, false);
9.     } else {
10.         obj.detachEvent('on' + eventName, function(){
11.             // 修正this指向的问题 由于移除后没有事件，因此无需修正this
12.             return fn;
13.         });
14.     }
15. }

结束~~~

欢迎沟通交流~HTML5学堂