js中的事件
什么是事件？事件是電腦輸入設(shè)備與頁(yè)面進(jìn)行交互的響應(yīng)，我們稱之為事件
事件類(lèi)型
- 鼠標(biāo)單擊：例如單擊button、選中checkbox和radio等元素；鼠標(biāo)進(jìn)入、懸浮或退出頁(yè)面的某個(gè)熱點(diǎn)：例如鼠標(biāo)停在一個(gè)圖片上方或者進(jìn)入table的范圍；
- 鍵盤(pán)按鍵：當(dāng)按下按鍵或釋放按鍵時(shí)；
- HTML事件：例如頁(yè)面body被加載時(shí)；在表單中選取輸入框或改變輸入框中文本的內(nèi)容：例如選中或修改了文本框中的內(nèi)容；
- 突變事件：主要指文檔底層元素發(fā)生改變時(shí)觸發(fā)的事件，如DomSubtreeModified(DOM子樹(shù)修改)。
常用的事件
- onload 加載完成事件： 頁(yè)面加載完成之后，常用于做頁(yè)面js 代碼初始化操作
- onclick 單擊事件： 常用于按鈕的點(diǎn)擊響應(yīng)操作。
- onblur 失去焦點(diǎn)事件： 常用用于輸入框失去焦點(diǎn)后驗(yàn)證其輸入內(nèi)容是否合法。
- onchange 內(nèi)容發(fā)生改變事件： 常用于下拉列表和輸入框內(nèi)容發(fā)生改變后操作
- onsubmit 表單提交事件： 常用于表單提交前，驗(yàn)證所有表單項(xiàng)是否合法。
事件的注冊(cè)
什么是事件的注冊(cè)（綁定）？
其實(shí)就是告訴瀏覽器，當(dāng)事件響應(yīng)后要執(zhí)行哪些操作代碼，叫事件注冊(cè)或事件綁定。
事件的注冊(cè)又分為靜態(tài)注冊(cè)和動(dòng)態(tài)注冊(cè)兩種
- 靜態(tài)注冊(cè)事件：通過(guò)html 標(biāo)簽的事件屬性直接賦于事件響應(yīng)后的代碼，這種方式我們叫靜態(tài)注冊(cè)
- 動(dòng)態(tài)注冊(cè)事件：是指先通過(guò)js 代碼得到標(biāo)簽的dom 對(duì)象，然后再通過(guò)dom 對(duì)象.事件名= function(){} 這種形式賦于事件響應(yīng)后的代碼，叫動(dòng)態(tài)注冊(cè)
動(dòng)態(tài)注冊(cè)基本步驟：
1、獲取標(biāo)簽對(duì)象
2、標(biāo)簽對(duì)象.事件名= fucntion(){}
靜態(tài)動(dòng)態(tài)注冊(cè)舉例
onload 加載完成事件
靜態(tài)綁定：
|
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>靜態(tài)注冊(cè)</title> <script type="text/javascript"> // onload 事件的方法 function onloadFun() { alert('靜態(tài)注冊(cè)onload 事件，所有代碼'); } </script></head><!--靜態(tài)注冊(cè)onload 事件,onload 事件是瀏覽器解析完頁(yè)面之后就會(huì)自動(dòng)觸發(fā)的事件,body標(biāo)簽的屬性，通過(guò)這個(gè)屬性注冊(cè)--><body οnlοad="onloadFun();"></body></html> |
動(dòng)態(tài)綁定：
固定的寫(xiě)法，通過(guò)window.onload(){}方法，在大括號(hào)內(nèi)調(diào)用方法的
|
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>動(dòng)態(tài)注冊(cè)</title> <script type="text/javascript"> // onload 事件動(dòng)態(tài)注冊(cè)。是固定寫(xiě)法 window.onload = function () { alert("動(dòng)態(tài)注冊(cè)的onload 事件"); } </script></head><body></body></html> |
onclick單擊事件
舉例，從這個(gè)例子更好的體會(huì)兩者定義的不同
onclick靜態(tài)綁定事件
|
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("靜態(tài)注冊(cè)onclick 事件"); }</script></head><body><!--靜態(tài)注冊(cè)onClick 事件，通過(guò)button的onclick屬性--><button onclick="onclickFun();">按鈕1</button></body></html> |
onclick動(dòng)態(tài)綁定事件
|
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 通過(guò)id 屬性獲取標(biāo)簽對(duì)象 var btnObj = document.getElementById("btn01"); // 2 通過(guò)標(biāo)簽對(duì)象.事件名= function(){} btnObj.onclick = function () { alert("動(dòng)態(tài)注冊(cè)的onclick 事件"); } }</script></head><body> <button id="btn01">按鈕2</button></body></html> |
以上就是JavaScript事件概念詳解(區(qū)分靜態(tài)注冊(cè)和動(dòng)態(tài)注冊(cè))的詳細(xì)內(nèi)容，更多關(guān)于JavaScript 事件的資料請(qǐng)關(guān)注服務(wù)器之家其它相關(guān)文章！
原文鏈接：https://www.cnblogs.com/lovelywcc/p/14369484.html
