js 中的事件
什麼是事件？事件是電腦輸入裝置與頁面進行互動的響應。我們稱之為事件。
事件類型
滑鼠單擊：例如單擊button、選中checkbox和radio等元素；滑鼠進入、懸浮或退出頁面的某個熱點：例如滑鼠停在一個圖檔上方或者進入table的範圍；
鍵盤按鍵：當按下按鍵或釋放按鍵時；
HTML事件：例如頁面body被加載時；在表單中選取輸入框或改變輸入框中文本的内容：例如選中或修改了文本框中的内容；
突變事件：主要指文檔底層元素發生改變時觸發的事件，如DomSubtreeModified(DOM子樹修改)。
事件句柄
常用的事件：
onload 加載完成事件： 頁面加載完成之後，常用于做頁面js 代碼初始化操作
onclick 單擊事件： 常用于按鈕的點選響應操作。
onblur 失去焦點事件： 常用用于輸入框失去焦點後驗證其輸入内容是否合法。
onchange 内容發生改變事件： 常用于下拉清單和輸入框内容發生改變後操作
onsubmit 表單送出事件： 常用于表單送出前，驗證所有表單項是否合法。
事件的注冊又分為靜态注冊和動态注冊兩種：
什麼是事件的注冊（綁定）？
其實就是告訴浏覽器，當事件響應後要執行哪些操作代碼，叫事件注冊或事件綁定。
靜态注冊事件：通過html 标簽的事件屬性直接賦于事件響應後的代碼，這種方式我們叫靜态注冊。
動态注冊事件：是指先通過js 代碼得到标簽的dom 對象，然後再通過dom 對象.事件名= function(){} 這種形式賦于事件響應後的代碼，叫動态注冊。
動态注冊基本步驟：
1、擷取标簽對象
2、标簽對象.事件名= fucntion(){}
onload 加載完成事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
// onload 事件的方法
function onloadFun() {
alert('靜态注冊onload 事件，所有代碼');
}
// onload 事件動态注冊。是固定寫法
window.onload = function () {
alert("動态注冊的onload 事件");
}
</script>
</head>
<!--靜态注冊onload 事件
onload 事件是浏覽器解析完頁面之後就會自動觸發的事件
<body οnlοad="onloadFun();">
-->
<body>
</body>
</html>
onclick 單擊事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onclickFun() {
alert("靜态注冊onclick 事件");
}
// 動态注冊onclick 事件
window.onload = function () {
// 1 擷取标簽對象
/*
* document 是JavaScript 語言提供的一個對象（文檔）<br/>
* get 擷取
* Element 元素（就是标簽）
* By 通過。。由。。經。。。
* Id id 屬性
*
* getElementById 通過id 屬性擷取标簽對象
**/
var btnObj = document.getElementById("btn01");
// alert( btnObj );
// 2 通過标簽對象.事件名= function(){}
btnObj.onclick = function () {
alert("動态注冊的onclick 事件");
}
}
</script>
</head>
<body>
<!--靜态注冊onClick 事件-->
<button onclick="onclickFun();">按鈕1</button>
<button id="btn01">按鈕2</button>
</body>
</html>
onblur 失去焦點事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
// 靜态注冊失去焦點事件
function onblurFun() {
// console 是控制台對象，是由JavaScript 語言提供，專門用來向浏覽器的控制器列印輸出， 用于測試使用
// log() 是列印的方法
console.log("靜态注冊失去焦點事件");
}
// 動态注冊onblur 事件
window.onload = function () {
//1 擷取标簽對象
var passwordObj = document.getElementById("password");
// alert(passwordObj);
//2 通過标簽對象.事件名= function(){};
passwordObj.onblur = function () {
console.log("動态注冊失去焦點事件");
}
}
</script>
</head>
<body>
使用者名:<input type="text" onblur="onblurFun();"><br/>
密碼:<input id="password" type="text" ><br/>
</body>
</html>
onchange 内容發生改變事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onchangeFun() {
alert("女神已經改變了");
}
window.onload = function () {
//1 擷取标簽對象
var selObj = document.getElementById("sel01");
// alert( selObj );
//2 通過标簽對象.事件名= function(){}
selObj.onchange = function () {
alert("男神已經改變了");
}
}
</script>
</head>
<body>
請選擇你心中的女神：
<!--靜态注冊onchange 事件-->
<select onchange="onchangeFun();">
<option>--女神--</option>
<option>芳芳</option>
<option>佳佳</option>
<option>娘娘</option>
</select>
請選擇你心中的男神：
<select id="sel01">
<option>--男神--</option>
<option>國哥</option>
<option>華仔</option>
<option>富城</option>
</select>
</body>
</html>
onsubmit 表單送出事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" >
// 靜态系統資料庫單送出事務
function onsubmitFun(){
// 要驗證所有表單項是否合法，如果，有一個不合法就阻止表單送出
alert("靜态系統資料庫單送出事件----發現不合法");
return flase;
}
window.onload = function () {
//1 擷取标簽對象
var formObj = document.getElementById("form01");
//2 通過标簽對象.事件名= function(){}
formObj.onsubmit = function () {
// 要驗證所有表單項是否合法，如果，有一個不合法就阻止表單送出
alert("動态系統資料庫單送出事件----發現不合法");
return false;
}
}
</script>
</head>
<body>
<!--return false 可以阻止表單送出-->
<form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun();">
<input type="submit" value="靜态注冊"/>
</form>
<form action="http://localhost:8080" id="form01">
<input type="submit" value="動态注冊"/>
</form>
</body>
</html>
總結
靜态注冊
<script type="text/javascript">
function 函數名(){
}
</script>
動态注冊：
<script type="text/javascript">
window.onload = function () {
//1 擷取标簽對象
var 标簽對象= document.getElementById("id名稱");
//2 通過标簽對象.事件名= function(){}
标簽對象.事件名= function(){
}
}
</script>