《网页设计》完整课件 网页设计10(精品·公开课件).ppt

第十讲 行为事件 我们学习图层的相关内容的时候曾经接触了为一个对象（如图片、链接等）添加一个“行为”（或称为动作，例如显示隐藏图层、拖动图层等），然后产生一个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 代码；即它运行于浏览器中，而不是服务器上。 说明：在上图中，已附加到当前所选网页元素的行为显示在行为列表中（面板的主区域），按事件以字母顺序排列。如果同一个事件有多个动作，则将以在列表上出现的顺序执行这些动作。如果行为列表中没有显示任何行为，则没有行为附加到当前所选的网页元素。 2、“行为”面板具有的选项说明： 1）、动作 (+) 是一个弹出式菜单，其中包含可以附加到当前所选元素的多个动作。当您从此列表中选择某个动作时，将出现一个对话框，您可以在