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打造跨浏览器事件处理机制:详解

由于浏览器兼容的复杂性.打造一个较优的跨浏览器事件处理函数.不是件容易的事情.各大类库也都通过了种种方案去抽象一个庞大的事件机制. 使用类库可以比较容易的解决兼容性问题.但这背后的机理又是如何呢? ...
  • kongjiea
  • kongjiea
  • 2014年10月20日 10:59
  • 1019

关于跨浏览器事件(EVENT)

                在Dom Level1中没有定义事件模型,在Dom Level2中定义了事件模型一个较小的子集,在Dom Level3(2004)中事件才被完整定义。        由...
  • lenel
  • lenel
  • 2007年07月25日 16:50
  • 2645

编写跨浏览器的javascript代码必备[js多浏览器兼容写法]

编写跨浏览器的javascript代码必备[js多浏览器兼容写法] 作者: 下面比较了几种浏览器之间的差异,在写javascript代码时 要时刻注意这些差异 序号 undefined...
  • idwenwen
  • idwenwen
  • 2016年03月08日 18:17
  • 810

跨浏览器的事件处理程序感悟

代码 火狐 .background{    height: 373px;     width: 244px;     background: url(screen-o...
  • heartAndthink
  • heartAndthink
  • 2016年10月13日 11:58
  • 210

跨浏览器本地存储-Store.js

store.js是一个跨浏览器的数据本地存储 JS 框架,可以在不依赖 cookie 和 Flash 的情况下把数据保存在客户端。store.js最大的优点就是很好地解决了一些老版本浏览器不支持htm...
  • u012558554
  • u012558554
  • 2016年04月06日 10:03
  • 403

js里跨浏览器事件监听

js中跨浏览器监听事件 function bindEvent(evt){ evt=evt||window.event; var target=evt....
  • wuzhe128520
  • wuzhe128520
  • 2016年03月19日 22:18
  • 640

JavaScript 跨浏览器添加移除事件

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

JavaScript 事件模型 事件处理机制

这篇文章对于了解Javascript的事件处理机制非常好,将它全文转载于此,以备不时之需。 什么是事件? 事件(Event)是JavaScript应用跳动的心脏 ,也是把所有东西粘在一起的...
  • chenmoquan
  • chenmoquan
  • 2013年08月21日 21:10
  • 13104

用userdata和localstorage做跨浏览器本地储存

为网站做一个搜索历史本地储存,想法是对于ie外的浏览器可以直接使用localstorage,但是对于不争气的IE,难道只能使用cookies? 然后搜到hacker news上的一篇文章。 Sto...
  • dac55300424
  • dac55300424
  • 2014年10月29日 17:47
  • 2419

session跨浏览器共享

很多文章说只要知道某个A请求sessionid,在B请求进来的时候设置 Cookie c2=new Cookie("JSESSIONID", "A请求的id"); c2.setMaxAge(100...
  • weixin_40648117
  • weixin_40648117
  • 2018年01月10日 19:38
  • 82
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Javascript 跨浏览器事件
举报原因:
原因补充:

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