Javascript 跨浏览器事件

原创 2013年12月02日 10:35:40

前一段时间的javascript中的一些东西忘的差不多了,回顾了些许,发现有些东西很有价值需要记录,主要就是关于css和跨浏览器(IE)的问题。
Dom操作css
没什么新奇的,有两个地方需要特别说明,行内的css和外部或者内部css样式修改区别。
外部或者内部样式表只能获得查看,不能修改。能修改的只是行内样式表,意思是如果要修改css,那也只是改变的行内样式表。
获取行内样式,修改。
document.getElementById("btn").onclick=function(){
var div = document.getElementById("div");
div.style.height="300px";
div.style.width="200px";
}
直接拿到相应的元素直接 .style.属性 就能直接拿到属性了


获取内部或外部样式表


if(document.defaultView){ //非 IE 
var style = document.defaultView.getComputerStyle(Element,attr);
  return style;
}else if(div.currentStyle){ //IE
  return currentStyle;
}


Element是要被获取样式表的元素,attr是其属性。
非IE下直接返回样式表,IE下也返回当前样式表,要查看属性的话也是直接 
(元素.currentStyle.属性) 但都不可更改。

还有就是事件,基本的就不写的。跨浏览器事件,还是比较有用的对IE用户来说。

//跨浏览器工具对象


var EventUtil = {
/*
* 给元素添加事件处理程序的方法
* element : 需要添加事件处理程序的元素
* type : 元素的事件类型
* handler : 当事件触发时调用的函数
*/
addHandler : function(element, type, handler){
  if(element.addEventListener){
    element.addEventListener(type,handler,false);
  }else if(element.attachEvent){
    element.attachEvent("on" + type, handler);
  }else{
    element["on" + type] = handler;
  }
},
/*
* 给元素删除事件处理程序的方法
* element : 需要删除事件处理程序的元素
* type : 元素的事件类型
* handler : 当事件触发时调用的函数
*/
   removeHandler : function(element, type, handler){
    if(element.removeEventListener){
      element.removeEventListener(type,handler,false);
     }else if(element.detachEvent){
      element.detachEvent("on" + type, handler);
    }
},
/*
* 获得事件对象
*/
  getEvent : function(event){
    return event ? event : window.event;
  },
/*
* 获得事件对象的目标元素
*/
  getTarget : function(event){
    return event.target ? event.target : event.srcElement
  },
/*
* 取消事件的默认行为
*/
  preventDefault : function(event){
    if(event.preventDefault){
      event.preventDefault();
    }else if(event.returnValue){
      event.returnValue = false;
    }
},
/*
* 停止事件的传播
*/
  stopPropagation : function(event){
    if(event.stopPropagation){
      event.stopPropagation();
    }else if(event.cancelBubble){
      event.cancelBubble = true;
    }
},
/*
* 获取元素某个属性的样式的值
* element : 需要获取样式的元素
* attr : 需要获取值的属性名称
*/
  getCss : function(element,attr){
    if(document.defaultView){
      var elementStyle = document.defaultView.getComputedStyle(element,null);
    return elementStyle[attr];
      }else if(element.currentStyle){
    return element.currentStyle[attr];
        }
  }
}

相关文章推荐

JavaScript跨浏览器的添加删除事件绑定函数

      最近一直在忙项目,但在做项目的过程中,发现有很多东西都不知道,尤其是博大精深的JAVASCRIPT,最近在做页面的一些效果时,由于使用的是别人已做好的框架,所以,有一些标签的代码是自动生成...
  • wankwan
  • wankwan
  • 2011年03月25日 14:56
  • 456

Javascript跨浏览器事件处理

摘自《Javascript高级程序设计》的跨浏览器事件处理代码

JavaScript 跨浏览器添加移除事件

那么我们希望解决非IE 浏览器事件绑定哪些问题呢? 1.支持同一元素的同一事件句柄可以绑定多个监听函数; 2.如果在同一元素的同一事件句柄上多次注册同一函数,那么第一次注册后的所有注册都被忽略; ...

JavaScript自定义跨浏览器事件处理工具

JavaScript自定义跨浏览器事件处理工具 自定义一个跨浏览器事件处理工具(将JS代码存到自己的一个JS文件中)。用一个JS对象来封装函数。这期博文中只写了关于添加和删除事件的成员函数。 ...

Javascript之跨浏览器的事件处理程序

这是一篇关于原生JS跨浏览器的事件处理程序,看看你会不会?

javascript原生代码—跨浏览器事件处理

--------摘自《高级程序设计》 var EventUtil = { addHandler:function(element,eventtype,handler){ if(...

JavaScript跨浏览器事件处理

事件处理程序有以下几种方式: HTML事件处理程序 DOM0事件处理程序 DOM2事件处理程序 IE事件处理程序 下面将针对不同的地方而编写一个跨浏览器事件处理程序。HTML事件处理程序最常见的是HT...

javascript阻止浏览器后退事件。

由于客户大多数是不懂电脑的大菜鸟。所以误操作比较多,有时没有选中文本框,然后不小心按了退格之后,刚刚辛苦填好的表单就什么也后退的没有了。网上查了好多资料,然后整合了一下。分享给大家。也希望酸奶姐姐来看...
  • ght521
  • ght521
  • 2013年11月21日 18:43
  • 1379

常见的原生javascript事件处理与浏览器兼容问题(上)

在WEB前端开发中,处理各浏览器差异的问题是一个重要的部分,不同的浏览器的内核及处理方式不同**(详见)**,对对象名和方法名的定义不同,导致写出来的代码不能得到我们想要的效果。所以在开发的时候需要解...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Javascript 跨浏览器事件
举报原因:
原因补充:

(最多只允许输入30个字)