Javascript DOM 和事件
什么是 DOM?
如何基于表单事件对表单和控件完成动态修改?
解释
文档对象模型(DOM):
在进一步学习表单和事件处理之前, 我们应该明白它归属的范围。 使用 javascript 完成的对网页上的任何动作或事件基于 DOM (文档对象模型 dynamic object model)。 每一个 html 元素可以使用 javascript DOM 动态访问和控制。
W3C 组织的文档对象模型 (DOM) 提供了平台和语言无关的应用界面允许程序动态操作访问网页内容、结构以及文档样式。 文档对象模型 (DOM)是合法 HTML 的应用程序开发接口 (API)。
所有 HTML 对象及其属性可以通过 DOM 树进行访问。 例如,表单 “form1” 可以使用这种方式引用到
document.form1; 事件处理:
事件是在网页上触发的动作,多由用户完成。 有内置的称呼来处理这些事件。 例如:我们考虑表单中的一个按钮或者一个链接。如果用户把鼠标移到它上面,将会触发一个 “mouseover” 事件。我们可以捕获这样的事件并触发一个 javascript 函数来完成动作。
事件处理器通常添加一个属性到 html 标记中。使用 onMouseOver 捕获鼠标移动事件。 在下面的示例中我们将用提示框(alert)响应鼠标移动事件。
示例代码:
<script language="javascript">
function testdom()
{
alert("鼠标移到我的地盘了。"); }
</script>
<input name=xx type=button value=单击 onMouseOver="testdom()"></input>
结果:
步骤 1: 我们创建表单按钮。
步骤 2: 使用 onMouseOver 属性触发鼠标移动事件并将 javascript 自定义函数 testdom 作为属性值从而绑定该事件。这样的话 testdom() 方法将会在鼠标移过的时候执行。
步骤 3: 我们创建了一个 javascript 自定义函数 testdom() 并调用在该函数里面调用了系统函数 alert。
后续章节中我们将学习不同表单类型的事件和 DOM 可用于表单元素的各种方法。