Java Script(三)——onload事件、onclick事件、onsubmit事件、onchange事件、onblur事件
技術標籤：JavaWebjavascriptjsjavacssvue
js中的事件
事件是電腦輸入裝置與頁面進行互動的響應。
常用的事件：
onload 載入完成事件： 頁面載入完成之後，常用於做頁面 js 程式碼初始化操作
onclick 單擊事件： 常用於按鈕的點選響應操作。
onblur 失去焦點事件：常用於輸入框失去焦點後驗證其輸入內容是否合法。
onchange 內容發生改變事件： 常用於下拉列表和輸入框內容發生改變後操作
onsubmit 表單提交事件： 常用於表單提交前，驗證所有表單項是否合法。
事件的註冊：
什麼是事件的註冊（繫結）？
就是告訴瀏覽器，當事件響應後要執行哪些操作程式碼，叫事件註冊或事件繫結。
-
靜態註冊事件：通過 html 標籤的事件屬性直接賦於事件響應後的程式碼，這種方式我們叫靜態註冊。
-
動態註冊事件：是指先通過 js 程式碼得到標籤的 dom 物件，然後再通過 dom 物件.事件名 = function(){} 這種形式賦於事件響應後的程式碼，叫動態註冊。
動態註冊基本步驟：
1、獲取標籤物件 2、標籤物件.事件名 = fucntion(){}
和onload載入完成事件結合起來，有了onload動態註冊才實現了後續其它事件的動態註冊。
動態註冊事件可以做到當頁面載入完成後再執行script中的程式碼。
靜態註冊事件遵循從上到下依次執行，可能會出錯。
1.onload載入完成事件
onload事件是瀏覽器解析完頁面之後就會自動觸發的事件。
1.1靜態註冊
onlaod屬性 必須寫在body標籤中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS-2021-01-15</title>
<script type="text/javascript">
function onloadFun() {
alert 其實這裡面function函式只有一句alert函式，是可以直接寫的，就不用再寫function函數了，區別看第7行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS-2021-01-15</title>
</head>
<body onload="alert('靜態註冊 onload 事件，所有程式碼!')">
</body>
</html>
1.2動態註冊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS-2021-01-15</title>
<script type="text/javascript">
window.onload=function (){//固定格式
alert('動態註冊 onload 事件，所有程式碼');
}
</script>
</head>
<body> 這裡就不用再寫οnlοad=" "了
</body>
</html>
2.onclick單擊事件
常用於按鈕的點選響應操作。 也分為靜態註冊和動態註冊：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS-2021-01-15</title>
<script type="text/javascript">
function onclickFun() {
alert('靜態註冊的 onclick 事件');
}
window.onload=function () {
var btn=document.getElementById("btn02");
btn.onclick =function () {
alert('動態註冊的 onclick 事件');
}
}
</script>
</head>
<body>
<button onclick="onclickFun()">按鈕1</button> //靜態註冊
<button id="btn02"> 按鈕2 </button> //動態註冊
</body>
</html>
3. onblur失去焦點事件
什麼是失去焦點？
想象一下學習通的看視訊過任務點時，每當滑鼠離開視訊介面視訊就會暫停。
我們可以把視訊看作一個焦點，滑鼠離開後就是發生了一次失去焦點事件。
onblur事件在失去焦點後觸發，分為靜態觸發和動態觸發，常用於輸入框失去焦點後驗證其輸入內容是否合法。
console 是控制檯物件 ，是由 JavaScript 語言提供，專門用來向瀏覽器的控制器列印輸出， 用於測試使用
log()是其列印的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS-2021-01-15</title>
<script type="text/javascript">
//靜態註冊失去焦點
function onblurFun() {
console.log("靜態註冊失去焦點事件");
alert('靜態:離開文字框了，親！');
}
//動態註冊 onblur 事件
window.onload=function () {
var pwd=document.getElementById("passwd");
pwd.onblur=function () {
console.log('動態註冊失去焦點事件');
alert('動態:離開文字框了，親！');
}
}
</script>
</head>
<body>
使用者名稱：<input type="text" onblur="onblurFun()"> <br/>
密碼：<input type="passwd" id="passwd"> <br/>
</body>
</html>
4. onchange 內容改變事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS-2021-01-15</title>
<script type="text/javascript">
//靜態註冊
function onchangeFun() {
alert('女神已經改變了');
}
//動態註冊
window.onload=function () {
var sel=document.getElementById("select");
sel.onchange=function (){
alert('男神已經改變了');
}
}
</script>
</head>
<body>
請選擇你心中的女神：
<select onchange="onchangeFun()">
<option>--女神--</option>
<option>dd</option>
<option>ee</option>
<option>ff</option>
</select>
<br/> <br/>
請選擇你心中的男神：
<select id="select">
<option>--男神--</option>
<option>aa</option>
<option>bb</option>
<option>cc</option>
</select>
</body>
</html>
5. onsubmit 表單提交事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS-2021-01-15</title>
<script type="text/javascript">
function onsubmitFun() {
//假設這一部分內容要驗證所有表單項是否合法，如果有一個不合法就輸出提示，並阻止表單提交
alert("靜態登錄檔單提交事件----發現不合法");
return false; //返回false，阻止提交
}
window.onload=function (){
var fm=document.getElementById("form");
fm.onsubmit=function (){
//檢查環節
alert("動態登錄檔單提交事件----發現不合法");
return false;
}
}
</script>
</head>
<body>
<!--return false 可以阻止 表單提交 -->
<form action="http://www.baidu.com" method="get" onsubmit="return onsubmitFun()">
<input type="submit" value="靜態註冊"/> <!-- 提交成功就跳轉到百度-->
</form>
<form action="http://www.baidu.com" method="get" id="form">
<input type="submit" value="動態註冊"/>
</form>
</body>
</html>