JavaScript事件概念詳解(區(qū)分靜態(tài)注冊和動(dòng)態(tài)注冊)

更新時(shí)間：2021年02月05日 09:45:21 作者：皮卡丘和羊?qū)氊?#128516;

這篇文章主要介紹了JavaScript事件(區(qū)分靜態(tài)注冊和動(dòng)態(tài)注冊)的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用JavaScript，感興趣的朋友可以了解下

js中的事件

什么是事件？事件是電腦輸入設(shè)備與頁面進(jìn)行交互的響應(yīng)，我們稱之為事件

事件類型

鼠標(biāo)單擊：例如單擊button、選中checkbox和radio等元素；鼠標(biāo)進(jìn)入、懸浮或退出頁面的某個(gè)熱點(diǎn)：例如鼠標(biāo)停在一個(gè)圖片上方或者進(jìn)入table的范圍；
鍵盤按鍵：當(dāng)按下按鍵或釋放按鍵時(shí)；
HTML事件：例如頁面body被加載時(shí)；在表單中選取輸入框或改變輸入框中文本的內(nèi)容：例如選中或修改了文本框中的內(nèi)容；
突變事件：主要指文檔底層元素發(fā)生改變時(shí)觸發(fā)的事件，如DomSubtreeModified(DOM子樹修改)。

常用的事件

onload 加載完成事件：頁面加載完成之后，常用于做頁面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)是否合法。

事件的注冊

什么是事件的注冊（綁定）？
其實(shí)就是告訴瀏覽器，當(dāng)事件響應(yīng)后要執(zhí)行哪些操作代碼，叫事件注冊或事件綁定。
事件的注冊又分為靜態(tài)注冊和動(dòng)態(tài)注冊兩種

靜態(tài)注冊事件：通過html 標(biāo)簽的事件屬性直接賦于事件響應(yīng)后的代碼，這種方式我們叫靜態(tài)注冊
動(dòng)態(tài)注冊事件：是指先通過js 代碼得到標(biāo)簽的dom 對象，然后再通過dom 對象.事件名= function(){} 這種形式賦于事件響應(yīng)后的代碼，叫動(dòng)態(tài)注冊

動(dòng)態(tài)注冊基本步驟：

1、獲取標(biāo)簽對象
2、標(biāo)簽對象.事件名= fucntion(){}

靜態(tài)動(dòng)態(tài)注冊舉例

onload 加載完成事件

靜態(tài)綁定：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>靜態(tài)注冊</title>
  <script type="text/javascript">
  // onload 事件的方法
   function onloadFun() {
   alert('靜態(tài)注冊onload 事件，所有代碼');
   }
  </script>
</head>
<!--靜態(tài)注冊onload 事件,onload 事件是瀏覽器解析完頁面之后就會(huì)自動(dòng)觸發(fā)的事件,body標(biāo)簽的屬性，通過這個(gè)屬性注冊-->
<body οnlοad="onloadFun();">
</body>
</html>

動(dòng)態(tài)綁定：

固定的寫法，通過window.onload(){}方法，在大括號內(nèi)調(diào)用方法的

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>動(dòng)態(tài)注冊</title>
  <script type="text/javascript">
   // onload 事件動(dòng)態(tài)注冊。是固定寫法
   window.onload = function () {
   alert("動(dòng)態(tài)注冊的onload 事件");
   }
  </script>
</head>
<body>
</body>
</html>

onclick單擊事件

舉例，從這個(gè)例子更好的體會(huì)兩者定義的不同

onclick靜態(tài)綁定事件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
 function onclickFun() {
  alert("靜態(tài)注冊onclick 事件");
 }
</script>
</head>
<body>
<!--靜態(tài)注冊onClick 事件，通過button的onclick屬性-->
<button onclick="onclickFun();">按鈕1</button>
</body>
</html>

onclick動(dòng)態(tài)綁定事件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
   window.onload = function () {
   //getElementById 通過id 屬性獲取標(biāo)簽對象
   var btnObj = document.getElementById("btn01");
   // 2 通過標(biāo)簽對象.事件名= function(){}
   btnObj.onclick = function () {
    alert("動(dòng)態(tài)注冊的onclick 事件");
   }
   }
</script>
</head>
<body>
 
<button id="btn01">按鈕2</button>
</body>
</html>

以上就是JavaScript事件概念詳解(區(qū)分靜態(tài)注冊和動(dòng)態(tài)注冊)的詳細(xì)內(nèi)容，更多關(guān)于JavaScript 事件的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: