6.1 JavaScript事件处理
6.1.1 事件与事件名称
事件是一些可以通过脚本响应的页面动作。当用户按下鼠标键或者提交一个表单，甚至在页面上移动鼠标时，事件就会出现。事件处理是一段JavaScript代码，总是与页面中的特定部分以及一定的事件相关联。当与页面特定部分关联的事件发生时，事件处理器就会被调用。
绝大多数事件的命名都是描述性的，很容易理解。例如click、submit、mouseover等，通过名称就可以猜测其含义。但也有少数事件的名称不易理解，例如blur（英文的字面意思为“模糊”），表示一个域或者一个表单失去焦点。通常，事件处理器的命名原则是，在事件名称前加上前缀on。例如，对于click事件，其处理器名为onClick。
6.1.2 JavaScript的常用事件
为了便于读者查找JavaScript中的常用事件，下面以表格的形式对各事件进行说明。JavaScript的相关事件如表6.1所示。
表6.1 JavaScript的相关事件
续表
续表
【例6.1】在页面中单击某个位置，会弹出对话框，显示被触发的事件类型。（实例位置：光盘\TM\sl\6\1）
（1）创建一个名称为index.html的文件。
（2）在页面的<body>标记中，定义onmousedown事件的处理函数为getEventType()，参数event是Event对象。具体代码如下：
<body onmousedown="getEventType(event)">
<h3 class="title">JavaScript事件类型</h3>
<p>在页面中单击某个位置，会弹出对话框，显示被触发的事件类型。</p>
</body>
（3）在页面的<head>标记内，编写getEventType()函数，调用alert()方法显示event.type属性，代码如下：
<script type="text/javascript">
function getEventType(){
alert(event.type); //弹出提示框，显示事件类型
}
</script>
运行本实例，单击页面主体位置，运行结果如图6.1所示。
图6.1 弹出事件类型提示框
6.1.3 event对象
JavaScript的event对象用来描述JavaScript的事件，它主要作用于IE和NN4以后的各个浏览器版本中。event对象代表事件状态，如事件发生的元素、键盘状态、鼠标位置和鼠标按钮状态。一旦事件发生，便会生成event对象，如单击一个按钮，浏览器的内存中就产生相应的event对象。
event对象具有以下属性。
（1）altLeft属性
用于设置或获取左Alt键的状态。检索左Alt键的当前状态，返回值true表示关闭，false为不关闭。
语法：
[window.]event. altLeft
由于altLeft属性是boolean值，因此可以将该属性应用到if语句中，根据获取的值不同而执行不同的操作。
（2）ctrlLeft属性
用于设置或获取左Ctrl键的状态。检索左Ctrl键的当前状态，返回值true表示关闭，false为不关闭。
语法：
[window.]event. ctrlLeft
由于ctrlLeft属性是boolean值，因此可以将该属性应用到if语句中，根据获取的值不同而执行不同的操作。
（3）shiftLeft属性
用于设置或获取左Shift键的状态。检索左Shift键的当前状态，返回值true表示关闭，false为不关闭。
语法：
[window.]event. shiftLeft
由于这3个属性的值同样也都是boolean类型的，所以也可以将它们组合成一个条件在if语句中应用，并且也可以和altKey、ctrlKey和shiftKey属性同时使用。
（4）button属性
用于设置或获取事件发生时用户所单击的鼠标键。
语法：
[window.]event.button
该属性的值如表6.2所示。
表6.2 button属性的值和说明
当用户按下多个键时，每次按键都激活一个onmousedown事件。如果用户首先单击左键，则onmousedown事件激活，event.button属性值为1；如果此时单击右键，那么onmousedown事件再次发生，但event.button属性值为3。如果脚本同时按下两个按键执行特殊动作，那么就应该忽略单一按键动作，因为在处理过程中很可能激活单键事件，从而干扰目标行为。
注意
button属性仅用于onmousedown、onmouseup和onmousemove事件。对于其他事件，无论鼠标状态如何，都返回0（例如：onclick）。
（5）clientX属性
用于获取鼠标在浏览器窗口中的X坐标，该属性是一个只读属性，即只能获取到鼠标的当前位置，不能改变鼠标的位置。
语法：
[window.]event. clientX
（6）clientY属性
用于获取鼠标在浏览器窗口中的Y坐标，该属性是一个只读属性，即只能获取到鼠标的当前位置，不能改变鼠标的位置。
语法：
[window.]event. clientY
（7）X属性
用于设置或获取鼠标指针位置相对于CSS属性中有position属性的上级元素的X轴坐标。如果没有CSS属性中有position属性的上级元素，默认以body元素作为参考对象。
语法：
[window.]event. X
如果鼠标事件触发后，鼠标移出窗口外，则返回的值为-1。这是个只读属性，只能通过它获取鼠标的当前位置，却不能用它来更改鼠标的位置。
（8）Y属性
用于设置或获取鼠标指针位置相对于CSS属性中有position属性的上级元素的Y轴坐标。如果没有CSS属性中有position属性的上级元素，默认以body元素作为参考对象。
语法：
[window.]event. Y
如果鼠标事件触发后，鼠标移出窗口外，则返回的值为-1。这是个只读属性，只能通过它获取鼠标的当前位置，却不能用它来更改鼠标的位置。
（9）cancelBubble属性
用于检测是否接受上层元素的事件的控制。如果该属性的值是false，则允许被上层元素的事件控制；否则值为true，不被上层元素的事件控制。
语法：
[window.] event.cancelBubble[ = cancelBubble]
该属性的值是一个可读写的布尔值，默认值是false。
（10）srcElement属性
用于设置或获取触发事件的对象。srcElement属性是事件初始目标的HTML元素对象引用。由于事件通过元素容器层次气泡，可以在任何一个层次进行处理，因此由一个属性指向产生初始事件的元素是很有帮助的。
语法：
[window.]event. srcElement
通过该属性可以读、写属于该元素的属性，并调用它的任何方法。
【例6.2】将altKey、ctrlKey和shiftKey属性进行组合，组成一个综合的条件，应用if语句判断当Ctrl键、Shift键和Alt键同时被按下时执行一个操作。（实例位置：光盘\TM\sl\6\2）
（1）创建一个名称为index.html的文件。
（2）在页面的<head>标记内，编写example ()函数，判断Ctrl、Shift和Alt按键是否被同时按下，如果同时按下，则弹出提示对话框并且将页面跳转至index_ok.html文件。令用户按下键盘按键时调用example ()函数，代码如下：
<script>
function example(){ //创建自定义函数
//应用if语句判断Ctrl键、Shift键和Alt键是否同时被按下
if(window.event.ctrlKey && window.event.altKey && window.event.shiftKey){
//如果Ctrl键、Shift键和Alt键同时被按下，则执行下面的内容
alert(’明日科技，给您拜年了！'); //弹出一个对话框
window.location.href='index_ok.html'; //连接到一个文件
}
}
document.onkeydown=example; //应用onkeydown事件输出自定义函数example中的内容
</script>
运行本实例，单击页面主体位置，运行结果如图6.2所示。
图6.2 altKey、ctrlKey和shiftKey属性的综合应用