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

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

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

js中的事件

什么是事件？事件是電腦輸入設備與頁面進行交互的響應，我們稱之為事件

事件類型

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

常用的事件

onload 加載完成事件：頁面加載完成之后，常用于做頁面js 代碼初始化操作
onclick 單擊事件：常用于按鈕的點擊響應操作。
onblur 失去焦點事件：常用用于輸入框失去焦點后驗證其輸入內(nèi)容是否合法。
onchange 內(nèi)容發(fā)生改變事件：常用于下拉列表和輸入框內(nèi)容發(fā)生改變后操作
onsubmit 表單提交事件：常用于表單提交前，驗證所有表單項是否合法。

事件的注冊

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

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

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

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

靜態(tài)動態(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 事件是瀏覽器解析完頁面之后就會自動觸發(fā)的事件,body標簽的屬性，通過這個屬性注冊-->
<body οnlοad="onloadFun();">
</body>
</html>

動態(tài)綁定：

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

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

onclick單擊事件

舉例，從這個例子更好的體會兩者定義的不同

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動態(tài)綁定事件

<!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("動態(tài)注冊的onclick 事件");
   }
   }
</script>
</head>
<body>
 
<button id="btn01">按鈕2</button>
</body>
</html>

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

您可能感興趣的文章: