添加和移除事件处理兼容各浏览器的封装(带详细注释)

//事件处理兼容各种浏览器,采用能力检测方法,所谓能力检测,就是有能力就做,没有能力就不做

 //定义一个处理事件的对象,兼容各种浏览器,dom2级事件处理和ie事件,如果这两个事件都不兼容,就采用dom0级处理
 var  eventUtil ={
       addEvent:function(element,type,handler){
            if (element.addEventListener) {
            	//非IE浏览器采用dom2级事件处理,type为事件类型如:click,handler为事件处理函数,false代表事件采用冒泡处理模型,如果是true代表 采用捕获型处理模型
            	//除了netbeans采用捕获型处理模型,其他都采用冒泡型处理模型
            	//如果是非IE浏览器添加事件为:addEventListener
            	element.addEventListener(type,handler,false);
            }else if (element.attachEvent) {
            	//如果为IE浏览器,添加事件采用 attachEvent
            	element.attachEvent('on'+type,handler);
            }else{
                element['on'+type] = handler;
            }
       },
       removeEvent:function(element,type,handler){
           if (element.removeEventListener) {
            	//非IE浏览器采用dom2级事件处理,type为事件类型如:click,handler为事件处理函数,false代表事件采用冒泡处理模型,如果是true代表 采用捕获型处理模型
            	//除了netbeans采用捕获型处理模型,其他都采用冒泡型处理模型
            	//如果是非IE浏览器添加事件为:removeEventListener
            	element.removeEventListener(type,handler,false);
            }else if (element.detachEvent) {
            	//如果为IE浏览器,添加事件采用 detachEvent
            	element.detachEvent('on'+type,handler);
            }else{
            	//dom0级事件处理,如果删除事件采用赋值null
                element['on'+type] = null;
            }
       },
       getEvent:function(event){
       	   //获取事件本身
       	  return  event?event:window.event;
       },
       getType:function(event){
       	  //获取事件类型
       	  return event.type;
       },
       getElement:function(event){
       	 //获取事件作用元素
       	  return event.target || event.srcElement;
       },
       preventDefault:function(event){
       	   //阻止默认的事件行为
           if(event.preventDefault){
           	   event.preventDefault();
           }else{
           	   event.returnValue = false;
           }
       },
       stopProPagation:function(event){
       	//停止事件冒泡
       	   if(event.stopProPagation){
               event.stopProPagation();
       	   }else{
       	   	   event.cancelBubble = true;
       	   }
       }

 }

时间: 2024-10-18 06:46:56

添加和移除事件处理兼容各浏览器的封装(带详细注释)的相关文章

移除input=number在浏览器中自带的小箭头

谷歌下:input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none !important; margin: 0; } Firefox下: input[type="number"]{-moz-appearance:textfield;}

加入收藏兼容主流浏览器代码

//加入收藏 function AddFavorite(){ if (document.all) { addToBookMark(window.location.href, document.title); } else if (window.sidebar) { addToBookMark(document.title, window.location.href); } } function addToBookMark(url,title){ var ua = navigator.userAg

javascript 兼容各个浏览器的事件

调用事件: //事件对象//什么是事件对象?在触发dom上的事件是都会产生一个事件对象event.例如鼠标点击的时候,自己就会产生比如点击的类型啊 还要那个元素发出的//dom 事件对象   type 属性用于获取事件对象, target属性 用于获取事件目标,stopPropagation()方法 阻止事件冒泡 preventDefault阻止事件的默认行为//IE中的事件对象  type 属性 用于获取事件对象, srcElement属性 用于获取事件目标 cancelBubble属性  用

浏览器兼容 各浏览器的Hack写法 [出处:W3CPLUS]

Hack是针对不同的浏览器去写不同的CSS样式,从而让各浏览器能达到一致的渲染效果,那么针对不同的浏览器写不同的CSS CODE的过程,就叫CSS HACK,同时也叫写CSS Hack.然后将Hack放在浏览器特定的CSS文件中,让其符合条件的浏览器解析这些代码,就如前面所说的条件样式,我们将CSS Hack代码放入条件样式文件中,符合条件的浏览器就解析,不符合的将不解析,从面达到您所需要的页面渲染效果.总的一句话来说使用CSS Hack将会使用你的CSS代码部分失去作用,然后借助条件样式,使用

css样式兼容不同浏览器问题解决办法

在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网站,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所有浏览器 通用 height: 100px; IE6 专用 _height: 100px; IE6 专用 *height: 100px; IE7 专用 *+height: 100px; IE7.FF 共用 height: 100px !important; 一.CSS HACK 1, !important

DOM操作 ——如何添加、移除、移动、复制、创建和查找节点等。

DOM操作 --如何添加.移除.移动.复制.创建和查找节点等. (1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() //创建一个文本节点 (2)添加.移除.替换.插入 (1)创建新节点 createDocumentFragment()    //创建一个DOM片段 createElement()   //创建一个具体的元素 createTextNode()   //创

【转】让Bootstrap 3兼容IE8浏览器

FROM : http://www.ijophy.com/2014/05/bootstrap3-compatible-with-ie8.html 最近在研究Bootstrap(官方,Github)这个优秀的前端框架,Bootstrap最开始是Twitter团队内部的一个前端框架,所谓前端框架就是一个CSS/HTML框架,框架里面有下拉菜单.按钮组.按钮下拉菜单.导航.导航条.面包屑.分页.排版.缩略图.警告对话框.进度条.媒体对象等.Bootstrap他们预先定义好,等要进行正式制作网页的时候,

让Bootstrap 3兼容IE8浏览器

http://www.ijophy.com/2014/05/bootstrap3-compatible-with-ie8.html 看到这篇文章有越来越多的人看,我决定给大家节省时间,废话少说.有几个点大家要注意. 1.本地调试需要Web Server(如IIS.Apache,Nginx),单纯地本地打开文件不能看到兼容效果. 2.如果你发现已经引用了respond.js和Bootstrap,仍无效果,请查看你的Bootstrap是否使用了CDN文件.(详情看第4点) 3.本文主要针对Boots

兼容各种浏览器的图片垂直居中CSS解决方案

1.通过添加一无语义图片来解决图片垂直居中CSS,兼容各种IE6,IE7,火狐,谷歌等浏览器. <style> .itm{border:2px solid #ccc;width:160px;height:160px;text-align:center;} .blank{width:0;height:160px;} .itm img{vertical-align:middle;} </style> <div class="itm"> <img s