js中的事件
什么是事件？事件是電腦輸入設備與頁面進行交互的響應，我們稱之為事件
事件類型
- 鼠標單擊：例如單擊button、選中checkbox和radio等元素；鼠標進入、懸浮或退出頁面的某個熱點：例如鼠標停在一個圖片上方或者進入table的范圍；
- 鍵盤按鍵：當按下按鍵或釋放按鍵時；
- HTML事件：例如頁面body被加載時；在表單中選取輸入框或改變輸入框中文本的內容：例如選中或修改了文本框中的內容；
- 突變事件：主要指文檔底層元素發生改變時觸發的事件，如DomSubtreeModified(DOM子樹修改)。
常用的事件
- onload 加載完成事件： 頁面加載完成之后，常用于做頁面js 代碼初始化操作
- onclick 單擊事件： 常用于按鈕的點擊響應操作。
- onblur 失去焦點事件： 常用用于輸入框失去焦點后驗證其輸入內容是否合法。
- onchange 內容發生改變事件： 常用于下拉列表和輸入框內容發生改變后操作
- onsubmit 表單提交事件： 常用于表單提交前，驗證所有表單項是否合法。
事件的注冊
什么是事件的注冊（綁定）？
其實就是告訴瀏覽器，當事件響應后要執行哪些操作代碼，叫事件注冊或事件綁定。
事件的注冊又分為靜態注冊和動態注冊兩種
- 靜態注冊事件：通過html 標簽的事件屬性直接賦于事件響應后的代碼，這種方式我們叫靜態注冊
- 動態注冊事件：是指先通過js 代碼得到標簽的dom 對象，然后再通過dom 對象.事件名= function(){} 這種形式賦于事件響應后的代碼，叫動態注冊
動態注冊基本步驟：
1、獲取標簽對象
2、標簽對象.事件名= fucntion(){}
靜態動態注冊舉例
onload 加載完成事件
靜態綁定：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!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(){}方法，在大括號內調用方法的
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!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靜態綁定事件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!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動態綁定事件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!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 事件的資料請關注服務器之家其它相關文章！
原文鏈接：https://www.cnblogs.com/lovelywcc/p/14369484.html
