1. 程式人生 > >javascript事件兼容處理以及時間冒牌、捕獲

javascript事件兼容處理以及時間冒牌、捕獲

js兼容

/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

技術分享圖片 事件監聽器(兼容)

n target.addEventListener("click", fun, false); --標準瀏覽器

n target.attachEvent("onclick",fun); --IE瀏覽器(執行順序按照綁定的反序)

n removeEventListene()/detachEvent() 移除事件綁定的參數和添加事件綁定是一致的。

事件流描述的是從頁面中接收事件的順序。

n 可以綁定多個函數在一個對象上。

n 執行順序按照綁定的順序來(IE反向)。

n 第三個參數是否使用捕捉(反向冒泡),默認false,為冒泡。

技術分享圖片 事件捕獲

n 從父元素向子元素,直至觸發事件元素


javascript事件兼容處理以及時間冒牌、捕獲