定义
记录了事件发生时关于事件的一些详细信息，这些信息都被保存在一个对象当中
使用和兼容性问题
- IE
event对象是window身上的对象，可以直接使用
element.onclick=function(){
console.log(event); //这里的event就是事件对象
};
- FireFox
FireFox中事件对象是事件处理函数内的第一个参数
element.onclick=function(ev){
console.log(ev); //这里的ev就是事件对象
};
- chrome
上面两种方法均支持
事件对象中的常用属性
鼠标坐标 clientX clientY
事件发生时鼠标的位置信息
坐标是根据可视区左上角进行计算的
event.clientX
event.clientY
<!--div跟随鼠标移动实例-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div></div>
</body>
<script>
var div = document.querySelector('div');
document.onmousemove=function(ev){
div.style.left=ev.clientX+'px';
div.style.top=ev.clientY+'px';
};
</script>
</html>
按键信息 keyCode
按下哪个键，返回这个键对应的Unicode编码
document.onkeydown=function(ev){
console.log(ev.keyCode); //如果按下enter，返回数字13
};
功能键判断 ctrlKey shiftKey altKey
判断对应的功能键是否被按下，返回值为布尔值
document.onkeydown=function(ev){
console.log(ev.ctrlKey); //如果这里按下了ctrl键，那么会在控制台输出true，按下其他键，输出false
};
注意：
其实鼠标事件的事件对象里，也是存在按键信息的
document.onclick=function(ev){
console.log(ev.keyCode);
};
上面的代码是一个点击事件，当我点击的时候，按键，还是会在控制台输出按键对应的Unicode编码
网友评论