第3章〓JavaScript事件处理



视频讲解


用户可以通过多种方式与浏览器中的页面进行交互，而事件是交互的桥梁。Web应用程序开发人员通过JavaScript脚本内置的和自定义的事件处理器来响应用户的动作，就可以开发出更具交互性、动态性的页面。

本章主要介绍 JavaScript 脚本中的事件处理的概念、方法，列出了 JavaScript预定义的事件处理器，并且介绍了如何编写用户自定义的事件处理函数以及如何将它们与页面中用户的动作相关联，以得到预期的交互性能。

3．1JavaScript事件的基本概念

事件是指 JavaScript 捕获到用户的操作，并做出正确的响应。例如，用户单击鼠标弹出一个窗口，把鼠标移动到某个元素上产生变化。事件处理是JavaScript的一个优势，可以很方便地针对某个HTML事件编写程序进行处理。

3．1．1事件类型

JavaScript支持丰富的事件类型，能使Web开发更加快速和简洁。JavaScript所支持的事件可以分为以下5类。

1． 窗口事件(Window Events)

仅在body和frameset元素中有效，窗口事件如表31所示。


表31窗口事件


事件说明


onload当网页被载入时执行脚本

onunload当网页被关闭时执行脚本


2． 表单元素事件(Form Element Events)

仅在表单元素中有效，表单元素事件如表32所示。


表32表单元素事件


事件说明


onchange当元素(文本框、复选框等)改变时执行脚本

onsubmit当表单(form)被提交时执行脚本

onreset当表单被重置时执行脚本

onselect当元素被选取时执行脚本

onblur当元素失去焦点时执行脚本

onfocus当元素获得焦点时执行脚本






3． 图像事件(Image Events)

该属性可用于img元素，图像事件如表33所示。


表33图像事件


事件说明


onabort当图像加载中断时执行脚本


4． 键盘事件(Keyboard Events)

在下列元素中无效： base、bdo、br、frame、frameset、head、html、iframe、meta、param、script、style 以及title元素，键盘事件如表34所示。


表34键盘事件


事件说明


onkeydown当键盘被按下时执行脚本

onkeypress当键盘被按下后又松开时执行脚本

onkeyup当键盘被松开时执行脚本


5． 鼠标事件(Mouse Events)

在下列元素中无效： base、bdo、br、frame、frameset、head、html、iframe、meta、param、script、style以及title元素，鼠标事件如表35所示。


表35鼠标事件


事件说明


onclick当鼠标被单击时执行脚本

ondblclick当鼠标被双击时执行脚本

onmousedown当鼠标按钮被按下时执行脚本

onmousemove当鼠标指针移动时执行脚本

onmouseout当鼠标指针移出某元素时执行脚本

onmouseover当鼠标指针悬停于某元素之上时执行脚本

onmouseup当鼠标按钮被松开时执行脚本


3．1．2JavaScript处理事件的基本机制

JavaScript处理事件的基本机制如下。

(1) 对DOM元素绑定事件处理函数。

(2) 监听用户的操作。

(3) 当用户在相应的DOM元素上进行与绑定事件对应的操作时，浏览器调用事件处理函数作出响应。

(4) 将处理结果更新到 HTML 文档。

JavaScript处理事件的过程如图31所示。




图31JavaScript处理事件的过程


3．2JavaScript绑定事件的方法

JavaScript事件一般与DOM元素绑定。要想让 JavaScript 对用户的操作作出响应，首先要对 DOM 元素绑定事件处理函数。所谓事件处理函数，就是处理用户操作的函数，不同的操作对应不同的名称。

在JavaScript中，有以下三种常用的绑定事件的方法。

1． 在DOM元素中直接绑定

这里的DOM元素可以理解为HTML标记。JavaScript支持在标记中直接绑定事件，语法如下： 


onXXX="JavaScript Code"

其中，onXXX为事件名称。例如，鼠标单击事件onclick、鼠标双击事件ondouble、鼠标移入事件onmouseover、鼠标移出事件onmouseout等。

JavaScript Code为处理事件的JavaScript代码，一般是函数。例如，单击一个按钮，弹出警告框的代码有如下两种写法。

(1) 原生函数。


<input  onclick="alert('谢谢支持')"  type="button"  value="单击我，弹出警告框" />

(2) 自定义函数。


<input  onclick="myAlert()"  type="button"  value="单击我，弹出警告框" />

<script type="text/javascript">

function myAlert(){

alert("谢谢支持");

}

</script>

2． 在JavaScript代码中绑定

在JavaScript代码中(即<script>标记内)绑定事件可以使JavaScript代码与HTML标记分离，文档结构清晰，便于管理和开发。
在JavaScript代码中绑定事件的语法如下： 


elementObject.onXXX=function(){

//事件处理代码

}

其中，elementObject为DOM对象(即DOM元素)，onXXX为事件名称。

例如，为id="demo"的按钮绑定一个事件，显示它的type属性。


<input  id="demo"  type="button"  value="单击我，显示 type 属性" />

<script type="text/javascript">

document.getElementById("demo").onclick=function(){

alert(this.getAttribute("type"));   //this指当前发生事件的HTML元素，这里是	    <input>

//标记

}

</script>

3． 绑定事件监听函数

绑定事件的另一种方法是用addEventListener()函数或attachEvent()函数来绑定事件监听函数，addEventListener()函数的语法如下： 


elementObject.addEventListener(eventName,handle,useCapture);

addEventListener()函数的参数如表36所示。


表36addEventListener()函数的参数


参数说明


elementObjectDOM对象(即DOM元素)

eventName事件名称。注意，这里的事件名称没有"on"，如鼠标单击事件click、鼠标双击事件doubleclick、鼠标移入事件 mouseover、鼠标移出事件mouseout等

handle事件句柄函数，即用来处理事件的函数

useCaptureBoolean类型，是否使用捕获，一般用False。这涉及JavaScript事件流的概念False表示在冒泡阶段完成事件处理； 将其设置为True时，表示在捕获阶段完成事件处理


例如，使用addEventListener()函数为id="demo"的按钮绑定一个单击事件，显示Hello弹窗。


<input  id="demo"  type="button"  value="单击我，显示Hello" />

<script type="text/javascript">

var button1=document.getElementById("demo");

button1.addEventListener("click",myAlert);

function myAlert(){

alert("Hello");

}

</script>

注意：事件句柄函数是指“函数名”，不能带小括号。另外早期版本的IE浏览器(IE 8．0及其以下版本)使用attachEvent()函数来绑定事件监听函数。

3．3JavaScript事件的event对象

event对象是JavaScript中一个非常重要的对象，用来表示当前事件。event对象的属性和方法包含了当前事件的状态。event对象只在事件发生的过程中才有效。

当前事件是指正在发生的事件。状态是与事件有关的性质，如引发事件的DOM元素、鼠标的状态、按下的键等。

3．3．1获取event对象

在W3C规范中，event 对象是随事件处理函数传入的。Edge、Chrome、FireFox、Opera、Safari、IE 9以上都支持这种方式。在遵循W3C规范的浏览器中，event对象通过事件处理函数的参数传入。


elementObject.OnXXX=function(e){

var eve=e; //声明一个变量来接收 event 对象

}

上面绑定的事件处理函数中，参数 e 用来传入event对象。要想获取与当前事件有关的状态，如发生事件的DOM元素、鼠标坐标、键盘按键等，可以通过参数 e获取。event对象常用属性和方法如表37所示。


表37event对象常用属性和方法




属性/方法描述


event．type被触发事件的类型。例如，触发button的click事件，那event．type的值就为"click"

event．target本次事件中的目标元素。因为事件流机制的存在，当单击button时，会按照不同的顺序触发其他元素的事件，在这个过程中，被单击的button元素就是事件中的目标元素

event．currentTarget本次事件中当前正在处理的元素。按照事件冒泡或者捕获的顺序处理到哪个元素的事件，哪个元素就是当前正在处理的元素

event．cancelable表示是否可以取消事件的默认行为。True表示可以取消事件的默认行为

event．preventDefault()调用该方法可以取消事件的默认行为，但是前提是event．cancelable的值为True

event．bubbles表明事件是否冒泡

event．stopPropagation()调用该方法可以取消事件的下一步冒泡，但前提是event．bubbles的值为True


例如，要取得发生事件时鼠标的坐标，可以这样写： 


<div id="demo">在这里单击</div>

<script type="text/javascript">

document.getElementById("demo").onclick=function(e){

var eve=e;

var x=eve.x; //X坐标

var y=eve.y;  //Y坐标

alert("X坐标："+x+"＼nY坐标："+y);

}

</script>

例如，要取得发生键盘事件时按键信息，可以这样写： 


document.onkeydown=function(e){

alert("按键是："+e.keyCode);//按任意键，得到相应的keyCode(ASCII 中的编码)

};

3．3．2JavaScript获取鼠标坐标

鼠标坐标包括X坐标、Y坐标、相对于浏览器客户端的坐标、相对于屏幕的坐标等。在JavaScript中，鼠标坐标是作为event对象的属性存在的。event 对象中有关鼠标坐标的属性如表38和表39所示。


表38W3C规范所规定的属性


属性描述


clientX鼠标指针相对客户端(即浏览器文档区域)的水平坐标

clientY鼠标指针相对客户端(即浏览器文档区域)的垂直坐标

screenX鼠标指针相对计算机屏幕的水平坐标

screenY鼠标指针相对计算机屏幕的垂直坐标




表39IE浏览器的特有属性


属性描述


offsetX发生事件的地点在事件源元素的坐标系统中的水平坐标

offsetY发生事件的地点在事件源元素的坐标系统中的垂直坐标

x事件发生的位置的水平坐标，它们相对于用CSS动态定位的最内层包容元素

y事件发生的位置的垂直坐标，它们相对于用CSS动态定位的最内层包容元素


【例31】获取鼠标的坐标信息。


<html>

<head>

<title>获取鼠标的坐标信息</title>

</head>

<body>

<div id="demo">单击这里</div>

<script type="text/javascript">

document.getElementById("demo").onclick=function(e){

var eve=e;

var x=eve.clientX,    //相对于客户端的X坐标

y=eve.clientY,    //相对于客户端的Y坐标

x1=eve.screenX,  //相对于计算机屏幕的X坐标

y1=eve.screenY;  //相对于计算机屏幕的Y坐标

alert(

"相对客户端的坐标：＼n"+

"x="+x+"＼n"+

"y="+y+"＼n＼n"+

"相对屏幕的坐标：＼n"+

"x="+x1+"＼n"+

"y="+y1

);

}

</script>

</body>

</html>

3．3．3JavaScript获取事件源

事件源是指发生事件的DOM节点(HTML元素)。

事件源是作为event对象的属性存在的。在W3C规范中，这个属性是 target。

【例32】获取事件源。


<html>

<head>

<title>获取事件源</title>

</head>

<body>

<div id="demo">单击这里</div>

<script type="text/javascript">

document.getElementById("demo").onclick=function(e){

var srcNode=e.target;  

alert(srcNode);

}

</script>

</body>

</html>

3．4JavaScript取消浏览器默认动作

默认动作是指浏览器所执行的用户没有明确指定的操作。对于某些HTML标记，浏览器总会有一个默认的动作。浏览器的默认动作是可以通过 JavaScript 来取消的。

例如，<a href="http://www．baidu．com" target="_blank">单击这里进入百度</a>，
单击上面的链接，浏览器会弹出窗口，进入百度首页。这个动作就是浏览器的默认动作，单击一个<a>标记会转向目标页面。

其他浏览器默认动作包括： 单击提交按钮提交表单、单击重置按钮重置表单、把鼠标移动到带有title属性的元素上出现提示等。

对于遵循W3C规范的浏览器，使用event对象的preventDefault()方法来取消默认动作。

【例33】取消<a>标记的默认动作。


<html>

<head>

<title>取消<a>标记的默认动作</title>

</head>

<body>

<a id="demo" href="http://www.baidu.com" target="_blank">单击这里试试</a>

<script type="text/javascript">

document.getElementById("demo").onclick=function(e){

var eve=e;

eve.preventDefault();  

}

</script>

</body>

</html>

浏览页面，单击<a>标记给的链接地址本来会跳转到百度首页，但是用JavaScript取消了跳转，所以单击后没效果。