JavaScript事件对象
学习要点:
1.事件对象
2.鼠标事件
3.键盘事件
4.W3C与IE
JavaScript事件的一个重要方面是它们拥有一些相对一致的特点,可以给你的开发提供更多的强大功能。最方便和强大的就是事件对象,他们可以帮你处理鼠标事件和键盘敲击方面的情况,此外还可以修改一般事件的捕获/冒泡流的函数。
一.事件对象
事件处理函数的一个标准特性是,以某些方式访问的事件对象包含有关于当前事件的上下文信息。
事件处理三部分组成:对象.事件处理函数=函数。例如:单击文档任意处。
//在页面任意地方单击鼠标触发事件
document.onclick = function () {
alert('Lee');
};
PS:以上程序的名词解释:click表示一个事件类型,单击。onclick表示一个事件处理函数或绑定对象的属性(或者叫事件监听器、侦听器)。document表示一个绑定的对象,用于触发某个元素区域。function()匿名函数是被执行的函数,用于触发后执行。
除了用匿名函数的方法作为被执行的函数,也可以设置成独立的函数。
//在页面任意地方单击鼠标触发事件
document.onclick = box; //直接赋值函数名即可,无须括号
function box() {
alert('Lee');
}
this关键字和上下文
在面向对象那章我们了解到:在一个对象里,由于作用域的关系,this代表着离它最近对象。
这里的this代表的input元素对象,因为input元素对象被onclick绑定了
//<input type="text" value="文本"/>
window.onload = function () { //window.onload事件,等待html执行完成后,执行匿名函数
var input = document.getElementsByTagName('input')[0];
input.onclick = function () {
alert(this.value); //HTMLInputElement,this表示input对象
};
};
从上面的拆分,我们并没有发现本章的重点:事件对象。那么事件对象是什么?它在哪里呢?当触发某个事件时,会产生一个事件对象,这个对象包含着所有与事件有关的信息。包括导致事件的元素、事件的类型、以及其它与特定事件相关的信息。
事件对象
事件对象,我们一般称作为event对象,这个对象是浏览器通过函数把这个对象作为参数传递过来的。那么首先,我们就必须验证一下,在执行函数中没有传递参数,是否可以得到隐藏的参数。
//<input type="text" value="文本"/>
window.onload = function () { //window.onload事件,等待html执行完成后,执行匿名函数
var input = document.getElementsByTagName('input')[0];
box(); function box() { //普通空参函数
alert(arguments.length); //0,没有得到任何传递的参数
} input.onclick = function () { //事件绑定的执行函数
alert(arguments.length); //1,得到一个隐藏参数
};
};
event对象。
这个对象包含着所有与事件有关的信息。包括导致事件的元素、事件的类型、以及其它与特定事件相关的信息。
通过上面两组函数中,我们发现,通过事件绑定的执行函数是可以得到一个隐藏参数的。说明,浏览器会自动分配一个参数,这个参数其实就是event对象。
//<input type="text" value="文本"/>
window.onload = function () { //window.onload事件,等待html执行完成后,执行匿名函数
var input = document.getElementsByTagName('input')[0];
input.onclick = function () {
alert(arguments[0]); //MouseEvent,鼠标事件对象
};
};
事件执行的函数,可以设置一个形式参数,这个形式参数接收到的是浏览器传过来的event对象,也就是MouseEvent,鼠标事件对象
上面这种做法比较累,那么比较简单的做法是,直接通过接收参数来得到即可
//<input type="text" value="文本"/>
window.onload = function () { //window.onload事件,等待html执行完成后,执行匿名函数
var input = document.getElementsByTagName('input')[0];
input.onclick = function (evt) { //接受event对象,名称不一定非要event
alert(evt); //MouseEvent,鼠标事件对象
};
};
直接接收event对象,是W3C的做法,IE不支持,IE自己定义了一个event对象,直接在window.event获取即可。
兼容版本
//<input type="text" value="文本"/>
window.onload = function () { //window.onload事件,等待html执行完成后,执行匿名函数
var input = document.getElementsByTagName('input')[0];
input.onclick = function (evt) {
var e = evt || window.event; //实现跨浏览器兼容获取event对象
alert(e);
};
};
二.鼠标事件
鼠标事件是Web上面最常用的一类事件,毕竟鼠标还是最主要的定位设备。那么通过事件对象可以获取到鼠标按钮信息和屏幕坐标获取等。
1.鼠标按钮
只有在主鼠标按钮被单击时(常规一般是鼠标左键)才会触发click事件,因此检测按钮的信息并不是必要的。但对于onmousedown和onmouseup事件来说,则在其event对象存在一个button属性,表示按下或释放按钮。
button属性,返回鼠标信息的数值
使用方式:
event对象.button
//<input type="text" value="文本"/>
window.onload = function () { //window.onload事件,等待html执行完成后,执行匿名函数
var input = document.getElementsByTagName('input')[0];
input.onmouseup = function (evt) { //当鼠标释放时
var e = evt || window.event; //实现跨浏览器兼容获取event对象
alert(e.button); //button属性,返回鼠标信息的数值
//点击右鼠标返回0
//中鼠标返回1
//左鼠标返回2
//注意:但是IE返回不一样,IE有自己的数值
};
};
非IE(W3C)中的button属性
值 |
说明 |
0 |
表示主鼠标按钮(常规一般是鼠标左键) |
1 |
表示中间的鼠标按钮(鼠标滚轮按钮) |
2 |
表示次鼠标按钮(常规一般是鼠标右键) |
IE中的button属性
值 |
说明 |
0 |
表示没有按下按钮 |
1 |
表示主鼠标按钮(常规一般是鼠标左键) |
2 |
表示次鼠标按钮(常规一般是鼠标右键) |
3 |
表示同时按下了主、次鼠标按钮 |
4 |
表示按下了中间的鼠标按钮 |
5 |
表示同时按下了主鼠标按钮和中间的鼠标按钮 |
6 |
表示同时按下了次鼠标按钮和中间的鼠标按钮 |
7 |
表示同时按下了三个鼠标按钮 |
PS:在绝大部分情况下,我们最多只使用主次中三个单击键,IE给出的其他组合键一般无法使用上。所以,我们只需要做上这三种兼容即可。
鼠标按钮信息兼容
//当用户在页面释放鼠标时,执行匿名函数
document.onmouseup = function (evt) { //设置一个参数接收浏览器传过来的event对象
if (getButton(evt) == 0) { //将接收到的对象传入getButton函数,判断返回0打印里面的字符串
alert('按下了左键!');
} else if (getButton(evt) == 1) { //将接收到的对象传入getButton函数,判断返回1打印里面的字符串
alert('按下了中键!');
} else if (getButton(evt) == 2) { //将接收到的对象传入getButton函数,判断返回2打印里面的字符串
alert('按下了右键!');
}
}; function getButton(evt) { //跨浏览器左中右键单击相应,接收event对象
//如果没有获取到event对象,说明是ie浏览器就用window.event获取
var e = evt || window.event;
if (evt) { //如果event对象为真,
return e.button; //就返回鼠标对应的数值
} else if (window.event) { //判断如果ie方式返回真,就要做兼容,因为IE和w3c标准返回数值代表不同
switch (e.button) { //判断event对象返回值
case 1 : //如果IE方式返回值是1
return 0; //返回w3c标准数值,使其统一
case 4 : //如果IE方式返回值是4
return 1; //返回w3c标准数值,使其统一
case 2 : //如果IE方式返回值是2
return 2; //返回w3c标准数值,使其统一
}
}
}
2.可视区及屏幕坐标
事件对象提供了两组来获取浏览器坐标的属性,一组是页面可视区坐标,另一组是屏幕坐标。
坐标属性
属性 |
说明 |
clientX |
可视区X坐标,距离左边框的位置 |
clientY |
可视区Y坐标,距离上边框的位置 |
screenX |
屏幕区X坐标,距离左屏幕的位置 |
screenY |
屏幕区Y坐标,距离上屏幕的位置 |
clientX属性,可视区X坐标,距离左边框的位置
clientY属性,可视区Y坐标,距离上边框的位置
screenX属性,屏幕区X坐标,距离左屏幕的位置
screenY属性,屏幕区Y坐标,距离上屏幕的位置
使用方式:
event对象.clientX
其他相同
//当用户在页面任意地方点击鼠标,执行匿名函数
document.onclick = function (evt) { //接收一个event对象
//如果无法接收event对象,说明是ie浏览器,就用ie方式获取event对象
var e = evt || window.event;
//打印clientX属性,可视区X坐标,距离左边框的位置加,clientY属性,可视区Y坐标,距离上边框的位置
alert(e.clientX + ',' + e.clientY);
//打印screenX属性,屏幕区X坐标,距离左屏幕的位置加,screenY属性,屏幕区Y坐标,距离上屏幕的位置
alert(e.screenX + ',' + e.screenY);
};
3.修改键
有时,我们需要通过键盘上的某些键来配合鼠标来触发一些特殊的事件。这些键为:Shfit、Ctrl、Alt和Meat(Windows中就是Windows键,苹果机中是Cmd键),它们经常被用来修改鼠标事件和行为,所以叫修改键。
修改键属性
属性 |
说明 |
shiftKey |
判断是否按下了Shfit键 |
ctrlKey |
判断是否按下了ctrlKey键 |
altKey |
判断是否按下了alt键 |
metaKey |
判断是否按下了windows键,IE不支持 |
shiftKey判断是否按下了Shfit键
ctrlKey判断是否按下了ctrlKey键
altKey判断是否按下了alt键
metaKey判断是否按下了windows键,IE不支持
使用方式:
event对象.shiftKey
其他相同
//当用户在页面任意地方点击是,执行匿名函数
document.onclick = function (evt) { //接收一个参数event对象
alert(getKey(evt)); //执行函数打印,将event对象当做参数传入函数
}; function getKey(evt) { //定义函数,接收event对象
//如果浏览器不支持直接获取event对象,说明是IE浏览器就用window.event获取event对象
var e = evt || window.event;
var keys = []; //创建一个空数组 if (e.shiftKey) keys.push('shift'); //判断如果用户按下了shift键,向数组里添加一个元素
if (e.ctrlKey) keys.push('ctrl'); //判断如果用户按下了ctrl键,向数组里添加一个元素
if (e.altKey) keys.push('alt'); //判断如果用户按下了alt键,向数组里添加一个元素 return keys; //返回数组
}
三.键盘事件
用户在使用键盘时会触发键盘事件。“DOM2级事件”最初规定了键盘事件,结果又删除了相应的内容。最终还是使用最初的键盘事件,不过IE9已经率先支持“DOM3”级键盘事件。
1.键码
在发生onkeydown和onkeyup事件时,event对象的keyCode属性中会包含一个代码,与键盘上一个特定的键对应。对数字字母字符集,keyCode属性的值与ASCII码中对应小写字母或数字的编码相同。字母中大小写不影响。也就是每一个键对应一个数字
keyCode属性,返回按键对应的按键码,注意:事件要是键盘事件如onkeydown
使用方式:
event对象.keyCode
//当用户按下任意键时,执行匿名函数
document.onkeydown = function (evt) { //接收event对象
//如果无法直接获取event对象,说明是IE浏览器就用IE的方法window.event获取event对象
var e = evt || window.event;
alert(e.keyCode); //打印按键对应的数字码
};
不同的浏览器在onkeydown和onkeyup事件中,会有一些特殊的情况:
在Firefox和Opera中,分号键时keyCode值为59,也就是ASCII中分号的编码;而IE和Safari返回186,即键盘中按键的键码。
PS:其他一些特殊情况由于浏览器版本太老和市场份额太低,这里不做补充。
2.字符编码
Firefox、Chrome和Safari的event对象都支持一个charCode属性,这个属性只有在发生onkeypress事件时才包含值,而且这个值是按下的那个键所代表字符的ASCII编码。此时的keyCode属性通常等于0或者也可能等于所按键的编码。IE和Opera则是在keyCode属性中保存字符的ASCII编码。
charCode属性,字符键所代表字符的ASCII编码,注意:事件要是onkeypress键盘事件如onkeypress,
使用方式:
event对象.charCode
//当用户按下字符键时,执行匿名函数
document.onkeypress = function (evt) { //接收event对象
//如果无法直接获取event对象,说明是IE浏览器就用IE的方法window.event获取event对象
var e = evt || window.event;
alert(e.charCode); //打印字符键所代表字符的ASCII编码
};
字符按键支持所有浏览器兼容
window.onload = function () { //window.onload事件,等待html执行完成后,执行匿名函数
//当用户按下字符键时,执行匿名函数
document.onkeypress = function (evt) { //接收event对象
alert(getCharCode(evt)); //执行兼容函数 function getCharCode(evt) { //接收event对象
//如果无法直接获取event对象,说明是IE浏览器,就用IE的window.event获取event对象
var e = evt || window.event;
//判断event对象的charCode属性如果是数字类型
if (typeof e.charCode == 'number') {
//执行charCode属性
return e.charCode;
} else {
//否则执行keyCode属性
return e.keyCode;
}
} };
};
可以使用String.fromCharCode()将ASCII编码转换成实际的字符。
window.onload = function () { //window.onload事件,等待html执行完成后,执行匿名函数
//当用户按下字符键时,执行匿名函数
document.onkeypress = function (evt) { //接收event对象
alert(String.fromCharCode(getCharCode(evt))); //将返回的ASCII编码转换成实际的字符 function getCharCode(evt) { //接收event对象
//如果无法直接获取event对象,说明是IE浏览器,就用IE的window.event获取event对象
var e = evt || window.event;
//判断event对象的charCode属性如果是数字类型
if (typeof e.charCode == 'number') {
//执行charCode属性
return e.charCode;
} else {
//否则执行keyCode属性
return e.keyCode;
}
} };
};
keyCode属性和charCode属性区别如下:比如当按下“a键(重视是小写的字母)时,
在Firefox中会获得
onkeydown: keyCode is 65 charCode is 0
onkeyup: keyCode is 65 charCode is 0
onkeypress: keyCode is 0 charCode is 97
在IE中会获得
onkeydown: keyCode is 65 charCode is undefined
onkeyup: keyCode is 65 charCode is undefined
onkeypress: keyCode is 97 charCode is undefined
而当按下shift键时,在Firefox中会获得
onkeydown:keyCode is 16 charCode is 0
onkeyup: keyCode is 16 charCode is 0
在IE中会获得
onkeydown:keyCode is 16 charCode is undefined
onkeyup: keyCode is 16 charCode is undefined
onkeypress:不会获得任何的charCode属性值,因为按shift并没输入任何的字符,并且也不会触发onkeypress事务
PS:在onkeydown事务里面,事务包含了keyCode属性 – 用户按下的按键的物理编码。
在onkeypress里,keyCode属性包含了字符编码,即默示字符的ASCII码。如许的情势实用于所有的浏览器 – 除了火狐,它在onkeypress事务中的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 |
AbstractView |
只读 |
与事件关联的抽象视图。等同于发生事件的window对象 |
IE中event对象的属性
属性 |
类型 |
读/写 |
说明 |
cancelBubble |
Boolean |
读/写 |
默认值为false,但将其设置为true就可以取消事件冒泡 |
returnValue |
Boolean |
读/写 |
默认值为true,但将其设置为false就可以取消事件的默认行为 |
srcElement |
Element |
只读 |
事件的目标 |
type |
String |
只读 |
被触发的事件类型 |
在这里,我们只看所有浏览器都兼容的属性或方法,也就是按照IE的来做兼容,因为IE有的,w3c都有,w3c有的IE不一定有
首先第一个我们了解一下W3C中的target和IE中的srcElement,都表示事件的目标。
srcElement属性,是IE中event对象的属性,获取事件event对象的标签节点
target属性,是W3C中event对象的属性,获取事件event对象的标签节点
所以要做兼容
//当用户在页面任意地方单击鼠标时,激发匿名函数
document.onclick = function (evt) { //接收事件的event对象
var target = getTarget(evt); //将event对象传入函数执行自定义函数,将函数赋值给一个变量
alert(target.tagName); //打印event对象里获取到的元素标签名称
}; function getTarget(evt) { //自定义函数
//如果无法直接获取event对象,说明是IE浏览器,就用IE的window.event获取event对象
var e = evt || window.event;
//兼容方式获取到event对象事件的元素标签节点,也就是目标
return e.target || e.srcElement;
}
通过事件得到元素节点后,可以对元素进行读写等操作
事件流
事件流是描述的从页面接受事件的顺序,当几个都具有事件的元素层叠在一起的时候,那么你点击其中一个元素,并不是只有当前被点击的元素会触发事件,而层叠在你点击范围的所有元素都会触发事件。事件流包括两种模式:冒泡和捕获。
事件冒泡,是从里往外逐个触发。事件捕获,是从外往里逐个触发。那么现代的浏览器默认情况下都是冒泡模型,而捕获模式则是早期的Netscape默认情况。而现在的浏览器要使用DOM2级模型的事件绑定机制才能手动定义事件流模式。事件流模式讲到事件绑定机制后在说
冒泡模式
// <body>
// <div id="box" style="background-color: #ff0f20;width: 200px;height: 200px;">
// <input type="button" value="确定">
// </div>
// </body>
window.onload = function () { //window.onload事件,等待html执行完成后,执行匿名函数
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');
};
};
//当点击一个元素时,会冒泡向外激发事件,也就是点击一个元素激发事件后会自动激发父元素的事件
cancelBubble属性,是IE中event对象的属性,默认值为false,但将其设置为true就可以取消事件冒泡
stopPropagation()方法,是W3C中event对象的方法,取消事件的进一步捕获或冒泡。
取消冒泡模式:要在哪个元素取消,就在哪个元素执行取消冒泡函数
// <body>
// <div id="box" style="background-color: #ff0f20;width: 200px;height: 200px;">
// <input type="button" value="确定">
// </div>
// </body>
window.onload = function () { //window.onload事件,等待html执行完成后,执行匿名函数
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 (evt) {
//执行取消冒泡函数
stopPro(evt); //将event对象传入函数
alert('我是input');
};
};
//当点击一个元素时,会冒泡向外激发事件,也就是点击一个元素激发事件后会自动激发父元素的事件 //在阻止冒泡的过程中,W3C和IE采用的不同的方法,那么我们必须做一下兼容。
function stopPro(evt) { //取消冒泡函数
//如果无法直接获取event对象,说明是IE浏览器,就用IE的window.event获取event对象
var e = evt || window.event;
//如果window.event获取event对象能执行就用cancelBubble = true取消冒泡,否则就用stopPropagation()取消冒泡
window.event ? e.cancelBubble = true : e.stopPropagation();
}