Article Directory
First, the basic concept
What is the event object
- Event object encapsulates all the information relating to current events , such as mouse coordinates, the direction wheel, like the keyboard which key switch
How to use the event object
In the normal browser IE8 and above
- When a triggering event, event response function will be an event object as an argument passed into function, parameter received by the function
IE8 and below
- The event object is a window object attributes saved
Second, resolve browser compatibility issues Code
event = event || window.event;
Explained by the following codes
if(!event){
event=window.event;
}
If you do not pass the event object event, the event is the window of the property
Third, an example of display coordinates
1. FIG effect
2.CSS codes and codes div
<style type="text/css">
#areaDiv{
height: 60px;
width: 200px;
border: 1px solid black;
}
#showMsg{
height:50px;
width: 120px;
border: 1px solid black;
}
</style>
<body>
<div id="areaDiv"></div>
<br/>
<div id="showMsg"></div>
</body>
3.JS Code
<script type="text/javascript">
window.onload=function(){
//获取两个div
var areaDiv = document.getElementById("areaDiv");
var showMsg = document.getElementById("showMsg");
//onmousemove事件鼠标在元素中移动触发
areaDiv.onmousemove = function(event){
//浏览器兼容问题
event = event || window.event;
//获取事件对象中xy坐标
var x =event.clientX;
var y =event.clientY;
//在showMsg中显示坐标
showMsg.innerHTML = "x=" + x + "，y="+y;
}
}
</script>
