JavaScript程序设计(第2版)01.事件的基本概念

JavaScript的相关事件
为了便于读者查找JavaScript中的所有事件，下面以表格的形式对各事件进行说明。 如表6-1所示。
表6-1
JavaScript的相关事件
表6-1
JavaScript的相关事件
表6-1
JavaScript的相关事件
下面对JavaScript中的主要事件进行一下讲解及应用。
alert("谢谢浏览"); </script>
（3）在JavaScript中说明 该方法是在JavaScript脚本中直接对各对象的事件及事件所调用的函数进行声明，不用在HTML标记中指定 要执行的事件。
语法：
<事件主角 - 对象>.<事件> = <事件处理程序>;
例如，直接在JavaScript脚本中执行按钮的单击事件，而不用在按钮的<input>标记中调用单击 事件。该例将pp()函数定义为Button按钮的onclick事件的处理过程。代码如下：
事件的基本概念
本讲大纲：
1、 什么是事件 2、事件处理程序的调用 3、JavaScript的相关事件
什么是事件
通常，我们将鼠标或键盘在网页对象上的动作称为“事件 ”，而由鼠标或键盘引发的一连串程序的动作称为“事件驱 动”，对事件进行处理的程序或函数称为“事件处理程序” 。它们之间的关系如图6-1所示。
<input type="button" name="Button" value="Button"> <script language="javascript">
function pp(){ alert("我喜欢学习JavaScript");
} Button.onclick=pp; </script>
</form>
运行结果如图6-4、图6-5和图6-6所示。6-6 改变文本的字体样式
（2）指定特定对象的特定事件 该 <s方cr法ip是t>在和Ja<v/asSccrriipptt>的标<记sc中rip编t>写标事记件中处指理定程特序定代的码对。象，以及该对象要执行的事件名称，并在
<form name="form1" method="post" action="">
JavaScript很好学 </form> <form name="form2" method="post" action=""> <input type="button" name="Button" value="确定" onclick="Sfont=prompt('请在文本框中输入红色',' ','提示框');if (Sfont=='红色 '){form1.style.fontFamily='黑体';form1.style.color='red';}">
语法：
<script language="JavaScript" for="对象" event="事件"> …
//事件处理程序代码 …
</script>
例如，用<script>和</script>标记来完成页面加载和关闭时显示对话框。代码如下：
<script language="javascript" for="window" event="onload"> alert("欢迎进入本网页"); </script> <script language="javascript" for="window" event="onunload">
JavaScript函数
事件处理
浏览器对象 作用在对象上的事件
用户与网页交互操作
图6-1 网页浏览器对象、事件及函数之间的关系
例6-2 在“确定”按钮的单击事件中，用多行代码改变页面中“JavaScript很好学”文本的字体样式 。其操作过程是在页面加载后，文本会以“宋体”格式进行显示，在单击“确定”按钮后，将弹出一个输 入提示框，向该提示框的文本框中输入“红色”，单击“确定”按钮，这时，将关闭提示框，将页面中的 文本以红色的黑体文字格式进行显示。代码如下：