澳门新葡萄京官网首页JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件

<form name=”searchform” method=”POST” action=””>
<p><input type=”text” name=”search” size=”20″ value=”关键词”
onmouseover=”mouseover()” onmouseout=”mouseout()”><input
type=”submit” value=”搜索” name=”B1″></p> </form>
<script> var originalValue=document.all.searchform.search.value;
function mouseover() {
if(document.all.searchform.search.value==originalValue)
document.all.searchform.search.value=””;
document.all.searchform.search.focus(); } function mouseout() {
if(document.all.searchform.search.value==””)
document.all.searchform.search.value=originalValue; } </script>

跨平台的事件EventUtil对象
  EventUtil:

其实老早之前就已经做完了,这次稍微改进一下
浏览地址:

[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

复制代码 代码如下:

复制代码 代码如下:

var EventUtil={
addEventHandler:function(oTarget, sEventType, fnHandler){
if(oTarget.addEventListener){
oTarget.addEventListener(sEventType,fnHandler,false);
} else if(oTarget.attachEvent){
oTarget.attachEvent(“on”+sEventType,fnHandler);
} else{
oTarget[“on”+sEventType]=fnHandler;
}
},
removeEventHandler:function(oTarget, sEventType, fnHandler){
if(oTarget.removeEventListener){
oTarget.removeEventListener(sEventType,fnHandler);
} else if(oTarget.detachEvent){
oTarget.detachEvent(“on”+sEventType,fnHandler);
} else{
oTarget[“on”+sEventType]=null;
}
},
formatEvent:function(oEvent){
var isIE=/msie/i.test(navigator.userAgent),
isWin=/win/i.test(navigator.userAgent);
if(isIE && isWin){
oEvent.charCode=(oEvent.type == “keypress”)?oEvent.keyCode:0;
oEvent.eventPhase =2;
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.relateTarget=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;
},
getEvent:function(){
if(window.event){
return this.formatEvent(window.event);
}else{
return EventUtil.getEvent.caller.arguments[0];
}
}
}

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “;
<html xmlns=”;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>无标题文档</title>
<script src=”yahoo.js” type=”text/javascript”></script>
<script src=”event.js” type=”text/javascript”></script>

测试

</head>

复制代码 代码如下:

<body>
<p><a href=”;
<p><a href=”;
<script type=”text/javascript”>
var links=document.getElementsByTagName(“a”);
function return_obj(){
return source;
}
function auto_click(str){
window.location=str;
}
function mouseover_func(e){
source=event.srcElement;
start=setTimeout(“auto_click(‘”+source+”‘)”,1500);
}
function mouseout_func(e){
clearInterval(start);
}
YAHOO.util.Event.addListener(links,”mouseover”,mouseover_func);
YAHOO.util.Event.addListener(links,”mouseout”,mouseout_func);
</script>

<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta charset=”utf-8″/>
<script>
var EventUtil={
addEventHandler:function(oTarget, sEventType, fnHandler){
if(oTarget.addEventListener){
oTarget.addEventListener(sEventType,fnHandler,false);
} else if(oTarget.attachEvent){
oTarget.attachEvent(“on”+sEventType,fnHandler);
} else{
oTarget[“on”+sEventType]=fnHandler;
}
},
removeEventHandler:function(oTarget, sEventType, fnHandler){
if(oTarget.removeEventListener){
oTarget.removeEventListener(sEventType,fnHandler);
} else if(oTarget.detachEvent){
oTarget.detachEvent(“on”+sEventType,fnHandler);
} else{
oTarget[“on”+sEventType]=null;
}
},
formatEvent:function(oEvent){
var isIE=/msie/i.test(navigator.userAgent),
isWin=/win/i.test(navigator.userAgent);
if(isIE && isWin){
oEvent.charCode=(oEvent.type == “keypress”)?oEvent.keyCode:0;
oEvent.eventPhase =2;
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.relateTarget=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;
},
getEvent:function(){
if(window.event){
return this.formatEvent(window.event);
}else{
return EventUtil.getEvent.caller.arguments[0];
}
}
}
EventUtil.addEventHandler(window,”load”,function(){
var oDiv=document.getElementById(“div1”);
EventUtil.addEventHandler(oDiv,”mouseover”,handleEvent);
EventUtil.addEventHandler(oDiv,”mouseout”,handleEvent);
EventUtil.addEventHandler(oDiv,”mousedown”,handleEvent);
EventUtil.addEventHandler(oDiv,”mouseup”,handleEvent);
EventUtil.addEventHandler(oDiv,”click”,handleEvent);
EventUtil.addEventHandler(oDiv,”dblclick”,handleEvent);
});
function handleEvent(){
var oEvent=EventUtil.getEvent();
var oTextbox=document.getElementById(“txt1”);
oTextbox.value+=”n>”+oEvent.type;
oTextbox.value+=”n target is “+oEvent.target.tagName;
if(oEvent.relatedTarget){
oTextbox.value+=”n relateTarget is “+oEvent.relatedTarget.tagName;
}
}
</script>
</head>
<body>
<p>Use your mouse to click and double click the red
square.</p>
<div id=”div1″
style=”width:100px;height:100px;background:red;”>Test</div>
<p><textarea id=”txt1″ rows=”15″
cols=”50″></textarea></p>
</body>
</html>
// 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.relateTarget=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;
},
getEvent:function(){
if(window.event){
return this.formatEvent(window.event);
}else{
return EventUtil.getEvent.caller.arguments[0];
}
}
}
window.onload=function(){
var oDiv=document.getElementById(“div1”);
EventUtil.addEventHandler(oDiv,”mouseover”,handleEvent);
EventUtil.addEventHandler(oDiv,”mouseout”,handleEvent);
EventUtil.addEventHandler(oDiv,”mousedown”,handleEvent);
EventUtil.addEventHandler(oDiv,”mouseup”,handleEvent);
EventUtil.addEventHandler(oDiv,”click”,handleEvent);
EventUtil.addEventHandler(oDiv,”dblclick”,handleEvent);
}
function handleEvent(){
var oEvent=EventUtil.getEvent();
var oTextbox=document.getElementById(“txt1”);
oTextbox.innerHTML+=”
>”+oEvent.type;
oTextbox.innerHTML+=”
target is “+oEvent.target.tagName;
if(oEvent.relatedTarget){
oTextbox.innerHTML+=”
relateTarget is “+oEvent.relatedTarget.tagName;
}
}
// ]]>
Use your mouse to click and double click the red square.
Test

</body>
</html>

作者:Artwl
出处:

浏览地址: 复制代码
代码如下: !DOCTYPEhtmlPUBLIC”-//W…

EventUtil: 复制代码
代码如下: var EventUtil={ addEventHandler:function(oTarget, sEventType,
fnHandler){ if(oTarget.addEventListener){ oTarg…

发表评论

电子邮件地址不会被公开。 必填项已用*标注