首页 > js学习 > js基础知识 > javascript中事件对象简介和事件对象的鼠标事件
2016
12-16

javascript中事件对象简介和事件对象的鼠标事件

事件对象:事件处理函数的一个标准特性是,以某些方式访问的事件对象包含有关于当前事件的上下文信息。事件处理三部分组成:对象.事件处理函数=函数。

例如:单击文档任意处。document.onclick = function () {alert('Lee');};

以上程序的名词解释:click表示一个事件类型,单击。onclick表示一个事件处理函数或绑定对象的属性(或者叫事件监听器、侦听器)。document表示一个绑定的对象,用于触发某个元素区域。function()匿名函数是被执行的函数,用于触发后执行。

除了用匿名函数的方法作为被执行的函数,也可以设置成独立的函数。

document.onclick = box; //直接赋值函数名即可,无须括号

function box() {alert('Lee');}

this关键字:在一个对象里,由于作用域的关系,this代表着离它最近对象。

var input = document.getElementsByTagName('input')[0];

input.onclick = function () {alert(this.value);}; //this表示input对象

当触发某个事件时,会产生一个事件对象,这个对象包含着所有与事件有关的信息。包括导致事件的元素、事件的类型、以及其它与特定事件相关的信息。

事件对象,我们一般称作为event对象,这个对象是浏览器通过函数把这个对象作为参数传递过来的。那么首先,我们就必须验证一下,在执行函数中没有传递参数,是否可以得到隐藏的参数。

function box() {alert(arguments.length);}//0,普通空参函数,没有得到任何传递的参数

input.onclick = function () {alert(arguments.length);};//1,事件绑定的执行函数,得到一个隐藏参数

通过上面两组函数中,我们发现,通过事件绑定的执行函数是可以得到一个隐藏参数的。说明,浏览器会自动分配一个参数,这个参数其实就是event对象。

input.onclick = function () {alert(arguments[0]);};//MouseEvent,鼠标事件对象

上面这种做法比较累,那么比较简单的做法是,直接通过接收参数来得到即可。

input.onclick = function (evt) {alert(evt);};//MouseEvent,鼠标事件对象,接受event对象,名称不一定非要event

直接接收event对象,是W3C的做法,IE不支持,IE自己定义了一个event对象,直接在window.event获取即可。

input.onclick = function (evt) {var e = evt || window.event; alert(e);};//实现跨浏览器兼容获取event对象

一.鼠标事件:鼠标事件是Web上面最常用的一类事件,毕竟鼠标还是最主要的定位设备。那么通过事件对象可以获取到鼠标按钮信息和屏幕坐标获取等。

1.鼠标按钮:只有在主鼠标按钮被单击时(常规一般是鼠标左键)才会触发click事件,因此检测按钮的信息并不是必要的。但对于mousedown和mouseup事件来说,则在其event对象存在一个button属性,表示按下或释放按钮。

非IE(W3C)中的button属性:格式(值:说明)

0:表示主鼠标按钮(常规一般是鼠标左键)

1:表示中间的鼠标按钮(鼠标滚轮按钮)

2:表示次鼠标按钮(常规一般是鼠标右键)

IE中的button属性:格式(值:说明)

0:表示没有按下按钮

1:表示主鼠标按钮(常规一般是鼠标左键)

2:表示次鼠标按钮(常规一般是鼠标右键)

3:表示同时按下了主、次鼠标按钮

4:表示按下了中间的鼠标按钮

5:表示同时按下了主鼠标按钮和中间的鼠标按钮

6:表示同时按下了次鼠标按钮和中间的鼠标按钮

7:表示同时按下了三个鼠标按钮

在绝大部分情况下,我们最多只使用主次中三个单击键,IE给出的其他组合键一般无法使用上。所以,我们只需要做上这三种兼容即可。

function getButton(evt) { //跨浏览器左中右键单击相应

var e = evt || window.event;

if (evt) { //Chrome浏览器支持W3C和IE

return e.button; //要注意判断顺序

} else if (window.event) {

switch(e.button) {

case 1 :

return 0;

case 4 :

return 1;

case 2 :

return 2;

}

}

}

2.可视区及屏幕坐标

事件对象提供了两组来获取浏览器坐标的属性,一组是页面可视区左边,另一组是屏幕坐标。

clientX:可视区X坐标,距离左边框的位置

clientY:可视区Y坐标,距离上边框的位置

screenX:屏幕区X坐标,距离左屏幕的位置

screenY:屏幕区Y坐标,距离上屏幕的位置

3.修改键

有时,我们需要通过键盘上的某些键来配合鼠标来触发一些特殊的事件。这些键为:Shfit、Ctrl、Alt和Meat(Windows中就是Windows键,苹果机中是Cmd键),它们经常被用来修改鼠标事件和行为,所以叫修改键。

shiftKey:判断是否按下了Shfit键

ctrlKey:判断是否按下了ctrlKey键

altKey:判断是否按下了alt键

metaKey:判断是否按下了windows键,IE不支持

function getKey(evt) {

var e = evt || window.event;

var keys = [];

if (e.shiftKey) keys.push('shift'); //给数组添加元素

if (e.ctrlKey) keys.push('ctrl');

if (e.altKey) keys.push('alt');

return keys;

}

document.onclick = function (evt) {

alert(getKey(evt));

};

最后编辑:
作者:qingheluo
这个作者貌似有点懒,什么都没有留下。