什么叫跨平台事件？即在不同的浏览器上执行同一事件，所使用的方法不同。
什么是EventUtil对象？有什么作用？即将所有与事件相关的函数，融合在一起的一个容器，方便管理事件对象，它没有属性。主要处理DOM事件和IE事件的磨合，使其尽可能的相似。
下面我们来看一下DOM和IE之间的对象属性和方法做个对比（这里只指出两者之间不同的属性和方法），主要有以下五大点：
属性和方法属性和方法relatedTarget
一个小demo看一下，能够很好的解决事件跨平台的兼容问题：
rush:xhtml;">
eventUtil
上面的方法能够解决事件跨平台问题，接下来，我们看下charCode的属性。
首先给eventUtil定义一个新方法，formatEvent,接受一个参数，即Event对象。
rush:js;">
eventUtil.formatEvent=function(event)
{
if(isIE&&isWin)
{
event.charCode=(event.type=="keypress")?event.keycode:0;
event.eventphase=2;--表示冒泡阶段，IE仅
支持冒泡阶段
}
return event;
}
二：关于冒泡中的target和currentTarget
target在事件流的目标阶段；currentTarget在事件流的捕获，目标及冒泡阶段。只有当事件流处在目标阶段的时候，两个的指向才是一样的， 而当处于捕获和冒泡阶段的时候，target指向被单击的对象而currentTarget指向当前事件的父级。
rush:xhtml;">
我是目标div ----点击这部分，
输出：e.target.tagName : P || e.currentTarget.tagName : DIV
----点击这部分，输出：e.target.tagName : P || e.currentTarget.tagName : DIV
<br> ----点击这部分，<a href="https://www.jb51.cc/tag/shuchu/" target="_blank" class="keywords">输出</a>：e.target.tagName : DIV || e.currentTarget.tagName : DIV
//看下第二个变列：
<div id="outer" style="background:#099">
我是目标div
----点击这部分，
输出：e.target.tagName : DIV || e.currentTarget.tagName : DIV
----点击这部分，输出：e.target.tagName : P || e.currentTarget.tagName : DIV
<br> ----点击这部分，<a href="https://www.jb51.cc/tag/shuchu/" target="_blank" class="keywords">输出</a>：e.target.tagName : DIV || e.currentTarget.tagName : DIV
rush:js;">
function g
etobj(id)
{
return document.getElementById(id);
}
function addEvent(obj,event,fn)
{
if(window.attachEvent)
{
obj.attachEvent("on" + event,fn);
}
else if(window.addEventListener)
{
obj.addEventListener(event,false);
}
}
function test(e)
{
alert("e.target.tagName : " + e.target.tagName + "\n e.currentTarget.tagName : " + e.currentTarget.tagName);
}
var outer = g
etobj("outer");
var inner = g
etobj("inner");
//addEvent(inner,test);
addEvent(outer,test);
三：IE和DOM区别
获取目标获取字符代码默认行为
关于阻止默认行为，比如，当用户右击鼠标时，如果你不想菜单弹出，则可以使用阻止默认行为：
rush:js;">
document.body.oncontextmenu=function(event)
{
if(isIE)
{
var oEvent=window.event;
oEvent.returnValue=false; //也可以直接是return false；阻止
默认行为
}
else
{
oEvent.preventDefault();
}
}
四：鼠标事件
rush:js;">
use your mouse to click and double click the red square
js文件如下：
rush:js;">
function handleEvent(event)
{
var oText=document.getElementById('txt1');
oText.value+= "\n"+event.type;
oText.value+= "\n target is "+(event.srcElement||event.target).id;
oText.value+="\n at ("+event.clientX+","+event.clientY+")in the client";
oText.value+="\n at ("+event.screenX+","+event.screenY+")in the client";
oText.value+="\n button down is"+event.button;
var arrKeys=[];
oText.value+="\n
relatedTarget is"+event.
relatedTarget.tagName;
//event.
relatedTarget.tagName可以判断鼠标的来源和出处
}
function handle(event)
{
var oText2=document.getElementById('txt2');
oText2.value+="\n"+event.type;
var arrKeys=[];
if(event.shiftKey){arrKeys.push("Shift");}
if(event.ctrlKey){arrKeys.push("Ctrl");}
if(event.altKey){arrKeys.push("Alt");}
oText2.value+="\n keydown is "+arrKeys;
}
以上这篇js中最容易被忽视的事件问题大总结就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
