javascript总结（五）获取设置元素样式与监听元素事件

[size=medium]
[u][b]目录[/b][/u]
[url=http://www.iteye.com/topic/625734]（一）有关框架[/url]
[url=http://www.iteye.com/topic/627308]（二）文件组织与代码组织[/url]
[url=http://www.iteye.com/topic/627439]（三）JS与FLASH交互[/url]
[url=http://www.iteye.com/topic/627538]（四）ajax局部刷新与RPC[/url]
（五）获取设置元素样式与监听元素事件
[url=http://www.iteye.com/topic/629165] (六）页面元素的创建调整与关联[/url]
（七）浏览器兼容性问题
（八）WEB软件的前端架构实践
[/size]
[size=large][b]获取与设置element的样式[/b][/size]
[size=medium]一、class or style[/size]
某些情况下只能设置style属性：
1、属性值是一个变量，如动态设置宽高。
2、为了兼容某些浏览器
其他情况下，尽量用class，理由有：
[list]
[*]做CSS的人员，可以方便更改
[*]class可以有一形象的名，使代码更易读
[*]要加一条样式设置或者做一些兼容性的HACK，比较方便
[*]业务逻辑与表现分离
[*]class设置和移除更加方便，style则非常麻烦
[/list]
[size=medium]二、doc声明与浏览器兼容性[/size]
HTML文档头部的DOC声明与不同版本的浏览器都有可能影响到你获取或者设置的样式，对于这个问题，我非常烦恼，我的策略是GOOGLE别人的做法，然后一遍遍的测试。
[size=medium]三、 UI widget中的做法[/size]
在UI widget的代码里面设置和获取元素样式，有两种做法，一种是每次从元素style属性上获当前值，然后设置。第二种是，由widget对象自己维护一个变量，变化此变量时同时变化元素样式。我倾向于第二种，理由如下
[list]
[*]style属性值更易于被外部因素影响而被改变
[*]获取更加方便，style获取到的值可能还要做进一步的处理
[*]逻辑更清晰，更易于重构，如方便表现与逻辑分离、应用状态、观察者等设计模式
[/list]
[size=large][b]绑定函数到element事件的几种方式[/b][/size]
这里讨论的是没有被封装成对象的页面元素的绑定，除非指明了是UI widget
[size=medium]一、绑定行为和响应函数都在页面上[/size]
这是嵌入脚本满天飞时的做法，还经常有重复定义响应函数的行为，A TAB有一个save函数，过一会用户点击了B TAB，又有一个新的save出现，虽然也能用，但要面对这种状态，很无语。

[size=medium]二、把绑定行为和响应函数都在外部脚本中[/size]
这是我改过头了的做法，我把响应函数根据业务逻辑放到不同类里面，然后把绑定也一个也不留的全部放到页面载入后或者AJAX的回调里面，但页面状态是变化的，要弄清楚当前处于什么状态，然后决定要绑哪些元素。结果是在绑定这件事情上一团乱麻。

[size=medium]三、根据不同场景来决定如何绑定[/size]
这是目前的做法，感觉还可以。做法如下：
[u][b]1、在JS方法里面绑定的情况[/b][/u]
如果它是在页面中是比较独立的一块（从结构和内容上看），比如sidebar，那么把它的逻辑独立存放于一个独立脚本的类里面，绑定行为放在初始化方法里面。在页面载入或Ajax载入完后调用初始化方法。
如果它是一个全站都要用到的UI WIDGET，比如TAB、textarea的输入提示，那么给容器一个class，在全站layout的初始化代码中和每个ajax载入页面的回调里查询到这些元素，然后调用相关的UI widget类初始化绑定和行为。目前感觉在每个ajax 回调里都要做查询绑定比较麻烦，考虑试试jQuery全局ajax设定来做这件事。
如果它是在特定页面要用到的UI WIDGET，在特定页面的初始化方法里面初始化这个UI widget。

[u][b]2、在元素事件属性上绑定的情况[/b][/u]
如果这一个局部要绑定到的行为很多，而且它可能经常刷新，此时如果每次都查询这些元素进行绑定，也比较费时费力，所以直接把绑定写在元素事件属性上。
如果绑定到元素事件响应函数的逻辑比较简单，只是一个行为，比如隐藏元素。或者顺序执行的两个行为，比如清空表单元素内容，并且重新focus。这些情况下，我是直接把JS代码写在事件属性上。但这里有一个前提是，这些代码很短，不影响到维护与阅读。
非同于上面的情况，且响应函数逻辑有点复杂，此时把响应函数写在相关业务的类里面，然后绑定还是写在事件属性上。