首頁 > 開發者 > JavaScript
標籤：javascript 事件 mouse 滑鼠 點擊
事件：JavaScript 建立動態網頁面。事件是可以被 JavaScript 偵測到的行為。 網頁中的每個元素都可以產生某些可以觸發 JavaScript 函數或程式的事件。
比如說，當使用者單擊按鈕或者提交表單資料時，就發生一個按一下滑鼠（onclick）事件，需要瀏覽器做出處理，返回給使用者一個結果。
主要事件表:
按一下滑鼠事件( onclick ）:onclick是按一下滑鼠事件，當在網頁上單擊滑鼠時，就會發生該事件。同時onclick事件調用的程式塊就會被執行，通常與按鈕一起使用。
比如，我們單擊按鈕時，觸發 onclick 事件，並調用兩個數和的函數add2()。代碼如下：
<html><head> <script type="text/javascript"> function add2(){ var numa,numb,sum; numa=6; numb=8; sum=numa+numb; document.write("兩數和為:"+sum); } </script></head><body> <form> <input name="button" type="button" value="點擊提交" onclick="add2()" /> </form></body></html>
注意: 在網頁中，如使用事件，就在該元素中設定事件屬性。
滑鼠經過事件（onmouseover）滑鼠經過事件，當滑鼠移到一個對象上時，該對象就觸發onmouseover事件，並執行onmouseover事件調用的程式。
現實滑鼠經過"確定"按鈕時，觸發onmouseover事件，調用函數info()，彈出訊息框，代碼如下:
運行結果:
滑鼠移開事件（onmouseout）滑鼠移開事件，當滑鼠移開當前對象時，執行onmouseout調用的程式。
當把滑鼠移動到"登入"按鈕上，然後再移開時，觸發onmouseout事件，調用函數message()，代碼如下:
運行結果:
游標聚焦事件（onfocus）
當網頁中的對象獲得聚點時，執行onfocus調用的程式就會被執行。
如下代碼, 當將游標移到文字框內時，即焦點在文字框內，觸發onfocus 事件，並調用函數message()。
運行結果：
失焦事件（onblur）onblur事件與onfocus是相對事件，當游標離開當前獲得聚焦對象的時候，觸發onblur事件，同時執行被調用的程式。
如下代碼, 網頁中有使用者和密碼兩個文字框。當前游標在使用者文字框內時（即焦點在文字框），在游標離開該文字框後（即失焦時），觸發onblur事件，並調用函數message()。
運行結果：
內容選中事件（onselect）
選中事件，當文字框或者文本域中的文字被選中時，觸發onselect事件，同時調用的程式就會被執行。
如下代碼,當選中使用者文字框內的文字時，觸發onselect 事件，並調用函數message()。
運行結果：
文字框內容改變事件（onchange）
通過改變文字框的內容來觸發onchange事件，同時執行被調用的程式。
如下代碼,當使用者將文字框內的文字改變後，彈出對話方塊“您改變了常值內容！”。
運行結果：
載入事件（onload）
事件會在頁面載入完成後，立即發生，同時執行被調用的程式。
注意：
1. 載入頁面時，觸發onload事件，事件寫在<body>標籤內。
2. 載入頁面，可理解為開啟一個新頁面時。
如下代碼,當載入一個新頁面時，彈出對話方塊“載入中，請稍等…”(網頁版新浪微博登入)。
運行結果：
卸載事件（onunload）
當使用者退出頁面時（頁面關閉、頁面重新整理等），觸發onUnload事件，同時執行被調用的程式。
注意：不同瀏覽器對onunload事件支援不同。
如下代碼,當退出頁面時，彈出對話方塊“您確定離開該網頁嗎？”。
運行結果：（IE瀏覽器）
—————————————————————————————————————————————————————————
以上內容參考自慕課網：http://www.imooc.com
JavaScript知識筆記（二）——事件
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
