JavaScript事件概念詳解(區分靜態註冊和動態註冊)
阿新 • • 發佈：2021-02-06
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>
<script type="text/javascript">
// onload 事件的方法
function onloadFun() {
alert('靜態註冊onload 事件，所有程式碼');
}
</script>
</head>
<!--靜態註冊onload 事件,onload 事件是瀏覽器解析完頁面之後就會自動觸發的事件,body標籤的屬性，通過這個屬性註冊-->
<body οnlοad="onloadFun();">
</body>
</html>
動態繫結：
固定的寫法，通過window.onload(){}方法，在大括號內呼叫方法的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>動態註冊</title>
<script type="text/javascript">
// onload 事件動態註冊。是固定寫法
window.onload = function () {
alert("動態註冊的onload 事件");
}
</script>
</head>
<body>
</body>
</html>
onclick單擊事件
舉例，從這個例子更好的體會兩者定義的不同
onclick靜態繫結事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onclickFun() {
alert("靜態註冊onclick 事件");
}
</script>
</head>
<body>
<!--靜態註冊onClick 事件，通過button的onclick屬性-->
<button onclick="onclickFun();">按鈕1</button>
</body>
</html>
onclick動態繫結事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
window.onload = function () {
//getElementById 通過id 屬性獲取標籤物件
var btnObj = document.getElementById("btn01");
// 2 通過標籤物件.事件名= function(){}
btnObj.onclick = function () {
alert("動態註冊的onclick 事件");
}
}
</script>
</head>
<body>
<button id="btn01">按鈕2</button>
</body>
</html>
以上就是JavaScript事件概念詳解(區分靜態註冊和動態註冊)的詳細內容，更多關於JavaScript 事件的資料請關注我們其它相關文章！