事件对象是什么?
事件对象也是一个对象,这个对象就事件触发是的相关信息
例如:鼠标点击事件中,事件对象就存储了鼠标点在哪个位置等信息
如何获取:
在事件绑定的回调函数的第一个参数就是事件对象
一般命名为event、ev、e
元素.addEventListener('click',function(e){
})
事件对象常用属性:
目标:能够使用常见事件对象属性
部分常见属性
type
获取当前的事件类型
clientX/clientY
获取光标相对于浏览器可见窗口左上角的位置
offsetX/offsetY
获取光标相对于当前DOM元素左上角的位置
key
用户按下的键盘键的值
现在不提倡使用keycode
事件对象小案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 图片必须加上定位 */
img {
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<img src="./images/tianshi.gif" alt="">
<script>
// 获取元素
let img = document.querySelector('img')
// 事件监听
document.addEventListener('mousemove', function (e) {
// 不断得到当前的鼠标坐标
console.log(e.pageX);
console.log(e.pageY);
// 把坐标给图片
img.style.left = e.clientX+'px'
img.style.top = e.clientY+'px'
})
</script>
</body>
</html>