版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
第十讲行为事件
二我们学习图层的相关内容的时候曾经接触
了为一个对象（如图片、链接等）添加一
个“行为”（或称为动作，例如显示隐藏
.图层、拖动图层等），然后产生一个
onMouseOver（鼠标经过）事件的例子。
作为一个对于网页设计了解不多，又不了解
复杂编程的人来说，Dreamweaver提供的
行为工具将是最好的选择。通过这一章节
的学习，要求同学们掌握如何使用系统提
供的行为技术来制作一些复杂的网页。
使用行为面板
一、介绍几个基本概念
1、行为的概念
行为就是一段JavaScript代码，这些代码
放置在文档中执行特定的任务（例如打开
浏览器窗口、显示或隐藏层、播放声音或
影片），以实现网页的各种特殊的功能。
2、行为的基本元素—
在具体操作中：一个行为是一个事件和由
该事件触发的动作组成的。因此它的基本
元素有两个：一个是事件，一个是动作。
3、在网页中怎样使用行为？
在网页中是通过“行为”面板把“行为”
附加（添加）到网页元素中来实现各种不
-同的网页效果。
4、什么是事件？三三三三三三三三
事件是浏览器产生的有效信息，也就是说访
一问者对网页所做的事情。如：onClick>
onMouseOver>onMouseOut等（事件与
浏览器的版本有关，每个浏览器都提供一
组事件，这些事件可以与“行为”面板的
动作（+）弹出式菜单中列出的动作相关联
O浏览器的版本越高，可以使用的事件就
越多，反之越少。）
■标准的事件
下面介绍一些常用的事件。首先，不同版本
或不同浏览器对事件的支持是不一样。可
以通过设置“显示事件”命令来选择对应
的浏览
3.0和更高版本浏览器
onVnload
4.0和更高版本浏览器
onBeforeUnioad
IE3.0
onDataAvailable
VIE4.0，・*k
、,'r*土•••onDatasetChanged
IE5.0
onDatasetComplete
IE5.5
onDragStart
IE8.0
onErrorUpdate
Netscape3.0
onFilterChange
Netscape4.0
Netscape6.0显不事件
在使用行为事件时，一定要考虑访问者的浏
览器的版本和类型，因为低版本的浏览器
支持的动作不多。在事件的菜单中可以看
到所有的事件，但不是所有的事件都常用,
下面介绍常用的事件及意义和支持该事件
的浏览器。
1)鼠标类—P
onMouseDown(N41E4,IE5):当鼠标键按下时
就会发生动作。
onMouseMove(N3,IE4』E5):当鼠标在对象上
面移动时就会发生动作。
onMouseOver(N3,N4,IE3JE4,IE5):当鼠标移
动到对象的范围时发生动作。
onMouseOut(N3,N4,IE4/E5):当鼠标从对象
上移开时发生动任三三三三三三
onMouseUp(N4,IE41E5):当鼠标左键按下又
释放时发生动作。
onClick(N3,N4JE3JE4JE5):当鼠标单击对
象时发生动作，例如链接、按钮、图片等
对象用得较多。
onDblClick(N4,IE4,IE5):当鼠标单双对象时发
生动作。
2)键盘类
onKeyDown(N4,IE4,IE5):当键盘上的任何一
个键被按下时就会发生动作。
onKeyPress(N4JE4,IE5):当键盘上的一个键
被按下又释放时发生动坛三三=三
onKeyUp(N4JE4,IE5):当键盘上的一个键被
按下一段时间并被释放时发生动作。
3)其它类型事件
onLoad(N3,N4,IE3JE4JE5):当打开网页时动
作发生。
onllnload(N3,N4,IE3JE4JE5):当离开网页时
动作发生。
onScroll(IE4,IE5):当滚动条被移动时动作发生。
onResize(N4,IE4,IE5):当浏览器窗口大小被改
变血动作发生。
onChange(N3,N4"E3,IE4JE5):当浏览者改
变了下拉框或文本框中的一个值时动作发生。
onFocus(N3,N4"E31E4,IE5):当元素获得焦二
点时，比如单击了一个文本框时动作发生。
onBlur(N3,N4"E3JE4,IE5):和onFocus相反，
当元素失去焦点时动作发生。
5、什么是动作？
动作指的是“行为”中的JavaScript代码所
执行特定的操作，如打开浏览器窗口、显
示或隐藏层、播放声音三二=
综上所述，可以得归纳如下几点：“行为”
是响应某一“事件”而采取的一个“动作
”；“行为”是通过“行为”面板来添加
到网页元素中；行为中的动作必须要有由
与它关联的事件来触发。
注意：行为代码是客户端JavaScript代码;
即它运行于浏览器中，而不是服务器上。
二、打开行为面板
1、“行为”面板
若要打开“行为”面板，请单击“设计面板”
中的【行为】命令。打开系统的“行为”面
说明：在上图中，已附加到当前所选网页元素
的行为显示在行为列表中（面板的主区域），
二按事件以字母顺序排列。如果同一个事件有
多个动作，则将以在列表上出现的顺序执行
—这些动作。如果行为列表中没有显示任何行
为，则没有行为附加到当前所选的网页元素。
2、“行为”面板具有的选项说明：一
1）、动作（+）是一个弹出式菜单，其中包含可
以附加到当前所选元素的多个动作。当您从
此列表中选择某个动作时，将出现一个对话
框，您可以在其中指定该动作的参数。如果
所有动作都灰显，则没有所选元素可以执行
的动作。
2）、删除（・）从行为列表中删除所选的事件
和动作。
3）、上下箭头按钮将特定事件的所选动作在
行为列表中向上或向下移动来改变动作执
行的顺序
4）、事件（当您单击行为列表中所选事件名
称旁边的箭头按钮时出现的菜单）是一个
弹出式菜单，其中包含可以触发该动作的
所有事件。只有在选择了行为列表中的某
个事件时才显示此菜单。根据所选对象的
不同，显示的事件也有所不同。如果未显
示预期的事件，则检查是否选择了正确的
网页元素。
5）、显示事件（“事件”菜单中的子
菜单）指定当前行为应该在其中起
作用的浏览器。通常，较早的浏览
器比较新的浏览器支持的事件要少，
一般我们选择IE4.0或以上浏览器。
6）、动作（或者称为操作）指的是行
为菜单中的具体动作。
熟悉了“行为”面板后，下面来讨论
如何应用。
应用行为
一、哪些对象可应用行为
可以将“行为”附加到整个文档（即附加到
body标签），还可以附加到链接、图像、图
层、表单元素或多种其他HTML元素等。
--不能将行为附加到纯文本。~
二、为网页中的元素附加行为的操作步骤如下:
1）、在网页上选择一个元素，例如一个图像或
一个链接。（若要将行为附加到整个页，请
在文档窗口底部左侧的标签选择器中单击
<body>标签。）
2）、单击“设计”面板中的【行为】命令。打开
“行为”面板。一
3）、单击加号（+）按钮并从“动作”弹出式菜单中
选择动作
注意：DreamweaverMX增加了一项所选HTML元素
的提示功能。具体操作时要多留意这项提示！
4）、选择某个动作时，将出现一个对话框，显示该
动作的参数和说明。
5）、为该动作输入参数，然后单击“确定”。
三、如何将行为附加到纯文本
操作方法：若要将行为附加到文本，最简单的方法就
是向文本添加一个空链接（在属性面板中的链接文
本框中输入“#”），然后将行为附加到该链接上。
Dreamweaver提供的行为介绍
1、调用Javasc承=三三^=^^^=^
【调用Javascript】行为动作，能够让用户
使用行为面板去指定一个自定义功能,或
者当一个事件发生时执行一段Javascript
代码,具体操作步骤如下：
1）、在文档窗口中键入中文“关闭窗口”，
然后将新输入的文本选定。
2）、为文本添加空链接，在其属性面板的
【链接】栏内直接输入。
3）、打开行为面板，单击“+”按钮，从动
作弹出的菜单中选择【调用Javascript】
命令，打开【调用Javascript】对话痣，
二如下图所示:==::===:=:
4）、键入将要执行的Javascript代码或函数
名，如“window.close。"，用来关闭窗口
的命令。单击“确定”按钮，完成设置。
▼设计
6）、在行为面板中CSS释式HTML样式雷为
选择【onClick】<a>动作
二事件。如右图所示。事件动作
ck惭meaw
7）、预览网页。当
鼠标点击“关闭窗
口”时，就会弹出
信息框，询问用户
》无标题文档-licrosuftInternetExplorerI_j□JX,
是否关闭窗口，打'郝§回建看收藏⑶TMqi利比」的
开如右对话框：后退a国启.搜索,收藏夹‘
地址，口：画file:"/F：/chm/TMF3hlt58a3co.htm#v。转到1^5
8）、单击“是”按
钮，将关闭当前浏
览器窗口，否则回
到浏览器窗口。
2、播放声音
使用【播放声音】动作来播放声音和音乐
文件。例如，在页面载入时会自动播放一
段动听的音乐L或者当鼠标点击按钮时会
发出声音，具体的操作步骤如下：
1）、打开一个预加入背景音乐的页面文档,
然后打开行为面板。
2）、在行为面板中点击按钮，从动作
弹出的菜单中选择【播放声音】命令，打
开【播放声音】对话框，如下图所示：
、点击“浏览”按
3)播放声音冈
钮选中一个声音文举
确定
或者直接在“播放下播放声音:,,/others./music.rmiE浏览:・二』w
音”域中输入声音3帮助
件的路径和文件名。
二
4）、单击“确定”按CSSf位［HTML样式
钮，完成声音设定。二J二J<body>动作
5）、在行为面板中加序件动作
入了一个事件为
[onLoad],动作为
【播放声音】，的行
为,如右图所示：
如果不想当网页载入时就播放音乐，而是想当鼠标点击时再播
放，只要将事件改为【onClick】即可。
3、打开浏览器窗口
使用打【开浏览器窗口】行为动作，将打开
口一个新的浏览器窗口，在其中显示指定的网
页文档。用户可以指定这个新窗口的属性，
包括窗口尺寸大小、是否可以调节大小、是
否有菜单栏等等。在网页中的小图需要放大
时，可以使用这个行为，在一个大窗口中放
置小图像的放大图，可将窗口设置成与图像
大小相吻合的尺寸，将多余的导航栏、地址
栏、状态栏、菜单栏等去掉不显示。
注意：如果我们不对窗口属性进行设置，它
就会以640X480像素大小打开，而且有导航
栏、地址栏、状态栏、菜单栏等。
具体的操作步骤如下:
1）、首先在文档中选定一幅需要放大的图像。
2）、在行为面板中点击按钮，从动作弹出菜单
中选择【打开浏览器窗口】命令，打开【打开浏
二览器窗口】对话框。如下图：二二二=
打开浏览谣窜口
3）、点击1按钮以选择图像放大图。其
他设置如下:
【窗口宽度】确定窗口宽度的像素值。（这题
我们就以图像的窗度为标准三二^^
【窗口高度】确定窗口高度的像素值。（这题
我们就以图像的高度为标准。）
【导航工具栏】包括后退、前进、主页、刷新
等浏览器按钮的工具栏。
【地址工具栏】浏览器中包含网址等工具栏。
【状态栏】浏览器窗口底部的区域，显示剩余
下载时间，连接指向的网址等。
【菜单条】浏览器窗口主菜单，包括文件、
编辑、查看等。
4）、本例中我们只需要输入图像的放大图
一的路径和文件名，其他项都不选，单击二
“确定”按钮，完成设置。_
5）、动作设置完成以后，还要对事件进行
设置在弹出的事件菜单中选择
[onMouseDown]（鼠标左键按下立即产
生动作）
6）、预览效果。
4、弹出信息
二【弹出信息】孕作将显示一个指定的=
Javascript提示信息框。因为Javascript提
示信息框只有一个按钮，使用这个动作以
提供给用户信息，而不是让它做出选择。
二在实际网页设计中可以使用这个动作来给二
浏览者的一些信息提示。
下面让我们来看一下设置【弹出信息】动作
的具体操作步骤。
1）、在文档窗口中选定图像，打开行为面板。
2）、点击“+”按钮，从动作弹出菜单中选择【弹出信
息】命令，打开【弹出信息】对话框，如图所示：
弹出信息
消息：靖不要衽意下裁此图片?
3）、在【信息】区域内输入要提示访问者的文本信息,
单击“确定”按钮。
4）、在行为面板中选择【onMouseUp】事件（按
二下鼠标左键释放时产生动作）。如下图：
css样式
1J
二J二］＜img＞动作
聿件动作
onfflouseUpE3眸X1出
5）、预览网页。点击鼠标右键会弹出信
息框，如图所示。
口$**也iirm-ietlTn*»rnn<I>pHEIHj
地址冏F\aaa\htm\TMP6m0vaoyt▼P转到随“
清不要任意下载此图片?
确定
理我的电脑
一■N
5、改变属性
使用【改变属性】动作来改变网页
一元素的属性的值。例如，可改变图
像的来源。
下面用“改变图像的来源”为例，说
明这个动作的使用具体操作步骤如
下：
1)、首先在文档中插入一幅图像，在属性
一面板中为其取名为“mark”。
无标蔻文者Cht«/zzz«)
文件区|编辑里查看s插入©修改四文字
标题无.标题文档
源文件
链接©
垂直距1窗口®
口①以水平距i低解析
2）、选定该图像，打开行为面板，点击“+”
按钮，从弹出菜单中选择【改变属性】命令,
_打开【改变属性】对话框，如下图所示。
改变届性
3）、在【对象类型】下拉列表中选择
“IMG,这项是针对图像的”。如下图:
改变属性
确定
取消
帮助
4）、对话框中的【命名对象】变为已命名
的图像“mark”。
5）、对话框中【属性】的选项默认状态是
二【选择】，【选择】下拉列表中只有一
项“src”（文件的路径）二
6）、右边下拉列表是支持行为动作的浏览
二器版本，共有4项选择：NS3、IE3、二
NS4、IE4o浏览器的版本越早，所支持
的行为就越少。
注意：对熟悉HTML语言的用户可以选择
【输入】项，然后在空白栏内设置图像
的属性,如border、width、height等。
7）、假如我们选择了“src”属性，那么在【新的
值】栏内输入另外的图像路径，如下图所示：
改变属性
对象类型:
命名对象:
属性:
O输入
新的值:Jmeiguil.ipg
8）、单击“确定”按钮，完成设置。
9）、在行为面板中选择一个"onMouseOver”事件。
j酝祥至而肛样式后而_
JkLz£<img>珈tjdjJ
事件动作
ESuHSKB
10）、预览网页，当鼠标经过图像时，就回调出第二
幅图像。
6、交换图像
【交换图像】动作可以将一个图像替换为
另一个图像，这是通过改变图像的“src”
一属性达到的，其实在上一个动作“改变
属性”中已经介绍了如何改变图像的
―“src”属性—二
注意：使用这个动作要求原始图像和替换
图像的尺寸（宽和高）完全一致，否则
替换图像会发生收缩或放大。
具体操作步骤如下：
1）、首先在文档中插入一幅图像。
2）、在属
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
评论
0/150
提交评论