第十讲 行为事件
我们学习图层的相关内容的时候曾经接触
了为一个对象(如图片、链接等)添加一
个“行为”(或称为动作,例如显示隐藏
图层、拖动图层等),然后产生一个
onMouseOver(鼠标经过 )事件的例子。
作为一个对于网页设计了解不多,又不了解
复杂编程的人来说,Dreamweaver提供的
行为工具将是最好的选择。通过这一章节
的学习,要求同学们掌握如何使用系统提
供的行为技术来制作一些复杂的网页。
主要内容
一、使用行为面板
二,应用行为
三、介绍 Dreamweaver提供的行为
四、本节小结
五、作业
使用行为面板
一、介绍几个基本概念
1、行为的概念
行为 就是一段 JavaScript 代码,这些代码
放置在文档中执行特定的任务(例如打开
浏览器窗口、显示或隐藏层、播放声音或
影片),以实现网页的各种特殊的功能。
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)、在网页上选择一个元素,例如一个图像或
一个链接。 (若要将行为附加到整个页,请
在文档窗口底部左侧的标签选择器中单击
<body> 标签。)
2)、单击“设计”面板中的 【 行为 】 命令。打开
“行为”面板。
3)、单击加号 (+) 按钮并从“动作”弹出式菜单中
选择一个动作。
注意,DreamweaverMX增加了一项所选 HTML元素
的提示功能。具体操作时要多留意这项提示!
4)、选择某个动作时,将出现一个对话框,显示该
动作的参数和说明。
5), 为该动作输入参数,然后单击“确定”。
三、如何将行为附加到纯文本
操作方法,若要将行为附加到文本,最简单的方法就
是向文本添加一个空链接(在属性面板中的链接文
本框中输入,#”),然后将行为附加到该链接上。
Dreamweaver提供的行为介绍
1、调用 Javascript
【 调用 Javascript】 行为动作,能够让用户
使用行为面板去指定一个自定义功能,或
者当一个事件发生时执行一段 Javascript
代码,具体操作步骤如下,
1)、在文档窗口中键入中文“关闭窗口”,
然后将新输入的文本选定。
2)、为文本添加空链接,在其属性面板的
【 链接 】 栏内直接输入,#” 。
3)、打开行为面板,单击,+”按钮,从动
作弹出的菜单中选择 【 调用 Javascript】
命令,打开 【 调用 Javascript】 对话框,
如下图所示:
4)、键入将要执行的 Javascript代码或函数
名,如,window.close()”,用来关闭窗口
的命令。单击“确定”按钮,完成设置。
6)、在行为面板中
选择 【 onClick】
事件。如右图所示。
7)、预览网页。当
鼠标点击“关闭窗
口”时,就会弹出
信息框,询问用户
是否关闭窗口,打
开如右对话框:
8)、单击“是”按
钮,将关闭当前浏
览器窗口,否则回
到浏览器窗口。
2、播放声音
使用 【 播放声音 】 动作来播放声音和音乐
文件。例如,在页面载入时 会自动播放一
段动听的音乐,或者当鼠标点击按钮时 会
发出声音,具体的操作步骤如下:
1)、打开一个预加入背景音乐的页面文档,
然后打开行为面板。
2)、在行为面板中点击,+”按钮,从动作
弹出的菜单中选择 【 播放声音 】 命令,打
开 【 播放声音 】 对话框,如下图所示:
3)、点击“浏览”按
钮选中一个声音文件,
或者直接在“播放声
音”域中输入声音文
件的路径和文件名。
4)、单击“确定”按
钮,完成声音设定。
5)、在行为面板中加
入了一个事件为
【 onLoad】,动作为
【 播放声音 】,的行
为,如右图所示:
如果不想当网页载入时就播放音乐,而是想当鼠标点击时再播
放,只要将事件改为 【 onClick】 即可。
3、打开浏览器窗口
使用打 【 开浏览器窗口 】 行为动作,将打开
一个新的 浏览器窗口,在其中显示指定的网
页文档。用户可以指定这个新窗口的属性,
包括窗口尺寸大小、是否可以调节大小、是
否有菜单栏等等。 在网页中的小图需要放大
时,可以使用这个行为,在一个大窗口中放
置小图像的放大图,可将窗口设置成与图像
大小相吻合的尺寸,将多余的导航栏、地址
栏、状态栏、菜单栏等去掉不显示。
注意:如果我们不对窗口属性进行设置,它
就会以 640× 480像素大小打开,而且有导航
栏、地址栏、状态栏、菜单栏等。
具体的操作步骤如下:
1)、首先在文档中选定一幅需要放大的图像。
2)、在行为面板中点击,+”按钮,从动作弹出菜单
中选择 【 打开浏览器窗口 】 命令,打开 【 打开浏
览器窗口 】 对话框。如下图:
3)、点击 按钮以选择图像放大图。其
他设置如下:
【 窗口宽度 】 确定窗口宽度的像素值。(这题
我们就以图像的宽度为标准。)
【 窗口高度 】 确定窗口高度的像素值。(这题
我们就以图像的高度为标准。)
【 导航工具栏 】 包括后退、前进、主页、刷新
等浏览器按钮的工具栏。
【 地址工具栏 】 浏览器中包含网址等工具栏。
【 状态栏 】 浏览器窗口底部的区域,显示剩余
下载时间,连接指向的网址等。
【 菜单条 】 浏览器窗口主菜单,包括文件、
编辑、查看等。
4)、本例中我们只需要输入图像的放大图
的路径和文件名,其他项都不选,单击
“确定”按钮,完成设置。
5)、动作设置完成以后,还要对事件进行
设置在弹出的事件菜单中选择
【 onMouseDown】 (鼠标左键按下立即产
生动作 )
6)、预览效果。
4、弹出信息
【 弹出信息 】 动作将显示一个指定的
Javascript提示信息框。因为 Javascript提
示信息框只有一个按钮,使用这个动作以
提供给用户信息,而不是让它做出选择。
在实际网页设计中可以使用这个动作来给
浏览者的一些信息提示。
下面让我们来看一下设置 【 弹出信息 】 动作
的具体操作步骤。
1)、在文档窗口中选定图像,打开行为面板。
2)、点击,+”按钮,从动作弹出菜单中选择 【 弹出信
息 】 命令,打开 【 弹出信息 】 对话框,如图所示,
3)、在 【 信息 】 区域内输入要提示访问者的文本信息,
单击“确定”按钮。
4)、在行为面板中选择 【 onMouseUp】 事件 (按
下鼠标左键释放时产生动作 )。如下图,
5)、预览网页。点击鼠标右键会弹出信
息框,如图所示。
5、改变属性
使用 【 改变属性 】 动作来改变网页
元素的属性的值。例如,可改变图
像的来源。
下面用,改变图像的来源” 为例,说
明这个动作的使用具体操作步骤如
下:
1)、首先在文档中插入一幅图像,在属性
面板中为其取名为,mark”。
2)、选定该图像,打开行为面板,点击,+”
按钮,从弹出菜单中选择 【 改变属性 】 命令,
打开 【 改变属性 】 对话框,如下图所示。
3)、在 【 对象类型 】 下拉列表中选择
,IMG,这项是针对图像的”。如下图:
4)、对话框中的 【 命名对象 】 变为已命名
的图像,mark” 。
选中!
5)、对话框中 【 属性 】 的选项默认状态是
【 选择 】, 【 选择 】 下拉列表中只有一
项,src”(文件的路径)。
6)、右边下拉列表是支持行为动作的浏览
器版本,共有 4项选择,NS3,IE3、
NS4,IE4。浏览器的版本越早,所支持
的行为就越少。
注意:对熟悉 HTML语言的用户可以选择
【 输入 】 项,然后在空白栏内设置图像
的属性,如 border,width,height等。
7)、假如我们选择了,src”属性,那么在 【 新的
值 】 栏内输入另外的图像路径,如下图所示:
8)、单击“确定”按钮,完成设置。
9)、在行为面板中选择一个,onMouseOver”事件。
10)、预览网页,当鼠标经过图像时,就回调出第二
幅图像。
6、交换图像
【 交换图像 】 动作可以将一个图像替换为
另一个图像,这是通过改变图像的,src”
属性达到的,其实在上一个动作“改变
属性”中已经介绍了如何改变图像的
,src”属性。
注意:使用这个动作要求原始图像和替换
图像的尺寸(宽和高)完全一致,否则
替换图像会发生收缩或放大。
具体操作步骤如下:
1)、首先在文档中插入一幅图像。
2)、在属性面板命名文本框中键入图像的名称。
3)、选定将要替换的图像,打开行为面板。
4)、点击,+”按钮,从动作弹出菜单中选择 【 交换
图像 】 命令,打开 【 交换图像 】 对话框。如下图:
5),在 【 图像 】 列表中选择要改变的图
像。
6)、点击“浏览”按钮来选择替换的图像
文件,或者在 【 设置原始档为 】 栏内键
入新图像的路径和文件名。
7)、勾选 【 预先载入图像 】 选项,以便在
页面载入时在浏览器的缓存中存入替换
的图像,这样可以防止由于显示替换图
像时需要下载而造成拖延 。
8)、勾选 【 鼠标滑开时恢复图像 】 选项,
实现鼠标离开后,图像恢复为原始图像
效果。
9)、单击“确定”按钮,完成设置。
说明,以上设置完成以后,行为面板中添
加了两个行为:一个是鼠标经过时图像
变换,另一个是鼠标离开时恢复原始图
像。如下图:
本节小结
知识点 1,行为 ----是响应某一事件而采取的
一个动作。当把行为赋予文档中的某个元
素时,也就定义了一个动作。
知识点 2,动作 ---- 是行为中的那段
Javascript代码,用于完成某一组特定的操
作,比如打开窗口,播放一段音乐等。
知识点 3,事件 ----是由用户或者浏览器触发
的事件,比如 onMouseOver,onLoad等。
要求:熟练掌握如何使用系统提供的行为
技术来制作一些复杂的网页。
作业
完成今天讲过的行为动作的上机操作。