WEB前端初學者筆記（16）表單事件

在j**ascript中，常用的表單事件有3種。

onfocus表示獲取焦點時觸發的事件，而onblur表示失去焦點時觸發的事件，兩者是相反操作。

onfocus和onblur這兩個事件往往都是配合一起使用的。例如使用者準備在文字框中輸入內容時，此時它會獲得游標，就會觸發onfocus事件。當文字框失去游標時，就會觸發onblur事件。

並不是所有的html元素都有焦點事件，具有「獲取焦點」和「失去焦點」特點的元素只有2種。

判斷乙個元素是否具有焦點很簡單，我們開啟乙個頁面後按tab鍵，能夠選中的就是具有焦點特性的元素。在實際開發中，焦點事件（onfocus和onblur）一般用於單行文字框和多行文字框這兩個，其他地方比較少用。

如搜尋框：

1
doctype html
>
2<
html
>
3<
head
>
4<
meta 
charset
="utf-8"
/>
5<
title
>
title
>
6<
style 
type
="text/css"
>
7#search
8style
>
9<
script
>
10window.onload 
=function
() 11
21};
22//
失去焦點
23osearch.onblur 
=function
() 24
29};30}
31script
>
32head
>
33<
body
>
34<
input 
id="search"
type
="text"
value
/>
35<
input 
type
="button"
value
="搜尋"
/>
36body
>
37html
>

在j**ascript中，當我們選中「單行文字框」或「多行文字框」中的內容時，就會觸發onselect事件。

如

1
doctype html
>
2<
html
>
3<
head
>
4<
meta 
charset
="utf-8"
/>
5<
title
>
title
>
6<
script
>
7window.onload 
=function
() 8;15
otxt2.onselect 
=function
() 16;19
}20script
>
21head
>
22<
body
>
23<
input 
id="txt1"
type
="text"
value
="如果我真的存在，也是因為你需要我。"
/><
br />
24<
textarea 
id="txt2"
cols
="20"
rows
="5"
>如果我真的存在，也是因為你需要我。
textarea
>
25body
>
26html
>

在j**ascript中，onchange事件常用於「具有多個選項的表單元素」。

當我們選擇下拉列表的某一項時，就會觸發onchange事件，然後就會在新的視窗開啟對應的頁面。下拉列表這種效果還是比較常見的，我們可以了解一下。

對於select元素來說，我們可以使用obj.options[n]的方式來得到某乙個列表項，這個列表項也是乙個dom物件。並且還可以使用obj.selectedindex來獲取你所選擇的這個列表項的下標。這兩個都是下拉列表所獨有的也是經常用的方法。

此外，window.open()表示開啟乙個新的視窗，對於這個我們在「13.2 視窗操作」這一節會詳細介紹。

WEB前端初學者筆記（16）表單事件

初學者web前端學習筆記

初學者應該如何學習web前端

WEB前端初學者筆記（14）陣列和物件

WEB前端初學者筆記（16） 表單事件

初學者web前端學習筆記

初學者應該如何學習web前端

WEB前端初學者筆記（14） 陣列和物件

相關推薦

WEB前端初學者筆記（16）表單事件

WEB前端初學者筆記（14）陣列和物件