第十第十讲 行行为事件事件 我们学习图层的相关内容的时候曾经接触了为一个对象如图片、链接等添加一个“行为或称为动作，例如显示隐藏图层、拖动图层等，然后产生一个onMouseOver(鼠标经过)事件的例子。作为一个对于网页设计了解不多，又不了解复杂编程的人来说，Dreamweaver提供的行为工具将是最好的选择。经过这一章节的学习，要求同窗们掌握如何运用系统提供的行为技术来制造一些复杂的网页。主要内容一、运用行为面板 二、运用行为三、引见Dreamweaver提供的行为四、本节小结五、作业运用行为面板 一、引一、引见见几个根本概念几个根本概念1 1、行、行为为的概念的概念行行为为就是一段就是一段JavaScript JavaScript 代代码码，这这些代些代码码放置在放置在文档中文档中执执行特定的行特定的义务义务例如翻开例如翻开阅读阅读器窗口、器窗口、显显示或示或隐隐藏藏层层、播放声音或影片，以、播放声音或影片，以实现实现网网页页的各种特殊的功能。的各种特殊的功能。2 2、行、行为为的根本元素的根本元素在在详细详细操作中：一个行操作中：一个行为为是一个事件和由是一个事件和由该该事件事件触触发发的的动动作作组组成的。因此它的根本元素有两个：成的。因此它的根本元素有两个：一个是事件，一个是一个是事件，一个是动动作。作。3、在网页中怎样运用行为？ 在网页中是经过“行为面板把“行为附加添加到网页元素中来实现各种不同的网页效果。4、什么是事件？事件是阅读器产生的有效信息，也就是说访问者对网页所做的事情。如：onClick 、onMouseOver、 onMouseOut等事件与阅读器的版本有关，每个阅读器都提供一组事件，这些事件可以与“行为面板的动作 (+) 弹出式菜单中列出的动作相关联。阅读器的版本越高，可以运用的事件就越多，反之越少。规范的事件下面引见一些常用的事件。首先，不同版本或不同阅读器对事件的支持是不一样。可以经过设置“显示事件命令来选择对应的阅读器。在运用行为事件时，一定要思索访问者的阅读器的版本和类型，由于低版本的阅读器支持的动作不多。在事件的菜单中可以看到一切的事件，但不是一切的事件都常用，下面引见常用的事件及意义和支持该事件的阅读器。1鼠标类onMouseDown(N4,IE4,IE5):当鼠标键按下时就会发生动作。onMouseMove(N3,IE4,IE5):当鼠标在对象上面挪动时就会发生动作。onMouseOver(N3,N4,IE3,IE4,IE5):当鼠标挪动到对象的范围时发生动作。onMouseOut(N3,N4,IE4,IE5):当鼠标从对象上移开时发生动作。onMouseUp(N4,IE4,IE5):当鼠标左键按下又释放时发生动作。onClick(N3, N4, IE3,IE4,IE5):当鼠标单击对象时发生动作，例如链接、按钮、图片等对象用得较多。onDblClick(N4,IE4,IE5):当鼠标单双对象时发生动作。2键盘类onKeyDown(N4,IE4,IE5):当键盘上的任何一个键被按下时就会发生动作。onKeyPress(N4,IE4,IE5):当键盘上的一个键被按下又释放时发生动作。onKeyUp(N4,IE4,IE5):当键盘上的一个键被按下一段时间并被释放时发生动作。3其它类型事件onLoad(N3,N4, IE3,IE4,IE5):当翻开网页时动作发生。onUnload(N3,N4, IE3,IE4,IE5):当分开网页时动作发生。onScroll(IE4,IE5):当滚动条被挪动时动作发生。onResize(N4,IE4,IE5):当阅读器窗口大小被改动时动作发生。onChange(N3,N4, IE3,IE4,IE5):当阅读者改动了下拉框或文本框中的一个值时动作发生。onFocus(N3,N4, IE3,IE4,IE5):当元素获得焦点时，比如单击了一个文本框时动作发生。onBlur(N3,N4, IE3,IE4,IE5):和onFocus相反，当元素失去焦点时动作发生。5、什么是动作？动作指的是“行为中的JavaScript 代码所执行特定的操作，如翻开阅读器窗口、显示或隐藏层、播放声音等。综上所述，可以得归纳如下几点：“行为是呼应某一“事件而采取的一个“动作；“行为是经过“行为面板来添加到网页元素中；行为中的动作必需求有由与它关联的事件来触发。留意： 行为代码是客户端 JavaScript 代码；即它运转于阅读器中，而不是效力器上。二、翻开行为面板1、 “行为面板假设要翻开“行为面板，请单击“设计面板中的 【行为】 命令。翻开系统的“行为面板如下：面板的主区域或称为行为列表动作请留意提示！已附加的行为会显示在此列表！已附加的行为会显示在此列表！阐明：在上图中，已附加到当前所选网页元素的行为显示在行为列表中面板的主区域，按事件以字母顺序陈列。假好像一个事件有多个动作，那么将以在列表上出现的顺序执行这些动作。假设行为列表中没有显示任何行为，那么没有行为附加到当前所选的网页元素。2、“行为面板具有的选项阐明： 1、动作 (+) 是一个弹出式菜单，其中包含可以附加到当前所选元素的多个动作。当您从此列表中选择某个动作时，将出现一个对话框，您可以在其中指定该动作的参数。假设一切动作都灰显，那么没有所选元素可以执行的动作。 2、删除 (-) 从行为列表中删除所选的事件和动作。3、上下箭头按钮将特定事件的所选动作在行为列表中向上或向下挪动来改动动作执行的顺序。4、事件当您单击行为列表中所选事件称号旁边的箭头按钮时出现的菜单是一个弹出式菜单，其中包含可以触发该动作的一切事件。只需在选择了行为列表中的某个事件时才显示此菜单。根据所选对象的不同，显示的事件也有所不同。假设未显示预期的事件，那么检查能否选择了正确的网页元素。5、显示事件“事件菜单中的子菜单指定当前行为应该在其中起作用的阅读器。通常，较早的阅读器比较新的阅读器支持的事件要少，普通我们选择IE4.0或以上阅读器。6、动作或者称为操作指的是行为菜单中的详细动作。熟习了“行为面板后，下面来讨论如何运用。运用行为一、哪些对象可运用行为 可以将“行为附加到整个文档即附加到 body 标签，还可以附加到链接、图像、图层、表单元素或多种其他 HTML 元素等。特别留意 ： 不能将行为附加到纯文本。二、为网页中的元素附加行为的操作步骤如下：1、在网页上选择一个元素，例如一个图像或一个链接。 假设要将行为附加到整个页，请在文档窗口底部左侧的标签选择器中单击 标签。2 2、单击单击“ “设计设计面板中的面板中的 【行【行为为】 命令。翻开命令。翻开 “ “行行为为面板。面板。3 3、单击单击加号加号 (+) (+) 按按钮钮并从并从“ “动动作作弹弹出式菜出式菜单单中中选选择择一个一个动动作。作。留意：留意：DreamweaverMXDreamweaverMX添加了一添加了一项项所所选选HTMLHTML元素元素的提示功能。的提示功能。详细详细操作操作时时要多留意要多留意这项这项提示！提示！4 4、选择选择某个某个动动作作时时，将出，将出现现一个一个对话对话框，框，显显示示该该动动作的参数和作的参数和阐阐明。明。5 5、为该动为该动作作输输入参数，然后入参数，然后单击单击“ “确定。确定。三、如何将行三、如何将行为为附加到附加到纯纯文本文本操作方法：假操作方法：假设设要将行要将行为为附加到文本，最附加到文本，最简单简单的方法的方法就是向文本添加一个空就是向文本添加一个空链链接在属性面板中的接在属性面板中的链链接接文本框中文本框中输输入入“#“#，然后将行，然后将行为为附加到附加到该链该链接上。接上。Dreamweaver提供的行为引见1、调用Javascript【调用Javascript】行为动作,可以让用户运用行为面板去指定一个自定义功能,或者当一个事件发生时执行一段Javascript代码,详细操作步骤如下:1、在文档窗口中键入中文“封锁窗口，然后将新输入的文本选定。2、为文本添加空链接，在其属性面板的【链接】栏内直接输入“#。3 3、翻开行、翻开行为为面板，面板，单击单击“+“+按按钮钮，从，从动动作作弹弹出的菜出的菜单单中中选择选择【调调用用JavascriptJavascript】命令，翻开【命令，翻开【调调用用JavascriptJavascript】对话对话框，框，如以下如以下图图所示：所示：4 4、键键入将要入将要执执行的行的JavascriptJavascript代代码码或函数或函数名，如名，如“window.close()“window.close()，用来封，用来封锁锁窗口窗口的命令。的命令。单击单击“ “确定按确定按钮钮，完成，完成设设置。置。6 6、在行、在行为为面板中面板中选择选择【onClickonClick】事件。如右事件。如右图图所示。所示。7 7、预览预览网网页页。当。当鼠鼠标标点点击击“ “封封锁锁窗窗口口时时，就会，就会弹弹出出信息框，信息框，讯问讯问用用户户能否封能否封锁锁窗口，翻窗口，翻开如右开如右对话对话框：框：8 8、单击单击“ “是按是按钮钮，将封将封锁锁当前当前阅读阅读器器窗口，否那么回到窗口，否那么回到阅读阅读器窗口。器窗口。2、播放声音 运用【播放声音】动作来播放声音和音乐文件。例如，在页面载入时会自动播放一段动听的音乐，或者当鼠标点击按钮时会发出声音，详细的操作步骤如下：1、翻开一个预参与背景音乐的页面文档，然后翻开行为面板。2、在行为面板中点击“+按钮，从动作弹出的菜单中选择【播放声音】命令，翻开【播放声音】对话框，如以下图所示：3 3、点、点击击“ “阅读阅读按按钮钮选选中一个声音文件，中一个声音文件，或者直接在或者直接在“ “播放声播放声音域中音域中输输入声音文入声音文件的途径和文件名。件的途径和文件名。4 4、单击单击“ “确定按确定按钮钮，完成声音完成声音设设定。定。5 5、在行、在行为为面板中参面板中参与了一个事件与了一个事件为为【onLoadonLoad】，】，动动作作为为【播放声音】，的行【播放声音】，的行为为，如右，如右图图所示：所示：假设不想当网页载入时就播放音乐，而是想当鼠标点击时再播放，只需将事件改为【onClick】即可。3、翻开阅读器窗口 运用打【开阅读器窗口】行为动作，将翻开一个新的阅读器窗口，在其中显示指定的网页文档。用户可以指定这个新窗口的属性，包括窗口尺寸大小、能否可以调理大小、能否有菜单栏等等。在网页中的小图需求放大时，可以运用这个行为，在一个大窗口中放置小图像的放大图，可将窗口设置成与图像大小相吻合的尺寸，将多余的导航栏、地址栏、形状栏、菜单栏等去掉不显示。 留意：假设我们不对窗口属性进展设置，它就会以640480像素大小翻开，而且有导航栏、地址栏、形状栏、菜单栏等。 详细详细的操作步的操作步骤骤如下：如下：1 1、首先在文档中、首先在文档中选选定一幅需求放大的定一幅需求放大的图图像。像。2 2、在行、在行为为面板中点面板中点击击“+“+按按钮钮，从，从动动作作弹弹出菜出菜单单中中选择选择【翻开【翻开阅读阅读器窗口】命令，翻开【翻开器窗口】命令，翻开【翻开阅阅读读器窗口】器窗口】 对话对话框。如以下框。如以下图图：3、点击 按钮以选择图像放大图。其他设置如下：【窗口宽度】确定窗口宽度的像素值。这题我们就以图像的宽度为规范。【窗口高度】确定窗口高度的像素值。这题我们就以图像的高度为规范。【导航工具栏】包括后退、前进、主页、刷新等阅读器按钮的工具栏。【地址工具栏】阅读器中包含网址等工具栏。【形状栏】阅读器窗口底部的区域，显示剩余下载时间，衔接指向的网址等。【菜单条】阅读器窗口主菜单，包括文件、编辑、查看等。4、本例中我们只需求输入图像的放大图的途径和文件名，其他项都不选，单击“确定按钮，完成设置。5、动作设置完成以后，还要对事件进展设置在弹出的事件菜单中选择【onMouseDown】(鼠标左键按下立刻产生动作)6、预览效果。 4、弹出信息 【弹出信息】动作将显示一个指定的Javascript提示信息框。由于Javascript提示信息框只需一个按钮，运用这个动作以提供应用户信息，而不是让它做出选择。在实践网页设计中可以运用这个动作来给阅读者的一些信息提示。下面让我们来看一下设置【弹出信息】动作的详细操作步骤。1、在文档窗口中选定图像，翻开行为面板。2 2、点、点击击“+“+按按钮钮，从，从动动作作弹弹出菜出菜单单中中选择选择【弹弹出信出信息】命令，翻开【息】命令，翻开【弹弹出信息】出信息】对话对话框，如下框，如下图图: :3 3、在【信息】区域内、在【信息】区域内输输入要提示入要提示访问访问者的文本信息，者的文本信息，单击单击“ “确定按确定按钮钮。4 4、在行为面板中选择【、在行为面板中选择【onMouseUponMouseUp】事件】事件( (按按下鼠标左键释放时产生动作下鼠标左键释放时产生动作) )。如以下图。如以下图: :5 5、预览网页。点击鼠标右键会弹出信、预览网页。点击鼠标右键会弹出信息框，如下图。息框，如下图。5、改动属性 运用【改动属性】 动作来改动网页元素的属性的值。例如，可改动图像的来源。下面用“改动图像的来源为例，阐明这个动作的运用详细操作步骤如下：1、首先在文档中插入一幅图像，在属性面板中为其取名为“mark。2、选定该图像，翻开行为面板，点击“+按钮，从弹出菜单中选择【改动属性】命令，翻开【改动属性】对话框，如以下图所示。3、在【对象类型】下拉列表中选择“IMG，这项是针对图像的。如以下图：4、对话框中的【命名对象】变为已命名的图像“mark 。选中！选中！5、对话框中【属性】的选项默许形状是【选择】， 【选择】下拉列表中只需一项“src文件的途径。6、右边下拉列表是支持行为动作的阅读器版本，共有4项选择：NS3、IE3、NS4、IE4。阅读器的版本越早，所支持的行为就越少。留意：对熟习HTML言语的用户可以选择【输入】项，然后在空白栏内设置图像的属性，如border、width、height等。 7 7、假、假设设我我们选择们选择了了“src“src属性，那么在【新的属性，那么在【新的值值】栏栏内内输输入另外的入另外的图图像途径，如以下像途径，如以下图图所示：所示：8 8、单击单击“ “确定按确定按钮钮，完成，完成设设置。置。9 9、在行、在行为为面板中面板中选择选择一个一个“onMouseOver“onMouseOver事件。事件。1010、预览预览网网页页，当鼠，当鼠标经过图标经过图像像时时，就回，就回调调出第二出第二幅幅图图像。像。6、交换图像【交换图像】动作可以将一个图像交换为另一个图像，这是经过改动图像的“src属性到达的，其真实上一个动作“改动属性中曾经引见了如何改动图像的“src属性。留意：运用这个动作要求原始图像和交换图像的尺寸宽和高完全一致，否那么交换图像会发生收缩或放大。详细操作步骤如下：1 1、首先在文档中插入一幅、首先在文档中插入一幅图图像。像。2 2、在属性面板命名文本框中、在属性面板命名文本框中键键入入图图像的称号。像的称号。3 3、选选定将要交定将要交换换的的图图像，翻开行像，翻开行为为面板。面板。4 4、点、点击击“+“+按按钮钮，从，从动动作作弹弹出菜出菜单单中中选择选择【交【交换换图图像】命令，翻开【交像】命令，翻开【交换图换图像】像】对话对话框。如以下框。如以下图图：5、 在【图像】列表中选择要改动的图像。6、点击“阅读按钮来选择交换的图像文件，或者在【设置原始档为】栏内键入新图像的途径和文件名。7、勾选【预先载入图像】选项，以便在页面载入时在阅读器的缓存中存入交换的图像，这样可以防止由于显示交换图像时需求下载而呵斥拖延 。8、勾选【鼠标滑开时恢复图像】选项，实现鼠标分开后，图像恢复为原始图像效果。 9、单击“确定按钮，完成设置。 阐明：以上设置完成以后，行为面板中添加了两个行为：一个是鼠标经过时图像变换，另一个是鼠标分开时恢复原始图像。如以下图：本节小结 知识点1：行为-是呼应某一事件而采取的一个动作。当把行为赋予文档中的某个元素时，也就定义了一个动作。 知识点2：动作- 是行为中的那段Javascript代码，用于完成某一组特定的操作，比如翻开窗口，播放一段音乐等。 知识点3：事件-是由用户或者阅读器触发的事件，比如onMouseOver、onLoad等。 要求：熟练掌握如何运用系统提供的行为技术来制造一些复杂的网页。作业完成今天讲过的行为动作的上机操作。