javascript 跨浏览器的一些小技能

2012-11-05

javascript 跨浏览器的一些小技巧??? 用网页调整格式实在是太复杂了，凑合看看吧。。。。。? 事件处理分为两种，

javascript 跨浏览器的一些小技巧

??? 用网页调整格式实在是太复杂了，凑合看看吧。。。。。 javascript 跨浏览器的一些小技能

冒泡型事件

捕获型事件

?对于加载监听和移除监听的语法
?在IE中使用
??[Object].attachEvent("name_of_event_handler", fnHandler);
??[Object].detachEvent("name_of_event_handler", fnHandler);
?两个参数：要分配的事件处理函数的名字和事件处理函数
??[Object].attachEvent("onclick", fnHandler);
?? 与[Object].onclick = fnHandler;的作用是一样的。
??
?在DOM中使用
??[Obejct].addEventListener("name_of_event", fnHandler, bCapture);
??[Obejct].removeEventListener("name_of_event", fnHandler, bCapture);
?三个参数：1：事件名称。 2：事件处理函数。 3：用于冒泡阶段（false）或者用于捕获阶段（true）。
??[Obejct].addEventListener("click", fnHandler, false);
?? 与[Obejct].onclick = fnHandler;的作用是一样的。
??
?对于获取目标的方法
?在IE中
??var oTarget = oEvent.srcElement;
?在DOM中
??var oTarget = oEvent.target;
??
??对于获取字符代码

????在IE中

????? 如果按键代表一个字符（非Shift、Ctrl、Alt等），则keyCode将返回字符的代码，即Unicode值。

在DOM中
????? ?????? 获得字符代码用charCode?

var iCharCode = oEvent.charCode;
????? ?????? 获得字符使用??

?var sChar = String.fromCharCode(oEvent.charCode);
???????????? 如果不确定按键是否包含字符，则使用isChar来判断
???if(oEvent.isChar){
????var iCharCode = oEvent.charCode;
???}
?
?

阻止事件的默认行为(比如阻止鼠标右键等)
?在IE中
??oEvent.returnValue = false;
?在DOM中
??oEvent.preventDefault();
?
?停止事件冒泡
?在IE中
??oEvent.cancelBubble = true;
?在DOM中
??oEvent.stopPropagation();

IE和DOM在事件及事件处理中有很多不一样的。

把IE的Event事件统一成DOM的形式，创建formatEvent方法。建立EventUtil类
??

EventUtil.formatEvent = function (oEvent){  if(isIE){   oEvent.charCode = (oEvent.type == "keypress") ? oEvent.keyCode : 0;   oEvent.eventPhase = 2; //代表冒泡阶段，IE仅支持冒泡阶段   oEvent.isChar = (oEvent.charCode > 0);   oEvent.pageX = oEvent.clientX + document.body.scrollLeft;   oEvent.pageY = oEvent.clientY + document.body.scrollTop;   oEvent.preventDefault = function (){    this.returnvalue = false;   }   if(oEvent.type == "mouseout"){    oEvent.relatedTarget = oEvent.toElement;   }else if(oEvent.type == "mouseover"){    oEvent.relatedTarget = oEvent.fromElement;   }   oEvent.stopPropagation = function (){    this.cancelBubble = true;   }   oEvent.target = oEvent.srcElement;   oEvent.time = (new Date).getTime();  }  return oEvent; }

?
?IE

与DOM的event获取方法也不大一样。特别说明的是函数的caller属性。每个函数都有caller属性，指向调用它的方法的引用。即，funcA()调用funcB(),funcB.caller就等于funcA
?

EventUtil.getEvent = function(){  if(window.event){   return this.formatEvent(window.event);  }else{   return EventUtil.getEvent.caller.arguments[0];//event对象总是事件处理函数的第一个参数。  } }

?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?

热点排行

JavaScript

javascript 跨浏览器的一些小技能