事件对象:
event对象代表事件的状态,比如键盘按键的状态/鼠标的位置/鼠标按钮的状态
事件发生后,跟事件相关的一系列信息数据的集合都放到这里,这对象就是事件对象event,有很多属性和方法。
事件对象只有有了事件才会存在,是系统给我们自动创建的,不需要传递参数,当我们注册事件时,event对象就会被系统自动创建,并依次传递给事件监听器(事件处理函数)。
事件对象是事件的一系列相关数据的集合,跟事件相关的,比如鼠标点击里面就包含了鼠标的相关信息,如果是键盘事件里面就包含键盘事件的信息,如判断用户按下了哪个键
事件对象可以自己命名,比如event
常见事件对象的属性和方法
var div = document.querySelector('div');
div.addEventListener('click',function(event){
console.log(e.target);
})
鼠标事件:
1.禁止鼠标右键菜单
contextmenu主要控制应该何时显示上下文菜单,用于程序员取消默认的上下文菜单
document.addEventListener('contextmenu',function(e){
e.preventDefault();
})
2.禁止鼠标选中(selectstart开始选中)
document.addEventListener('selectstart',function(e){
e.preventDefault();
})
鼠标事件对象
event对象代表事件状态,跟事件相关的一系列信息的集合。
现阶段主要是用鼠标事件对象MouseEvent和键盘事件对象KeyboardEvent。
鼠标事件对象 | 说明 |
---|---|
e.clientX | 返回鼠标相对于浏览器窗口可视区的X坐标 |
e.clientY | 返回鼠标相对于浏览器窗口可视区的Y坐标 |
e.pageX | 返回鼠标相对于文档页面的X坐标 IE9+支持 |
e.pageY | 返回鼠标相对于文档页面的Y坐标 IE9+支持 |
e.screenX | 返回鼠标相对于电脑屏幕的X坐标 |
e.screenY | 返回鼠标相对于电脑屏幕的Y坐标 |
鼠标事件对象 MouseEvent
<script>
document.addEventListener('click',function(e){
//client鼠标在可视区的x和y坐标
console.log(e.clientX);
console.log(e.clientY);
})
</script>
<script>
var pic = document.querySelector('img');
document.addEventListener('mousemove',function(e){
//1.mousemove只要鼠标移动1px,就会触发这个事件
//2.核心原理:每次鼠标移动,都会获得最新的鼠标坐标,把x和y坐标作为图片的top和left值就可以移动图片
var x = e.pageX;
var y = e.pageY;
//3.不要忘记给left和top添加px单位
pic.style.left = x -50 +'px';
pic.style.top = y - 40 + 'px';
});
</script>