码迷,mamicode.com
首页 > 其他好文 > 详细

Event事件

时间:2018-04-09 15:05:02      阅读:193      评论:0      收藏:0      [点我收藏+]

标签:左右   col   style   坐标   color   client   事件绑定   含义   mouse   

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;

}

Event事件

标签:左右   col   style   坐标   color   client   事件绑定   含义   mouse   

原文地址:https://www.cnblogs.com/l8l8/p/8759049.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!