JavaScript之事件对象

javascript学习记录-事件对象

 一、事件对象

1、事件对象特征

事件对象处理函数的一个标准特性是，用某些方式访问的事件对象包含了关于当前事件的上下文信息。事件处理由三个部分组成：对象 . 事件处理函数 = 函数; 譬如单击文档任意处：

document.onclick=function(){

alert("hello");

};

上例代码详解：

click表示一个事件类型：单击; onclick表示一个事件处理函数或绑定对象的属性(或者称事件监听器、侦听器); document表示一个绑定的对象，用于触发某个元素区域; function()匿名函数是被执行的函数，用于触发后的执行动作。

2、this关键字和上下文

在一个对象里，由于作用域的关系，this代表着离它最近对象。当触发某个事件时，会产生一个事件对象，这个对象包含着所有与事件有关的信息，包括导致事件的元素、事件的类型、以及其它与特定事件相关的信息。事件对象一般也称之为event对象，这个对象是通过函数把这个对象作为参数传递过来的。

那么首先，就必须验证一下，在执行函数中没有传递参数，是否可以得到隐藏的参数。

登录

通过事件绑定的执行函数是可以得到一个隐藏参数的，这说明，浏览器会自动分配一个参数，这个参数其实就是event对象。

然而上述方法比较麻烦，w3c提供 了一种简单的方法，直接通过接收参数来得到即可。可是ie不支持，ie自己定义了一个event对象，直接在window.event获取。

登录

2、可视区及屏幕坐标

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

坐标属性

属性

说明

clientx

可视区x坐标，距离左边框的位置

clienty

可视区y坐标，距离上边框的位置

screenx

屏幕区x坐标，距离左屏幕的位置

screeny

屏幕区y坐标，距离上屏幕的位置

document.onclick=function(evt){

var e=evt || window.event;

alert(e.clientx +","+ e.clienty);

alert(e.screenx +","+ e.screeny);

}

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));

};

三、键盘事件

用户在使用键盘时会触发键盘事件。

1、键码

在发生keydown和keyup事件时，event对象的keycode属性中会包含一个代码，与键盘上一个特定的键对应。对数字字母字符集，keycode属性的值与ascii码中对应小写字母或数字的编码相同。字母中大小写不影响。

document.onkeydown = function (evt) {

alert(evt.keycode); //按任意键，得到相应的keycode

};

在不同浏览器中keydown 和 keyup 事件中有些按键对应的keycode 值不一样，可自行做检测。

2、字符编码

firefox、chrome和safari的event对象都支持一个charcode属性，这个属性只有在发生keypress事件时才包含值。此时的keycode通常等于0或者也可能等于所按键的编码。ie和opera则是在keycode中保存字符的ascii编码。可以使用string.fromcharcode()将ascii编码转换成实际的字符。

四、w3c与ie

在标准的dom事件中，event对象包含与创建它的特定事件有关的属性和方法。触发的事件类型不一样，可用的属性和方法也不一样。

w3c中event对象的属性和方法

属性/方法

类型

读/写

说明

bubbles

boolean

只读

表明事件是否冒泡

cancelable

boolean

只读

表明是否可以取消事件的默认行为

currenttarget

element

只读

其事件处理程序当前正在处理事件的那个元素

detail

integer

只读

与事件相关的细节信息

eventphase

integer

只读

调用事件处理程序的阶段：1表示捕获阶段，2表示“处理目标”，3表示冒泡阶段

preventdefault()

function

只读

取消事件的默认行为。如果cancelabel是true，则可以使用这个方法

stoppropagation()

function

只读

取消事件的进一步捕获或冒泡。如果bubbles为true，则可以使用这个方法

target

element

只读

事件的目标

type

string

只读

被触发的事件的类型

view

abstractview

只读

与事件关联的抽象视图。等同于发生事件的window对象

ie中event对象的属性

属性

类型

读/写

说明

cancelbubble

boolean

读/写

默认值为false，但将其设置为true就可以取消事件冒泡

returnvalue

boolean

读/写

默认值为true，但将其设置为false就可以取消事件的默认行为

srcelement

element

只读

事件的目标

type

string

只读

被触发的事件类型

function gettarget(evt) {

var e = evt || window.event;

return e.target || e.srcelement; //兼容得到事件目标dom对象

}

document.onclick = function (evt) {

var target = gettarget(evt);

alert(target); //[object htmlhtmlelement]

};

五、事件流

事件流是描述从页面接受事件的顺序，当几个都具有事件的元素层叠在一起的时候，那点击其中一个元素时，并不是只有当前被点击的元素会被触发事件，而是层叠在你点击范围的所有元素都会触发事件。

事件流包括两种模式：冒泡 和 捕获。

事件冒泡，是从里往外逐个触发。现代的浏览器默认情况下都是冒泡模型。 事件捕获，是从外往里逐个触发。早期的netscape默认情况。

而现在的浏览器要使用dom2级模型的事件绑定机制才能手动定义事件流模式。

事件冒泡和事件捕获是个很丰富的内容，另外展开=》