Javascript——事件对象和常用的鼠标事件

事件对象：
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>