JavaScript事件概念詳解(區分靜態註冊和動態註冊)

Posted on by

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 事件的資料請關註WalkonNet其它相關文章！

推薦閱讀：