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级模型的事件绑定机制才能手动定义事件流模式。
事件冒泡和事件捕获是个很丰富的内容,另外展开=》
上一篇: 还需要继续加钟吗
推荐阅读