对Class的处理
//增加类名
addClass : function(obj,classname){
if(obj.className == ''){
obj.className = classname;
}else{
var arrClassName = obj.classname.split(' ');
if(arrIndexOf(arrClassName , classname) == -1){
obj.className += ' ' +classname;
}
}
}
//移除类
removeClass: function(obj, classname){
if(obj.classname !== ''){
var arrClassName = obj.className.split(' ');
if(arrIndexOf(arrClassName , classname) != -1){
arrClassName.splice(arrIndexOf(arrClassName, classname) , 1);
obj.className = arrClassName.join(' ');
}
}
}
//判断要添加的类名是否已经存在
arrIndexOf: function(arr,v){
for(var i = 0; i<arr.length;i++){
if(arr[i] == v){ return i;}
}
return -1;
}
placeholder兼容函数
var obj = document.getElementById('input');
obj.onfocus = function(){
if(this.value == '请输入内容'){
this.value ='';
}
}
obj.onblur = function(){
if(this.value == ''){
this.value = '请输入内容' ;
}
}
对事件的处理
var evet_fn = {
//事件绑定
bind:function(obj,evname,fn){
if(obj.addEventListener){
obj.addEventListener(evname,fn,false);
}else{
obj.attachEvent('on'+evname,function(){
fn.call(obj);
//调用call方法,在IE下将this从指向window改为指向当前对象
}
)}
}
//事件解绑
removeBind : function(obj,evname,fn,b1){
if(obj.removeEventListener){
obj.removeEventListener(evname,fn,b1);
}else{ obj.detachEvent('on'+evname,fn,function(){ fn.call(obj); })
}
}
//页面加载完成
readyEvent:function(fn){
if(fn == null){ fn = document; }
var oldOnload = window.onload;
if(typeof window.onload !== ‘function’){
window.onload = fn;
}else{
windwo.onload = function(){
oldOnload();
fn();
}
}
}
//添加事件
addHandler : function(element, type, handler){
if(element.addEventListener){ //DOM2级
//事件类型,需要执行额函数 是否捕捉 element.addEventListerner(type,handler,false);
}else if(element.attachEvent){ //是否为IE级
element.attachEvent('on' + type, handler);
}else{ //检查是否为DOM0级的方法
element['on' + type] = handler;
}
}
//移除事件
removeHandler: function(element,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}else if( element.detachEvent){
element.detachEvent('on' + type, handler);
}else{
element["on" + type] =null;
}
}
// 获取事件及事件对象
getEvent : function(event){
return event ? event : window.event;
}
//获取事件对象目标的写法
getTarget :function(event){
return event.target || event.srcElement;
}
//阻止浏览器默认事件
preventDefault: function(event){
if(event.preventDefault){
event.preventDefault(); //W3C标准
}else{
event.returnValue = false; //IE
}
}
//组织事件冒泡的兼容写法
stopPropagation: function(event){
if(event.stopPropagation){
event.stopProgation();
}else{
event.cancelBubble = true;
}
}
//获取事件(在mouseover和mouseout事件监测中)
getRelatedTarget: function(event){
if(event.relatedTarget){
return event.relatedTarget;
}else if(event.toElement){
return event.toElement;
}else if(event.fromElement){
return event.fromElement;
}else{
return null;
}
}
//获取event对象的引用,取到事件的所有信息,确保随时能使用event;
getEvent:function (event) {
var event = event || window.event;
if (!event) {
var c = this.getEvent.caller;
while(!c){
event = c.arguments[0];
if (event && Event == ev.constructor) {
break;
};
c = c.caller;
}
};
return event;
}
}
鼠标滚轮判断
类似于
mousedown
和mouseup
事件,event对象存在一个button属性
DOM的button属性:
- 0 表示主鼠标按钮 即左键
- 1 表示中间鼠标; 即中间滚轮
- 2 表示次鼠标按钮 即右键
IE8及之前版本button属性
- 0 没有按下按钮
- 1 按下了主鼠标按钮
- 2 按下了次鼠标按钮
- 3 同时按下了主、次鼠标按钮
- 4 按下了中间的鼠标按钮
- 5 同时按下了主鼠标和中间的鼠标按钮
- 6 同时按下了次鼠标和中间的鼠标按钮
- 7 同时按下了三个鼠标按钮
getButton : function(event){
if(document.implementation.hasFeature("MouseEvents" , "2.0")){
return event.button;
}else{
switch(event.button){
case 0: return -1; //指没有按下任何按钮
case 1:
case 3:
case 5:
case 7: return 0;
case 2:
case 6: return 2;
case 4: return 1;
}
}
}
鼠标滚轮增量值 delta
getWheelDelta: function(){
if(event.wheelDelta){
return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta) ;
}else{
return -event.detail * 40; //firefox中的值为+3表示向上滚,-3表示向下滚
}
}
跨浏览器的方式取得字符编码
getCharCode:function(event){
if(typeof event.chartCode == "number"){
return event.chartCode;
}else{
return event.keyCode;
}
}
访问剪贴板的数据
getClipboardText :function(event){
var clipboardData = (event.clipboardData || window.clipboardData);
return clipboardData.getData('text');
}
设置剪贴板中的数据
setClipboardText :function(event,value){
if(event.clipboardData){
retrun event.clipboardData.setData('text/plain',value);
}else if(window.clipboardData){
return window.clipboardData.setData('text',value);
}
}