在JavaScript中，常用的表單事件有4種：
下面我們一一給大家介紹。
哎呀呀，又一對好基友閃亮登場。onfocus和onblur這2個事件往往都是配合使用。例如。在用戶在文本框輸入信息時，將光標放在文本框中，文本框會獲取焦點。當文本框失去光標時，文本框失去焦點。
onfocus表示獲取焦點觸發的事件，onblur表示失去焦點觸發的事件。
具有獲得焦點和失去焦點事件的元素有3個：
好吧，還是來個例子先。
舉例：搜索框的制作
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#search
{
color:#bbbbbb;
}
</style>
</head>
<body>
<input id="search" type="text" value="百度一下，你就知道"/><input id="Button1" type="button" value="搜索" />
<script type="text/javascript">
//獲取元素對象
var e = document.getElementById("search");
//獲取字符串“百度一下，你就知道”
var txt = e.value;
//獲取焦點事件
e.onfocus = function () {
if(e.value==txt)e.value = "";
}
//失去焦點事件
e.onblur = function () {
if (e.value == "") e.value = txt;
}
</script>
</body>
</html>
在浏覽器預覽效果如下：
分析：
在這個例子中，當文本框獲取焦點時，文本框提示文字就會消失；當文本框失去焦點後，會判斷是否已經輸入字符串，如果沒有的話，文本框提示文字會重新出現。大家都能感性德理解“獲取焦點事件”和“失去焦點”事件是怎麼一回事了。
上面的外觀還有待改善，不過技巧已經交給大家了。大家可以試著做出一些比較好看的搜索文本框，你會從中學到很多東西，包括outline屬性等。有機會，站長再出一個綜合性的教程，教大家做出類似淘寶那種高級表單效果。
其實上面那種文本框特效，只需要用HTML5表單中的一個placeholder屬性即可，完整語法如下：
<input id="search" type="text" placeholder="百度一下，你就知道" />
在未來上線的HTML5教程中你會學到更多關於HTML5的技巧，敬請關注！
在JavaScript中，當用戶在單行文本框text和多行文本框textarea輸入文本時，由於文本框內字符串的改變將會觸發onchange事件。此外，在下拉列表select中一個選項的狀態改變後也會觸發onchange事件。
具有獲得onchange事件的元素有3個：
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<textarea id="txt" rows="5" cols="20"></textarea><br />
輸入字符長度為：<span id="num"></span>
<script type="text/javascript">
var e = document.getElementById("txt");
var n = document.getElementById("num");
e.onchange = function () {
var len = e.value.length;
n.innerText = len;
}
</script>
</body>
</html>
在浏覽器預覽效果如下：
分析：
當我們在文本框輸入字符，然後讓文本框失去焦點，即可看到統計字符串的長度值。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function jump(){
var e = window.event;
var obj = e.srcElement;
var link = obj.options[obj.selectedIndex].value;
window.open(link, "", "");
}
</script>
</head>
<body>
<select id="list" onchange="jump()">
<option value="http://wwww.baidu.com">百度</option>
<option value="http://www.sina.com.cn">新浪</option>
<option value="http://www.qq.com">騰訊</option>
<option value="http://www.sohu.com">搜狐</option>
</select>
</body>
</html>
在浏覽器預覽效果如下：
分析：
當我們選取下拉列表某一項時，就會執行onchange事件，然後就會在新窗口打開相應的頁面。
在JavaScript中，當用戶選中單行文本框text或多行文本框textarea的文本時，會觸發onselect事件。onselect事件的具體過程是從鼠標按鍵被按下，到鼠標開始移動並選中內容的過程。這個過程並不包括鼠標鍵的放開。
新手很容易把onselect和onchange這2個事件搞混，誤以為下拉列表列表項的選中觸發的事件是onselect。這一點大家要搞清楚：下拉列表列表項的選中觸發的事件是onchange而不是onselect。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<input id="txt1" type="text" value="歡迎來到 學習網學習JavaScript入門教程"/><br />
<textarea id="txt2" cols="20" rows="5">歡迎來到 學習網學習JavaScript入門教程</textarea>
<script type="text/javascript">
document.getElementById("txt1").onselect = function () {
alert("你選中了單行文本框中的內容");
}
document.getElementById("txt2").onselect = function () {
alert("你選中了多行文本框中的內容");
}
</script>
</body>
</html>
在浏覽器預覽效果如下：
分析：
當我們選中單行文本框text或多行文本框的內容時都會彈出相應的對話框。
總結1、這一節所學到的事件都是針對表單而言，大家要清楚這一點；
2、在JavaScript中，常用的表單事件如下：