JavaScript 事件对象与事件目标

事件对象：

不同浏览器对事件event支持

在触发某个事件, 会产生一个事件对象event, 这个事件包含着所有与事件有关的信息

标准DOM方式：

btn.onclick=function(event){
    alert(event.type); //onclick
}

IE浏览器

btn.onclick=function(){
    var event = window.event;
    alert(event.type); //click
}

兼容性写法:

写法1

oP.onclick = function(oEvent){
    if(window.event) oEvent = window.event;
}

写法2:

oP.onclick = function(ev){
    var oEvent=ev||event;
}

在IE浏览器中事件对象是window对象的一个属性window.event；

在标准的DOM中规定event对象必须作为唯一的参数传给事件处理函数；

因此在类似Firefox浏览器中访问事件对象通常将其作为参数;代码如下

oP.onclick = function(oEvent){
}

注意:IE9已经支持标准的DOM规定event对象作为唯一的参数传给事件处理函数

事件属性和方法：

事件名称：type

<html>
<head>
<title>事件的名称</title>
<script language="javascript">
function handle(oEvent){
    var oDiv = document.getElementById("display");
    if(window.event) oEvent = window.event; //处理兼容性，获得事件对象
    if(oEvent.type == "click") //检测事件名称
    oDiv.innerHTML += "你点击了我  ";
    else if(oEvent.type == "mouseover")
    oDiv.innerHTML += "你移动到我上方了  ";

}
window.onload = function(){
    var oImg = document.getElementsByTagName("img")[0];
    oImg.onclick = handle; //handle后面不能加上括号(),行为与结构的分离的事件处理函数不能加括号;
    oImg.onmouseover = handle;
}
</script>
</head>
<body>
<img src="01.jpg" border="0">
<div id="display"></div>
</body>
</html>

事件目标：srcElement(IE),target(标准DOM)

<html>
<head>
<title>事件的目标</title>
<script language="javascript">
function handle(oEvent){
    if(window.event) oEvent = window.event; //处理兼容性，获得事件对象
    var oTarget;
    if(oEvent.srcElement) //处理兼容性，获取事件目标
    oTarget = oEvent.srcElement;
    else
    oTarget = oEvent.target;
    alert(oTarget.tagName); //弹出目标的标记名称
}
window.onload = function(){
    var oImg = document.getElementsByTagName("img")[0];
    oImg.onclick = handle;
}
</script>
</head>
<body>
<img src="02.jpg" border="0">
</body>
</html>

注意：IE9已经支持DOM标准的target属性

事件对象和事件目标的兼容性

var EventUtil ={
getEvent: function(event){
return event ? event : window.event;
},
getTarget: function(event){
return event.target || event.srcElement;
}
};

使用方法：

<html>
<head>
<title>键盘事件</title>
<script type="text/javascript">
var EventUtil ={
getEvent: function(event){
return event ? event : window.event;
},
getTarget: function(event){
return event.target || event.srcElement;
}
};
function handle(oEvent){
    oEvent = EventUtil.getEvent(oEvent);
    oTarget = EventUtil.getTarget(oEvent);
    var oDiv = document.getElementById("display");
    oDiv.innerHTML += oEvent.type + "  " + oTarget.tagName; //输出事件名称和事件对象
}
window.onload = function(){
    var oTextArea = document.getElementsByTagName("textarea")[0];
    oTextArea.onkeydown = handle; //监听所有键盘事件
    oTextArea.onkeyup = handle;
    oTextArea.onkeypress = handle;
}
</script>
</head>
<body>
<textarea rows="4" cols="50"></textarea>
<div id="display"></div>
</body>
</html>

其他：

if(window.event) oEvent = window.event;

var bShift = oEvent.shiftKey; //键盘事件,返回值Boolean,按下shift键则为true,否则为false
var bAlt = oEvent.altKey; //键盘事件,返回值Boolean,按下alt键则为true,否则为false
var bCtrl = oEvent.ctrlKey; //键盘事件,返回值Boolean,按下ctrl键则为true,否则为false

var iClientX = oEvent.clientX; // 鼠标指针在客户端区域的坐标，不包括工具栏、滚动条等
var iClientY = oEvent.clientY;

var iScreenX = oEvent.screenX; //鼠标指针相对于整个计算机屏幕的坐标值
var iScreenY = oEvent.screenY;

关于srcElement和target属性的理解:当前事件的源(对象)

event.srcElement.tagName //事件对象的html标记

event.srcElement.innerText //事件对象的内文本

event.srcElement.value //表单事件对象的值

网站首页 > 基础教程正文

猜你喜欢

网站首页 > 基础教程 正文

JavaScript 事件对象与事件目标

猜你喜欢

网站首页 > 基础教程正文