什么叫跨平台事件？即在不同的浏览器上执行同一事件，所使用的方法不同。
什么是EventUtil对象？有什么作用？即将所有与事件相关的函数，融合在一起的一个容器，方便管理事件对象，它没有属性。主要处理DOM事件和IE事件的磨合，使其尽可能的相似。
下面我们来看一下DOM和IE之间的对象属性和方法做个对比（这里只指出两者之间不同的属性和方法），主要有以下五大点：
DOM属性和方法 IE属性和方法 charcode keycode preventDefault returnValue=false relatedTarget fromobj|toobj stopPropation cancelBuble=true target srcobj
我们用一个小demo看一下，能够很好的解决事件跨平台的兼容问题：
<html>
<head>
<title>eventUtil</title>
<script eventType="text/javascript">
var eventUtil = {
//监听事件
addListener: function(obj, eventType, fn) {
if (obj.addEventListener) {
obj.addEventListener(eventType, fn, false);
} else if (obj.attachEvent) {
obj.attachEvent('on' + eventType, fn);
} else {
obj['on' + eventType] = fn;
}
},
//返回event对象
getEvent: function(event) {
return event || window.event;
//return event "button" value="click me" id="btn" />
<p>event</p>
<a>Hello word!</a>
<script eventType="text/javascript">
function addBtnListen(event)
{
var event = eventUtil.getEvent(event);
var target = eventUtil.getTarget(event);
alert("my name is kock");
alert(event.eventType);
alert(target);
eventUtil.stopPropagation(event);
}
function getBodyListen(event)
{
alert("click body");
}
function getLinkListen(event)
{
alert("prevent default event");
var event = eventUtil.getEvent(event);
eventUtil.preventDefault(event);
}
window.onload=function()
{
var btn = document.getobjById("btn");
var link = document.getobjsByTagName("a")[0];
eventUtil.addListener(btn, "click", addBtnListen);
eventUtil.addListener(document.body, "click", getBodyListen);
eventUtil.addListener(link, "click",getLinkListen);
}
</script>
</body>
</html>
上面的方法能够解决事件跨平台问题，接下来，我们看下charCode的属性。
首先给eventUtil定义一个新方法，formatEvent,接受一个参数，即Event对象。
eventUtil.formatEvent=function(event)
{
if(isIE&&isWin)
{
event.charCode=(event.type=="keypress")"color: #ff0000">二：关于冒泡中的target和currentTarget
target在事件流的目标阶段；currentTarget在事件流的捕获，目标及冒泡阶段。只有当事件流处在目标阶段的时候，两个的指向才是一样的， 而当处于捕获和冒泡阶段的时候，target指向被单击的对象而currentTarget指向当前事件的父级。
<div id="outer" style="background:#099">
<p>我是目标div</p> ----点击这部分，输出：e.target.tagName : P || e.currentTarget.tagName : DIV <p id="inner" style="background:#9C0">我是目标p</p> ----点击这部分，输出：e.target.tagName : P || e.currentTarget.tagName : DIV
<br> ----点击这部分，输出：e.target.tagName : DIV || e.currentTarget.tagName : DIV
</div>
//看下第二个变列：
<div id="outer" style="background:#099">
<div>我是目标div</div> ----点击这部分，输出：e.target.tagName : DIV || e.currentTarget.tagName : DIV <p id="inner" style="background:#9C0">我是目标p</p> ----点击这部分，输出：e.target.tagName : P || e.currentTarget.tagName : DIV
<br> ----点击这部分，输出：e.target.tagName : DIV || e.currentTarget.tagName : DIV
</div>
function getObj(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, fn, false);
}
}
function test(e)
{
alert("e.target.tagName : " + e.target.tagName + "\n e.currentTarget.tagName : " + e.currentTarget.tagName);
}
var outer = getObj("outer");
var inner = getObj("inner");
//addEvent(inner, "click", test);
addEvent(outer, "click", test);
三：IE和DOM区别
DOM
IE
获取目标
event.target
event.srcElement
获取字符代码
event.charCode
event.keyCode
阻止默认行为
event.prevetDefault()
event.returnvalue=false
冒泡
event.stopPropagation()
event.cancelBubble=true
关于阻止默认行为，比如，当用户右击鼠标时，如果你不想菜单弹出，则可以使用阻止默认行为：
document.body.oncontextmenu=function(event)
{
if(isIE)
{
var oEvent=window.event;
oEvent.returnValue=false; //也可以直接是return false；阻止默认行为
}
else
{
oEvent.preventDefault();
}
}
四：鼠标事件
<p>use your mouse to click and double click the red square</p>
<div style="width:100px;height:100px;background:red"
onmouseover="handleEvent(event)"
onmouseout="handleEvent(event)"
onmousedown="handleEvent(event)"
onmouseup="handleEvent(event)"
onclick="handleEvent(event)"
ondblclick="handleEvent(event)" id="div1"
>
</div>
<p><textarea id="txt1" rows="5" cols="45"></textarea></p>
<!--检测键盘事件-->
<p><input type="text" id="textbox"
onkeydown="handle(event)"
onkeypress="handle(event)"
onkeyup="handle(event)"
></p>
<p><textarea id="txt2" rows="10" cols="45"></textarea></p>
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中最容易被忽视的事件问题大总结就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
更新日志
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]