原生JavaScript常用工具函数：事件监听、样式设置与类名操作

添加事件监听

一、添加事件监听

addHandler: function(node, type, fn) { if (node.addEventListener) {
node.addEventListener(type, fn, false); // 第三个参数为false，表示采用冒泡模式
            }
} else {
node.attachEvent('on' + type, function() {
fn.apply(node, arguments); // 在attachEvent方法中，this不指向node，因此需使用apply()改变上下文
                });
            }
     }

设置元素样式

二、设置元素样式

setCss: function(node, val) { // val格式如：{'top':'2px','font-size':'12px'}
for (var v in val) {
node.style.cssText += ';' + v + ':' + val[v]; // 使用cssText可同时设置多个属性，且无需判断cssFloat或styleFloat
            }
        }

获取CSS类名元素

三、获取带有指定CSS类名的元素

// parent参数为可选，用于限定搜索范围
getByClassName: function(className, parent) {
var elem = [],
node = (parent != undefined && parent.nodeType == 1) ? parent.getElementsByTagName('*') : document.getElementsByTagName('*'),
p = new RegExp('(^|\\s)' + className + '(\\s|$)');
for (var n = 0, i = node.length; n < i; n++) {
if (p.test(node[n].className)) {
elem.push(node[n]);
                }
            }
return elem;
        }

删除CSS类名

四、删除CSS类名

removeClassName: function(node, className) {
var par = new RegExp(className, 'g');
node.className = node.className.replace(par, '');
}

以上四个函数是本人整理的非常实用且高频使用的原生JavaScript工具函数，分享给各位开发者，希望能对大家有所帮助。