文档介绍：2017/11/11
第七讲行为与时间轴
本讲主要内容
HTML事件与Javascript
Dreamweaver内置行为
表单验证行为
交换图像行为
时间轴行为
调用示例1
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function selectScroller(n) {
optlist = ;
optlist[] = new Option(optlist[0].text,
"", false, false);
optlist[0] = null;
= -1;
n = (n + 1) % ;
setTimeout("selectScroller("+n+")",1000);
}
</script>
<title>无标题文档</title>
</head>
<body OnLoad="selectScroller()">
<form name="scrollform">
<select name="scroller" size="8">
<option>轻轻的我走了, </option>
<option>正如我轻轻的来; </option>
<option>我轻轻的招手, </option>
<option>作别西天的云彩。</option>
<option>那河畔的金柳, </option>
<option>……</option>
<option> </option>
<option>悄悄的我走了, </option>
<option>正如我悄悄的来; </option>
<option>我挥一挥衣袖, </option>
<option>不带走一片云彩。</option>
</select>
</form>
</body>
7. 1 HTML事件与Javascript
HTML事件
事件是可以被 JavaScript 侦测到的行为,是由鼠标、键盘或热键操作引发的连续动作产生的结果。
事件举例:
鼠标点击
页面或图像载入
鼠标悬浮于页面的某个热点之上
在表单中选取输入框
确认表单
键盘按键
……
HTML事件的触发机制
实际上,事件是浏览器生成的消息,它指示该页的访问者已执行了某种操作。例如,当访问者将鼠标指针移到某个链接上时,浏览器将为该链接生成一个 onMouseOver 事件;然后浏览器检查是否应该调用某段 JavaScript 代码进行响应。
在现代浏览器中都内置有大量的事件处理器(事件句柄)。这些处理器会监视特定的条件或用户行为,例如鼠标单击或浏览器窗口中完成某个图像的加载。
通过使用客户端的 JavaScript,可以将某些特定的事件处理器作为属性添加给特定的标签,并可以在事件发生时执行一个或多个 JavaScript 脚本程序或函数。
事件处理器的值是一个或一系列以分号隔开的 Javascript 表达式、方法和函数调用,并用引号引起来(使用事件属性方式时)。当事件发生时,浏览器会执行这些代码。
事件触发后执行的操作就是事件的动作,因此动作是用于响应事件而预先编制好的JavaScript代码。
行为是某个事件和由该事件触发的动作的组合。
HTML事件属性
窗口事件(Window Events):仅在 body 和 frameset 元素中有效。
属性
值
描述
onload
脚本
当文档被载入时执行脚本
onunload
脚本
当文档被卸下时执行脚本
HTML事件属性
表单元素事件(Form Element Events):仅在表单元素中有效。
属性
值
描述
onchange
脚本
当元素改变时执行脚本
onsubmit
脚本
当表单被提交时执行脚本
onreset
脚本
当表单被重置时执行脚本
onselect
脚本
当元素被选取时执行脚本
onblur
脚本
当元素失去焦点时执行脚本
onfocus
脚本
当元素获得焦点时执行脚本
HTML事件属性
图像事件(Image Events):该属性可用于 img 元素。
属性
值
描述
onabort
脚本
当图像加载中断时执行脚本
属性
值
描述
onkeydown
脚本
当键盘被按下时执行脚本
onkeypress
脚本
当键盘被按下后又