18. JavaScript event 对象

DOM 2 解决之道

JavaScript 的 event 对象用来描述 JavaScript 的事件，它主要用于 IE 和 NN4 以后的各个浏览器版本中。event 对象代表事件状态，如事件发生的元素，键盘的状态，鼠标位置和鼠标按钮状态。一旦事件发生，变灰生成 event 对象，如单击一个按钮，浏览器的内存中就产生相应的 event 对象。

1. 在 IE 中引用 event 对象
在 IE 中，event 对象被作为 window 对象属性访问：

window.event

由于 window 引用部分是可选的，因此脚本像全局引用一样对象 event 对象：

event.prototypeName

这样，一个事件处理程序的任何语句在不进行特殊预处理和初始化的情况下，都可以访问 event 对象。

2. 在 W3C 中引用 event 对象
在 W3C 事件模型中，event 对象引用比较复杂。在多数情况下，必须明确的将 event 对象作为一个参数传递到事件处理函数中。event 对象有时可自动作为参数传递，这依赖于事件处理函数如何与对象绑定。
如果使用原始的方法将事件处理函数与对象绑定(通过元素标记的一个属性)，则必须把 event 对象作为参数传递。例如：

onKeyUp = "example(event)"

这是在 W3C 模型中唯一像全局引用一样明确引用 event 对象的方式，这个引用只作为事件处理函数的参数，在别的内容中不起作用。如果有多个参数，则 event 对象引用可以以任意顺序排列，例如：

onKeyUp = "example(this,event)"

与元素绑定的函数定义应该有一个参数变量来”捕获” event 对象参数：

function example(widget,evt){ ... }

注意：
这个参数变量名没有任何限制。在跨浏览器的脚步中使用时，应避免用 event 作为参数变量名，以避免与 IE 的 event 属性冲突。
还可以通过其他方式将事件处理绑定到对象(在NN6+中，使用属性赋值和W3C DOM 的addEventListener()方法)，将这些事件处理函数的引用赋给文档中所需的对象。例如：

document.forms[0].someButton.onKeyUp = example;
document.getElementById("myButton").addEventListener("KeyUp",example,false);

通过这些方式进行事件绑定可以防止自己的参数直接到达调用的函数。但是，W3C 浏览器自动传送 event 对象的引用并将它作为唯一参数，这个 event 对象是为相应激活事件的用户或系统行为而创建的。也就是说，函数需要用一个参数变量来接收传递的 event 对象。

function example(evt){ ... }

3. event 对象的属性
(1) altLeft 属性
该属性设置或获取左 Alt 键的状态。检索左 Alt 键的当前状态，返回值 true 表示关闭，false 为不关闭。
语法：

[window.]event.altLeft

由于 altLeft 属性是 Boolean 值，因此可以将该属性应用到 if 语句中，根据获取的值的不同而执行不同的操作。

(2) ctrLft 属性
该属性设置或获取左 Ctrl 键的状态。检索左 Ctrl 键的当前状态，返回值 true 表示关闭，false 为不关闭。
语法：

[window.]event.ctrlLeft

(3) shiftLeft 属性
该属性设置或获取 Shift 键的状态。检索左 Shift 键的当前状态，返回值 true 表示关闭，false 为不关闭。
语法：

[window.]event.shiftLeft

由于这三个属性的值同样也都是 Boolean 类型的，所以可以将他们组合成一个条件在 if 语句中应用，并且也可以和 altKey, ctrlKey 和 shiftKey 属性同时使用。

function example()
{if(window.event.ctrlKey && window.event.altkey && window.event.shiftKey){alert("同时按下三个键");window.location.href = "http://www.baidu.com";//连接到百度}
}document.onkeydown = example; //应用onkeydown 事件输出函数 example()中的内容

4. button 属性
该属性设置或获取事件发生时用户所按的鼠标键。
语法：

[window].event.button

当用户按下多个键时，每次按键都激活一个onmousedown事件。如果用户首先按下左键，则onmousedown事件激活，event.button属性值为1；如果按下右键，那么onmousedown事件再次激活，event.button属性值为3。如果脚本同时按下两个按键执行特殊动作，那么就应该忽略单一按键动作，因为在处理过程中很可能激活单键事件，从而干扰目标行为。

注意：button属性仅用于 onmousedown,onmouseup和onmousemove事件。对于其他事件，
无论鼠标状态如何，都返回0(如click)。

点击鼠标右键，弹出提示框，单击确定，跳到百度首页。

function gosite()
{if(event.button==2){alert("欢迎你");window.open("http://www.baidu.com");return false;}
}
document.onmousedown=gosite;

5. clientX 属性
该属性获取鼠标在浏览器窗口中的X坐标，它是一个只读属性，即只能获取鼠标当前位置，不能改变鼠标的位置。
语法：

[window].event.clientX

6. clientY 属性
该属性获取鼠标在浏览器窗口中的Y坐标，它是一个只读属性，即只能获取鼠标当前位置，不能改变鼠标的位置。
语法：

[window].event.clientY

18. JavaScript event 对象相关推荐

javascript Event对象
参考:https://developer.mozilla.org/zh-CN/docs/Web/API/Event Event接口表示在DOM中发生的事件(鼠标,键盘,动画,图片加载,视频暂停等等) ...
一张图轻松搞懂javascript event对象的clientX,offsetX,screenX,pageX区别
先总结下区别:event.clientX.event.clientY鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条.IE事件和标准事件都定义了这2个属性event. ...
jsevent(js event对象)
javascript event对象的具体功能是什么 event对象只在事件发生的过程中才有效(比如鼠标点击,键盘按下等). event对象用以表示事件的状态, 触发event对象的元素(event. ...
图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别
通过 3 张图和 1 张表格,轻松区别 Javascript Event 对象中的offsetX, clientX, pageX, screenX, layerX, x等属性. 一.测试代码如下: & ...
JavaScript 复习之事件模型和 Event对象
事件模型一.监听函数 js 有三种方法,可以为事件绑定监听函数 HTML 的 on- 属性元素节点的事件属性,也可以指定监听函数 EventTarget.addEventListener() DO ...
javascript事件与event对象的属性
javascript事件列表解说事件浏览器支持解说一般事件 onclick IE3.N2 鼠标点击时触发此事件 ondblclick IE4.N4 鼠标双击时触发此事件 onmousedown ...
Javascript的Event对象
Javascript的Event对象用来描述Javascript的事件,它主要作用于IE4和NN4以后的各个浏览器版本中.Event代表事件状态,如事件发生的元素,键盘状态,鼠标位置和鼠标按钮状态.一 ...
JavaScript事件——event对象事件冒泡阻止默认行为事件捕获
event对象用来获取事物的详细信息:鼠标位置.键盘按键 e.clientX 鼠标距离元素所在的X轴(左边)位置 e.clientY 鼠标距离元素所在的Y轴(顶部)位置 (左上角为0,0点) 获取e ...
javascript高级程序设计---Event对象二
鼠标事件事件种类鼠标事件指与鼠标相关的事件,主要有以下一些. (1)click事件 click事件当用户在Element节点.document节点.window对象上,单击鼠标(或者按下回车键)时 ...
idea中event log_【JavaScript 教程】事件——Event 对象
作者 | 阮一峰概述事件发生以后,会产生一个事件对象,作为参数传给监听函数.浏览器原生提供一个Event对象,所有的事件都是这个对象的实例,或者说继承了Event.prototype对象. Eve ...

18. JavaScript event 对象

18. JavaScript event 对象相关推荐

最新文章

热门文章