在JavaScript中,在事件处理器中可以获取event这个对象,有时候啊处理事件时需要获取一些跟事件相关的信息,可以通过下面的代码获取
function PrintLn(str){
var div = document.getElementById("msg");
div.innerHTML = div.innerHTML + str+"<br/>";
}
function OnClick(){
var e = event;
var div = document.getElementById("msg");
//alert("clicked.");
PrintLn("是否冒泡:" + e.bubbles);
PrintLn("鼠标的按钮:" + e.button);
PrintLn("Ctrl键是否按下:" + e.ctrlKey);
PrintLn("alt键是否被按下:" + e.altKey);
var rest = e.isChar || "NotDefined";
PrintLn("当前按下的键是否表示一个字符:" + rest);
PrintLn("当前按键的unicode(仅仅对keypress事件有效):" + e.keyCode);
PrintLn("当前按键的unicode,无视当前按键是否表示一个字符:" + e.which);
PrintLn("viewport区域坐标: X:" + e.pageX + "Y:" + e.pageY);
PrintLn("相对于屏幕的坐标, X:" + e.ScreenX + "Y:" + e.ScreenY);
PrintLn("事件冒泡阶段所在的当前DOM元素:" + e.currentTarget);
PrintLn("事件冒泡原始的DOM元素:" + e.target || e.originalTarget);
PrintLn("其他和事件相关的DOM元素:" + e.relatedTarget);
PrintLn("--------------------------------------------");
}
对应的HTML代码
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="TestStatocVariable.js"></script>
<script type="text/javascript">
onload = function(){
//document.getElementById("box").addEventListener("click", OnClick);
}
</script>
<title>Test Page</title>
<style type="text/css">
#msg{
width: 60%;
height: 600px;
border: 1px;
border-radius: 5px;
}
</style>
</head>
<body>
<div id="box" οnclick="OnClick();">
<button οnclick="OnClick();" name="btnTest">Click</button>
<div id="msg">
</div>
</div>
</body>
</html>
输出的结果:
是否冒泡:true
鼠标的按钮:0
Ctrl键是否按下:false
alt键是否被按下:false
当前按下的键是否表示一个字符:NotDefined
当前按键的unicode(仅仅对keypress事件有效):0
当前按键的unicode,无视当前按键是否表示一个字符:1
viewport区域坐标: X:32Y:24
相对于屏幕的坐标, X:undefinedY:undefined
事件冒泡阶段所在的当前DOM元素:[object HTMLButtonElement]
事件冒泡原始的DOM元素:[object HTMLButtonElement]
其他和事件相关的DOM元素:null
--------------------------------------------
是否冒泡:true
鼠标的按钮:0
Ctrl键是否按下:false
alt键是否被按下:false
当前按下的键是否表示一个字符:NotDefined
当前按键的unicode(仅仅对keypress事件有效):0
当前按键的unicode,无视当前按键是否表示一个字符:1
viewport区域坐标: X:32Y:24
相对于屏幕的坐标, X:undefinedY:undefined
事件冒泡阶段所在的当前DOM元素:[object HTMLDivElement]
事件冒泡原始的DOM元素:[object HTMLButtonElement]
其他和事件相关的DOM元素:null
--------------------------------------------