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

目录
（一）有关框架
（二）文件组织与代码组织
（三）JS与FLASH交互
（四）ajax局部刷新与RPC
（五）获取设置元素样式与监听元素事件
  (六）页面元素的创建调整与关联
（七）浏览器兼容性问题
（八）WEB软件的前端架构实践

获取与设置element的样式
一、class or style
      某些情况下只能设置style属性：
        1、属性值是一个变量，如动态设置宽高。
        2、为了兼容某些浏览器
      其他情况下，尽量用class，理由有：

• 做CSS的人员，可以方便更改
• class可以有一形象的名，使代码更易读
• 要加一条样式设置或者做一些兼容性的HACK，比较方便
• 业务逻辑与表现分离
• class设置和移除更加方便，style则非常麻烦

二、doc声明与浏览器兼容性
        HTML文档头部的DOC声明与不同版本的浏览器都有可能影响到你获取或者设置的样式，对于这个问题，我非常烦恼，我的策略是GOOGLE别人的做法，然后一遍遍的测试。
三、 UI widget中的做法
        在UI widget的代码里面设置和获取元素样式，有两种做法，一种是每次从元素style属性上获当前值，然后设置。第二种是，由widget对象自己维护一个变量，变化此变量时同时变化元素样式。我倾向于第二种，理由如下

• style属性值更易于被外部因素影响而被改变
• 获取更加方便，style获取到的值可能还要做进一步的处理
• 逻辑更清晰，更易于重构，如方便表现与逻辑分离、应用状态、观察者等设计模式

绑定函数到element事件的几种方式
这里讨论的是没有被封装成对象的页面元素的绑定，除非指明了是UI widget
一、绑定行为和响应函数都在页面上
        这是嵌入脚本满天飞时的做法，还经常有重复定义响应函数的行为，A TAB有一个save函数，过一会用户点击了B TAB，又有一个新的save出现，虽然也能用，但要面对这种状态，很无语。

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

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

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

评论

3 楼 matin0728 2010-04-06  

绑定函数到element事件的几种方式

应该还有另外一种方法，即使用js 直接产生节点并绑定事件，然后再附加到文档中，不一定是要获取html再使用selector来绑定，这样的效率上会高一些。

2 楼 crazy.j 2010-04-02  

currentStyle（IE） 和 defaultView（FF）
可以取得指定元素的style属性与css文件中定义的全部样式

1 楼 jessdy 2010-03-31  

等着看最后一章。