处理表单和表单元素事件

在网页设计中，表单和表单元素是与用户交互的关键组成部分。它们允许用户输入数据并触发特定操作，如提交信息或执行某些功能。处理这些表单和元素的事件是JavaScript的重要任务，使得我们可以实现更丰富的用户体验。 常见的浏览器对象包括window、document、location、history等。例如，window对象提供了许多与浏览器窗口相关的功能，比如`window.open()`方法可以用来打开新窗口或标签页，而`window.alert()`则用于显示警告对话框。在本例中，如果希望网页加载时弹出广告窗口，可以使用`window.open()`方法。 历史对象(history)的`back()`方法相当于IE浏览器中的后退按钮，它会将用户导航回浏览历史中的前一个页面。而要动态改变网页的背景色，可以使用document对象的`bgColor`属性，如`document.bgColor = "new_color"`。 IE浏览器的地址栏对应于location对象，它包含了当前网页的URL信息。location对象的`href`属性保存了完整的URL，而`hash`、`host`、`hostname`、`pathname`、`port`、`protocol`等属性分别提供了URL的不同部分。 表单元素的事件处理程序允许我们在用户与表单交互时执行JavaScript代码。例如，对于文本框(textbox)，有以下常见事件： - `onBlur`：当文本框失去焦点（用户点击了其他地方）时触发。 - `onChange`：当文本框的值被修改并且失去焦点时触发。 - `onFocus`：当文本框获得焦点（鼠标光标进入）时触发。 例如，下面的代码展示了如何为文本框添加事件处理程序： ```html <INPUT type="text" name="t1" onBlur="someFunction()"> ``` 在此示例中，当文本框失去焦点时，`someFunction()`会被调用。 文本框对象有一些重要的方法和属性。`focus()`方法用于使文本框获取焦点，`select()`方法则用于选中文本框内的所有内容。属性`readonly`可以设置文本框为只读，不允许用户编辑内容。 例如，下面的代码展示了一个具有`onFocus`、`onBlur`和`onChange`事件处理程序的文本框，用于验证会员帐号： ```html <TD>帐号：<INPUT name="card" onFocus="clearText()" onBlur="check()" type="text" value="输入您的会员帐号"></TD> ``` 在这个例子中，`clearText()`函数会在用户聚焦文本框时清除默认提示文字，`check()`函数在失去焦点时检查帐号格式，而`compute()`函数在数量输入框(`onChange`)的值发生变化时计算总价。 命令按钮对象通常用于提交表单或执行特定动作。其事件处理程序`onClick`会在用户点击按钮时触发。例如： ```html <INPUT type="button" value="注册" onClick="button_click()"> ``` 这里，`button_click()`函数会在用户点击“注册”按钮时执行，可能用于显示警告对话框或其他操作。 处理表单和表单元素事件是JavaScript在Web开发中的核心功能之一，它允许开发者创建交互性强、功能丰富的网页。通过理解并应用这些事件处理程序，我们可以更好地控制用户的输入，提高表单验证的效率，以及提供更直观的用户反馈。