Event事件

Posted 2020-10-30 悔创阿里-杰克马

Event对象（事件源对象）代表事件的状态

　　比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

btn.onmousedown = function(event){ //在w3c标准中，直接在函数中声明该参数即可
    
console.log(event);   //这次点击事件的详细信息
console.log(event.button);      //0 代表鼠标按下了左键，1代表按下了滚轮，2代表按下了右键。
}

注意：1.event对象是事件绑定中的一个隐藏的参数，可以通过arguments[0]来获取；
        2：老版本的并没有遵守w3c的规范，它的button属性含义如下：
                    1鼠标左键 2鼠标右键 3左右同时按 4滚轮 5左键加滚轮 6右键加滚轮 7三个同时

兼容性写法，支持老版本的IE。

　　btn.onmousedown = function(event){

//var evt = event || window.event ;// 如果event是有效的话，则把event赋值给evt,否则把

//window.event 赋值给evt; 

　　console.log(event); // undefined；

　　console.log(window.event); //event对象

}

 // IE6时，function(event){ }这个event是找不到的，只能通过window查找event。

clientX 、clientY

在可视区域的位置，也就是浏览器坐标。

鼠标在可视区域内的坐标。

document.onmousemove = function(event){

event = event || window.event;

document.title = event.clientX+","+event.clientY;

}

演示：鼠标跟随的提示框。

offsetX 、offsetY

相对于事件源对象的偏移量，也就是元素的坐标，相对坐标。

鼠标在某个对象上时，鼠标与该对象的左上角的间距坐标。

div1.onmousemove = function(event){

event = event ||window.event;

document.title = event.offsetX+","+event.offsetY;

}

pageX、 pageY

鼠标在整个页面上的坐标，计算滚动条距离。

document.onmousemove = function(event){

event = event || window.event;

document.title = event.pageX+","+event.page.Y;

}

screenX、 screenY

整个屏幕坐标，鼠标与当前电脑屏幕的间距。

document.onmousemove = function (event){

event = event || window.event;

document.title = event.screenX+","+event.screenY;

}