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

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其它相關文章!