两个实用的JavaScript工具函数：属性扩展与跨浏览器事件绑定

简化DOM样式设置的属性扩展函数

在实际开发中，我们经常需要直接操作DOM元素的样式，例如通过obj.style.display = "none"来隐藏元素。

当这类赋值语句增多时，代码中会出现大量重复的obj.style前缀，导致阅读和维护变得困难。

为解决这一问题，base.js中的extend函数支持以JSON格式批量赋值属性，甚至可以直接赋值函数句柄。

 
/** 
* 扩展函数
* @param target 需要扩展的对象
* @param params 要往target里放的属性和方法
*/ 
function extend(target, params) {
if (!target) {
target = {};
    } 
for (var prop in params) {
target[prop] = params[prop];
    } 
return target;
} 

跨浏览器的事件动态绑定函数

该函数的调用方式与直接赋值不同，更加简洁。

在动态创建DOM控件并需要为其增加事件时，直接使用onclick = function() {}的方式在IE等浏览器中可能无效，且无法绑定多个事件句柄。下面介绍一个通用的、支持全浏览器的事件绑定函数。

在大多数情况下，useCapture参数使用false，因此此处将其固定为false。

 
/** 
* 动态创建事件句柄
* @param control 需要扩展的对象
* @param eventName 事件名
* @param fn 函数句柄
*/ 
function addEventListener(control, eventName, fn) {
if (window.attachEvent) {
control.attachEvent('on' + eventName, fn);
} else {
control.addEventListener(eventName, fn, false);
    } 
} 

以上两个函数的使用示例可以参考我其他文章中的代码。