整理Javascript事件響應(yīng)學(xué)習(xí)筆記
什么是事件
JavaScript 創(chuàng)建動態(tài)頁面。事件是可以被 JavaScript 偵測到的行為。 網(wǎng)頁中的每個元素都可以產(chǎn)生某些可以觸發(fā) JavaScript 函數(shù)或程序的事件。
1、鼠標(biāo)單擊事件（onclick）
onclick是鼠標(biāo)單擊事件，當(dāng)在網(wǎng)頁上單擊鼠標(biāo)時，就會發(fā)生該事件。同時onclick事件調(diào)用的程序塊就會被執(zhí)行，通常與按鈕一起使用。
例：我們單擊按鈕時，觸發(fā) onclick 事件，并調(diào)用兩個數(shù)和的函數(shù)add2()。
<html>
<head>
<script type="text/javascript">
function add2(){
var numa,numb,sum;
numa=6;
numb=8;
sum=numa+numb;
document.write("兩數(shù)和為:"+sum); }
</script>
</head>
<body>
<form>
<input name="button" type="button" value="點(diǎn)擊提交" onclick="add2()" />
</form>
</body>
</html>
注意: 在網(wǎng)頁中，如使用事件，就在該元素中設(shè)置事件屬性。
2、鼠標(biāo)經(jīng)過事件（onmouseover）
鼠標(biāo)經(jīng)過事件，當(dāng)鼠標(biāo)移到一個對象上時，該對象就觸發(fā)onmouseover事件，并執(zhí)行onmouseover事件調(diào)用的程序。
當(dāng)鼠標(biāo)經(jīng)過"確定"按鈕后，調(diào)用message()函數(shù)，彈出消息對話框。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 鼠標(biāo)經(jīng)過事件 </title>
<script type="text/javascript">
function message(){
confirm("請輸入密碼后，再單擊確定!"); }
</script>
</head>
<body>
<form>
密碼:
<input name="password" type="password" >
<input name="確定" type="button" value="確定" onmouseover="message()"/>
</form>
</body>
</html>
3、鼠標(biāo)移開事件（onmouseout）
鼠標(biāo)移開事件，當(dāng)鼠標(biāo)移開當(dāng)前對象時，執(zhí)行onmouseout調(diào)用的程序。
當(dāng)鼠標(biāo)移開"點(diǎn)擊我"的按鈕時，調(diào)用message()函數(shù)，彈出消息對話框。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠標(biāo)移開事件 </title>
<script type="text/javascript">
function message(){
alert("不要移開，點(diǎn)擊后進(jìn)行慕課網(wǎng)!"); }
</script>
</head>
<body>
<form>
<a onmouseout="message()">點(diǎn)擊我</a>
</form>
</body>
</html>
4、光標(biāo)聚焦事件（onfocus）
當(dāng)網(wǎng)頁中的對象獲得聚點(diǎn)時，執(zhí)行onfocus調(diào)用的程序就會被執(zhí)行。
當(dāng)下拉列表得到焦點(diǎn)時，調(diào)用message()函數(shù)，就彈出對話框“"請選擇，您現(xiàn)在的職業(yè)！”。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 光標(biāo)聚焦事件 </title>
<script type="text/javascript">
function message(){
alert("請選擇，您現(xiàn)在的職業(yè)！");
}
</script>
</head>
<body>
請選擇您的職業(yè)：<br>
<form>
<select name="career" onfocus="message()">
<option>學(xué)生</option>
<option>教師</option>
<option>工程師</option>
<option>演員</option>
<option>會計(jì)</option>
</select>
</form>
</body>
</html>
5、失焦事件（onblur）
onblur事件與onfocus是相對事件，當(dāng)光標(biāo)離開當(dāng)前獲得聚焦對象的時候，觸發(fā)onblur事件，同時執(zhí)行被調(diào)用的程序。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 失焦事件 </title>
<script type="text/javascript">
function message(){
alert("請確定已輸入密碼后，在移開!"); }
</script>
</head>
<body>
<form>
用戶:
<input name="username" type="text" value="請輸入用戶名！" >
密碼:
<input name="password" type="text" value="請輸入密碼！" onblur="message()">
</form>
</body>
</html>
6、內(nèi)容選中事件（onselect）
選中事件，當(dāng)文本框或者文本域中的文字被選中時，觸發(fā)onselect事件，同時調(diào)用的程序就會被執(zhí)行。
當(dāng)選中個人簡介文本框中文字時，觸發(fā)onselect事件，并彈出對話框。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 內(nèi)容選中事件 </title>
<script type="text/javascript">
function message(){
alert("您觸發(fā)了選中事件！"); }
</script>
</head>
<body>
<form>
個人簡介：<br>
<textarea name="summary" cols="60" rows="5" onselect="message()">請寫入個人簡介，不少于200字！</textarea>
</form>
</body>
</html>
7、文本框內(nèi)容改變事件（onchange）
通過改變文本框的內(nèi)容來觸發(fā)onchange事件，同時執(zhí)行被調(diào)用的程序。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 文本框內(nèi)容改變事件 </title>
<script type="text/javascript">
function message(){
alert("您改變了文本內(nèi)容！"); }
</script>
</head>
<body>
<form>
個人簡介：<br>
<textarea name="summary" cols="60" rows="5" onchange="message()">請寫入個人簡介，不少于200字！</textarea>
</form>
</body>
</html>
8、加載事件（onload）
事件會在頁面加載完成后，立即發(fā)生，同時執(zhí)行被調(diào)用的程序。
注意： 1. 加載頁面時，觸發(fā)onload事件，事件寫在<body>標(biāo)簽內(nèi)。
2. 此節(jié)的加載頁面，可理解為打開一個新頁面時。
如下代碼,當(dāng)加載一個新頁面時，彈出對話框“加載中，請稍等…”。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 加載事件 </title>
<script type="text/javascript">
function message(){
alert("加載中，請稍等…"); }
</script>
</head>
<body onload="message()">
歡迎學(xué)習(xí)JavaScript。
</body>
</html>
9、卸載事件（onunload）
當(dāng)用戶退出頁面時（頁面關(guān)閉、頁面刷新等），觸發(fā)onUnload事件，同時執(zhí)行被調(diào)用的程序。
注意：不同瀏覽器對onunload事件支持不同。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 卸載事件 </title>
<script type="text/javascript">
window.onunload = onunload_message;
function onunload_message(){
alert("您確定離開該網(wǎng)頁嗎？");
}
</script>
</head>
<body onunload="onunload_message">
歡迎學(xué)習(xí)JavaScript。
</body>
</html>
測試結(jié)果發(fā)現(xiàn)只有在IE瀏覽器里執(zhí)行，其他瀏覽器不執(zhí)行。
以上就是關(guān)于Javascript事件響應(yīng)的九種狀態(tài)，希望對大家的學(xué)習(xí)有所幫助。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)轉(zhuǎn)動骰子模型，自動隨機(jī)生成骰子數(shù)的模型，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
前端發(fā)展過程中有許多性能優(yōu)化的操作,比如防抖、節(jié)流和圖片懶加載等,在這里我們首先聊聊圖片懶加載操作,我們會經(jīng)常逛像淘寶和京東等購物平臺,一次性全部加載會導(dǎo)致加載時間長、網(wǎng)絡(luò)資源消耗大,所以本文給大家介紹了JavaScript優(yōu)化圖片懶加載的性能技巧2024-06-06
單元測試框架Jest搭配TypeScript的安裝與配置方式
這篇文章主要介紹了單元測試框架Jest搭配TypeScript的安裝與配置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
javascript中萬惡的function實(shí)例分析
javascript中萬惡的function實(shí)例分析，學(xué)習(xí)js的朋友可以參考下。2011-05-05
書上對于原型對象的說法給我整的眼花繚亂,完全不知道它在說什么,查了好多資料,終于有了些理解,下面我以通俗的大白話說說我對原型對象的理解2012-12-12
這篇文章主要介紹了倒記時60刷新網(wǎng)頁的js代碼,需要的朋友可以參考下2014-02-02
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)滾動消息通知，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-02-02
ie下$.getJSON出現(xiàn)問題是常有的事，下面為大家介紹下具體該如何解決,需要的朋友可以參考下2014-02-02
這篇文章主要介紹了微信小程序?qū)嵱么a段，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-12-12
JavaScript實(shí)現(xiàn)敏感信息脫敏的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript實(shí)現(xiàn)敏感信息脫敏,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04