首页 > js学习 > js基础知识 > 事件对象的键盘事件、event对象和事件流
2016
12-16

事件对象的键盘事件、event对象和事件流

一.键盘事件

用户在使用键盘时会触发键盘事件。“DOM2级事件”最初规定了键盘事件,结果又删除了相应的内容。最终还是使用最初的键盘事件,不过IE9已经率先支持“DOM3”级键盘事件。

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

document.onkeydown = function (evt) {alert(evt.keyCode);}; //按任意键,得到相应的keyCode

不同的浏览器在keydown和keyup事件中,会有一些特殊的情况:

在Firefox和Opera中,分号键时keyCode值为59,也就是ASCII中分号的编码;而IE和Safari返回186,即键盘中按键的键码。

2.字符编码

Firefox、Chrome和Safari的event对象都支持一个charCode属性,这个属性只有在发生keypress事件时才包含值,而且这个值是按下的那个键所代表字符的ASCII编码。此时的keyCode通常等于0或者也可能等于所按键的编码。IE和Opera则是在keyCode中保存字符的ASCII编码。

可以使用String.fromCharCode()将ASCII编码转换成实际的字符。

keyCode和charCode区别如下:比如当按下“a键(重视是小写的字母)时,

在Firefox中会获得(65对应A,97对应a)

keydown: keyCode is 65 charCode is 0

keyup: keyCode is 65 charCode is 0

keypress: keyCode is 0 charCode is 97

在IE中会获得

keydown: keyCode is 65 charCode is undefined

keyup: keyCode is 65 charCode is undefined

keypress: keyCode is 97 charCode is undefined

而当按下shift键时,在Firefox中会获得

keydown:keyCode is 16 charCode is 0

keyup: keyCode is 16 charCode is 0

在IE中会获得

keydown:keyCode is 16 charCode is undefined

keyup: keyCode is 16 charCode is undefined

keypress不会获得任何的charCode值,因为按shift并没输入任何的字符,并且也不会触发keypress事务

在keydown事件里面,事件包含了keyCode – 用户按下的按键的物理编码。

在keypress里,keyCode包含了字符编码,即默示字符的ASCII码。如许的情势实用于所有的浏览器 – 除了火狐,它在keypress事务中的keyCode返回值为0。

二.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 只读 与事件关联的抽象视图。等同于发生事件的window对象

IE中event对象的属性

属性/方法 类型 读/写 说明
cancelBubble Boolean 读/写 默认值为false,但将其设置为true就可以取消事件冒泡
returnValue Boolean 读/写 默认值为true,但将其设置为false就可以取消事件的默认行为
srcElement Element 只读 事件的目标
type String 只读 被触发的事件类型

在这里,我们只看所有浏览器都兼容的属性或方法。首先第一个我们了解一下W3C中的target和IE中的srcElement,都表示事件的目标。

function getTarget(evt) {

var e = evt || window.event;

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

}

document.onclick = function (evt) {var target = getTarget(evt); alert(target);};

三、事件流:是描述的从页面接受事件的顺序,当几个都具有事件的元素层叠在一起的时候,那么你点击其中一个元素,并不是只有当前被点击的元素会触发事件,而层叠在你点击范围的所有元素都会触发事件。事件流包括两种模式:冒泡和捕获。

事件冒泡,是从里往外逐个触发。事件捕获,是从外往里逐个触发。那么现代的浏览器默认情况下都是冒泡模型,而捕获模式则是早期的Netscape默认情况。而现在的浏览器要使用DOM2级模型的事件绑定机制才能手动定义事件流模式。

事件对象的键盘事件、event对象和事件流 - 第1张  | 清河洛

document.onclick = function () {alert('我是document');};

document.documentElement.onclick = function () {alert('我是html');};

document.body.onclick = function () {alert('我是body');};

document.getElementById('box').onclick = function () {alert('我是div');};

document.getElementsByTagName('input')[0].onclick = function () {alert('我是input');};

在阻止冒泡的过程中,W3C和IE采用的不同的方法,那么我们必须做一下兼容。

function stopPro(evt) {

var e = evt || window.event;

window.event ? e.cancelBubble = true : e.stopPropagation();

}

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