JavaScript 註冊事件處理函式

admin發表於2018-09-22
JavaScript事件函式

在JavaScript中，為元素註冊事件處理函式的方式不止一種。

下面分別通過程式碼例項做一下介紹它們各自的使用方式和優缺點。

一.直接在HTML標籤內部註冊事件處理函式：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#ant{
    width:100px;
    height:100px;
    background-color:red;
}
</style>
<script type="text/javascript">  
function changeBg(){
  let odiv = document.getElementById("ant");
  odiv.style.backgroundColor = "green";
}
</script>
</head>
<body>
  <div id="ant"></div>
  <input type="button" onclick="changeBg()" value="檢視演示"/>
</body>
</html>

上面程式碼為input按鈕註冊click點選事件處理函式。

註冊方式解析如下：

（1）.事件處理函式在HTML元素內部註冊。

（2）.onclick是HTML元素的事件屬性，它的屬性值是事件觸發後呼叫執行的函式。

（3）.引號中的函式必須帶有小括號，比如changeBg()而不是changeBg。

因為此種方式註冊事件處理函式等同於如下程式碼：

[JavaScript] 純文字檢視 複製程式碼
obt.onclick=function(){
    changeBg()
  }

事件發生後，就會執行匿名的事件處理函式，然後呼叫changeBg函式，所以必須帶小括號。

（4）.onclick事件屬性前面必須帶on。

優缺點如下：

（1）.註冊方式簡單，初學者可能最先掌握此方式。

（2）.瀏覽器相容性好，各個瀏覽器都支援。

（3）.與HTML標籤內容混合在一起，讓頁面看起來十分亂。

（4）.只能註冊一個事件處理函式，大家知道HTML元素寫兩個屬性只會有一個生效，另一個被覆蓋。

二.通過dom元素物件事件屬性註冊：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#ant{
    width:100px;
    height:100px;
    background-color:red;
}
</style>
<script type="text/javascript">  
function changeBg(){
  let odiv = document.getElementById("ant");
  odiv.style.backgroundColor = "green";
}
window.onload=function(){
  let obt=document.getElementById("bt");
  obt.onclick=function(){
    changeBg();
  }
}
</script>
</head>
<body>
  <div id="ant"></div>
  <input type="button" id="bt" value="檢視演示"/>
</body>
</html>

此程式碼實現了上一段程式碼相同的效果，點選按鈕可以修改div顏色的背景色。

註冊方式解析如下：

（1）.獲取按鈕的dom元素物件obt。

（2）.然後通過dom元素物件的事件屬性onclick註冊事件處理函式，更通俗一點，就是為dom元素物件的事件屬性賦值一個函式，當事件觸發時，就會呼叫此函式。

（3）.點選按鈕，事件觸發，呼叫事件處理函式，此事件處理函式再呼叫其內部的changeBg函式。

優缺點如下：

（1）.容易掌握。

（2）.瀏覽器相容性好，各個瀏覽器都支援。

（3）.只能為同一個元素物件註冊一個相同型別的事件處理函式，否則後面的會覆蓋前面的。

三.addEventListener註冊事件處理函式：

此方法可以為指定元素註冊事件處理函式，ES5新增。

優點與缺點總結如下：

（1）.可以為同一個元素註冊多個事件處理函式。

（2）.更能更多一些。

（3）.掌握起來稍稍複雜（當然它也很簡單，與前兩種比稍微複雜一些）。

（4）.具有一定相容性問題，IE9以下瀏覽器不支援。

此方法的具體用法可以參閱JavaScript addEventListener()一章節。

相關文章