很好很实用的JavaScript代码
onBlur:当失去输入焦点后产生该事件
onFocus:当输入获得焦点后，产生该文件
Onchange:当文字值改变时，产生该事件
Onselect:当文字加亮后，产生该文件
### JavaScript 事件与应用实例详解
#### 一、概述
在网页开发中，JavaScript 是一种常用的客户端脚本语言，能够使网页具备动态交互能力。本文将重点介绍几个重要的JavaScript事件：`onBlur`, `onFocus`, `onChange`, 和 `onSelect` 的应用场景，并通过具体的示例来帮助理解这些事件的工作原理。
#### 二、JavaScript 事件详解
##### 1\. `onBlur`: 当失去焦点事件
- **定义**：`onBlur` 事件发生在元素失去焦点时。
- **用途**：常用于表单验证，在用户离开输入框时触发验证逻辑。
- **示例**：
```html
<input type="text" value="mm" onblur="if (value == '') { value = 'mm' }">
```
这段代码表示当文本框失去焦点时，如果输入为空，则将其值设置为 "mm"。
##### 2\. `onFocus`: 当获得焦点事件
- **定义**：`onFocus` 事件发生在元素获得焦点时。
- **用途**：通常用于提供用户输入提示或清除默认值。
- **示例**：
```html
<input type="text" value="mm" onfocus="if (value == 'mm') { value = '' }">
```
此示例表示当文本框获得焦点时，如果其值为 "mm"，则清空文本框内容。
##### 3\. `onChange`: 当内容改变事件
- **定义**：`onChange` 事件发生在元素的内容发生变化时。
- **用途**：常用于实时更新或数据验证。
- **示例**：
```html
<input type="text" oninput="updateValue()">
<script>
function updateValue() {
console.log('Text changed');
}
</script>
```
当输入框内容改变时，调用 `updateValue` 函数记录更改。
##### 4\. `onSelect`: 当选中文本事件
- **定义**：`onSelect` 事件发生在元素内的文本被选中时。
- **用途**：可以用于实现复制功能或提供文本选择后的操作。
- **示例**：
```html
<textarea onselect="handleSelection()" rows="4" cols="50">
Select some text
</textarea>
<script>
function handleSelection() {
alert('Text selected');
}
</script>
```
#### 三、其他JavaScript应用案例
除了以上四个事件之外，文章还提到了其他一些常见的JavaScript应用案例：
##### 1\. 页面颜色设置
- 使用 `style` 属性直接修改HTML元素的颜色等样式。
```html
<input type="button" name="Submit1" value="按钮" size=10 class="s02" style="background-color: rgb(235, 207, 22)">
```
##### 2\. 颜色变化
- 通过鼠标悬停和移出事件 (`onMouseOut` 和 `onMouseOver`) 来改变元素颜色。
```html
<input type="submit" value="按钮" name="B1" onMouseOut="this.style.color='blue'" onMouseOver="this.style.color='red'" class="button">
```
##### 3\. 平铺按钮
- 使用CSS样式创建平铺效果的按钮。
```html
<input type="submit" value="按钮" style="border: 1px solid #666666; height: 17px; width: 25pt; font-size: 9pt; BACKGROUND-COLOR: #E8E8FF; color: #666666" name="submit">
```
##### 4\. 颜色变化
- 通过修改文本框的样式属性来改变颜色。
```html
<input type="text" name="nick" style="border: 1px solid #666666; font-size: 9pt; height: 17px; BACKGROUND-COLOR: #F4F4FF; color: #ff6600" size="15" maxlength="16">
```
##### 5\. 表单操作
- 使用 `resizeTo` 方法调整窗口大小。
```html
<script>
window.resizeTo(300, 283);
</script>
```
##### 6\. 滚动条
- 使用 `marquee` 元素创建滚动效果。
```html
<marquee direction="up" scrollamount="1" scrolldelay="100" onmouseover="this.stop()" onmouseout="this.start()" height="60">
<!--head_scrolltext-->
<tr>
<td>
内容
</td>
</tr>
</marquee>
```
##### 7\. 状态栏显示
- 修改状态栏显示的文字。
```html
<base onMouseOver="window.status='访问http://www.webmake.cn/'; return true">
```
##### 8\. 单选按钮
- 使用 `radio` 类型的输入框实现单选功能。
```html
<input type="radio" name="regtype" value="A03" id="A03">
<label for="A03">个人注册</label>
```
##### 9\. 字体样式
- 通过点击事件改变字体样式。
```html
<font onclick="this.style.fontWeight='bold'">点击加粗</font>
```
##### 10\. 打印页面
- 使用 `window.print()` 方法打印当前页面。
```html
<a href='javascript:window.print()'>打印</a>
```
##### 11\. 文本框聚焦
- 在文本框上聚焦时选中文本。
```html
<input type="text" name="key" size="12" value="关键词" onFocus="this.select()" onMouseOver="this.focus()" class="line">
```
##### 12\. 显示文档最后修改时间
- 使用 `document.write` 和 `alert` 方法显示文档的最后修改时间。
```html
<script>
function hi(str) {
document.write(document.lastModified);
alert("hi" + str + "!");
}
</script>
```
##### 13\. 鼠标悬停事件
- 通过鼠标悬停显示提示信息。
```html
<html>
<head>
<script language="LiveScript">
<!--
function hello() {
alert("!");
}
//-->
</script>
</head>
<body>
<a href="" onMouseOver="hello()">链接</a>
</body>
</html>
```
##### 14\. 背景颜色选择
- 通过下拉菜单选择不同的背景颜色。
```html
<script>
function bgChange(selObj) {
newColor = selObj.options[selObj.selectedIndex].text;
document.bgColor = newColor;
selObj.selectedIndex = -1;
}
</script>
<select onchange="bgChange(this)">
<option value="white">白色</option>
<option value="blue">蓝色</option>
<option value="green">绿色</option>
</select>
```
以上就是关于 `onBlur`, `onFocus`, `onChange`, 和 `onSelect` 四个JavaScript事件的应用案例以及其他的实用技巧。这些方法和技术可以帮助开发者创建更富交互性和用户体验更佳的网页应用。
