javascript事件兼容处理以及时间冒牌捕获

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript事件兼容处理以及时间冒牌捕获相关的知识,希望对你有一定的参考价值。

/cancelBubble阻止事件冒泡

                function cancelBubble(ev){

                     var ev=ev||window.event;

                     if(ev.stopPropagation){

                        ev.stopPropagation();

                     }else{

                      ev.cancelBubble=true;

                     }

                }

                //获取样式

                function getStyle(obj,attr){

                 if(getComputedStyle){

                  getComputedStyle(obj)[attr];

                  

                  

                 }else{

                  obj.currentStyle[attr];

                  

                  

                 }

                

                

                }

                //getClassName 通过类名获取元素

                function getClassName(oclass,oparent){

                 var oparent=oparent||document;

                 var arr=[];

                 var element=oparent.getElementsByTagName('*');

                 var reg= new RegExp('\\b'+oClass+'\\b');

                 for(var i=0;i<element.length;i++){

                  if(reg.test(element.className)){

                             arr.push(element);

                  }

                 }

                 return arr;

                }

                //oEvent获取事件对象

                function oEvent(ev){

                 var ev=ev||window.event;

                 return ev;

                }

                //addEvent事件绑定

                function addEvent(obj,event,fn,bool){

                 if(obj.addEventListener){

                  obj.addEventListener(event,fn,bool);

                 }else{

                  obj.attachEvent('on'+event,function(){

                   fn.call(obj);

                  });

                 }

                }

                // removeEvent移除事件

                function removeEvent(obj,event,fu,bool){

if(obj.removeEventListener){

obj.removeEventListener(event,fu,bool);

}else{

obj.detachEvent('on'+event,function(){

fu.call(obj);

});

}

}

                //getStyle获取非行内样式

                function getStyle(obj,attr){

if(obj.currentStyle){

return obj.currentStyle[attr];

}else{

return getComputedStyle(obj)[attr];

}

}

//getScrollTop滚动条

//获取滚动条的TOP

function getScrollTop(){

var top=document.documentElement.scrollTop||document.body.scrollTop;

return top;

}

//stopDefault阻止默认时间

function stopDefault(ev){

var ev=ev||window.event;

if(ev.preventDefault){

ev.preventDefault();

}else{

ev.returnValue=false;

}

技术分享图片     }

javascript中的默认行为是指javascript中事件本身具有的属性,如<a>标签可以跳转,文本框 可输入文字、字母、图片等,右键浏览器会出现菜单等行为便被称为浏览器的默认行为。

技术分享图片 阻止默认行为(兼容)

阻止右键菜单

document.oncontextmenu = function(){

alert("右键被按下");

return false;

}

ev.preventDefault(); //非IE

ev.returnValue = false;   //IE

技术分享图片 事件监听器(兼容)

target.addEventListener("click", fun, false); --标准浏览器

target.attachEvent("onclick",fun); --IE浏览器(执行顺序按照绑定的反序)

removeEventListene()/detachEvent() 移除事件绑定的参数和添加事件绑定是一致的。

事件流描述的是从页面中接收事件的顺序。

可以绑定多个函数在一个对象上。

执行顺序按照绑定的顺序来(IE反向)。

第三个参数是否使用捕捉(反向冒泡),默认false,为冒泡。

技术分享图片 事件捕获

从父元素向子元素,直至触发事件元素


以上是关于javascript事件兼容处理以及时间冒牌捕获的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript — event介绍以及兼容处理

事件绑定,事件捕获,事件冒泡以及事件委托,兼容IE

JS中的事件绑定,事件捕获,事件冒泡以及事件委托,兼容IE

JavaScript中的事件

JavaScript中的Event事件对象详解

javaScript绑定事件委托 demo