實例講解javascript註冊事件處理函數_javascript技巧
- WBOY原創
- 2016-05-16 15:20:431440瀏覽
事件是javascript的核心內容，它的重要性這裡就不多介紹了。觸發事件之後就需要有事件處理函數去處理，例如我們可以定義當點擊一個按鈕之後，將一個div的背景設為綠色，那麼就先看一下如何實現此效果，程式碼實例如下:
<html>
<head>
<meta charset=" utf-8">
<title>javascript如何注册事件处理函数</title>
<style type="text/css">
#mydiv{
width:100px;
height:100px;
background-color:red;
}
</style>
<script type="text/javascript">
function changebg(){
var mydiv=document.getElementById("mydiv");
mydiv.style.backgroundColor="green";
}
</script>
</head>
<body>
<div id="mydiv"></div>
<button id="bt">点击查看效果</button>
</body>
</html>
在上述程式碼中，點擊按鈕就會將div的背景顏色設為綠色，這是因為程式碼為按鈕的onclick事件註冊了事件處理函數，此函數可以將div的背景顏色設為綠色。以下就結合實例簡單介紹如何為物件的事件註冊事件處理函數：
方式一:
直接在HTML程式碼中註冊事件處理函數，也就是直接透過HTML屬性來設定事件處理函數，事件處理函數要執行的程式碼就是HTML的屬性值，在文章的開頭就是使用的方式。優缺點如下:
- 1.容易理解，使用簡單。
- 2.各主流瀏覽器都支援此方式。
- 3.與HTML程式碼混合在一起，使頁面十分的繁雜，不符合表現與內容分離的原則。
- 4.只能夠在同一個物件註冊一個相同類型的事件處理函數。
方式二:
事件句柄方式，所謂的事件句柄也就是事件處理函數，指定物件的指定事件對應一個事件句柄。使用此種方式註冊事件處理函數，首先要取得物件的引用，然後將事件句柄賦值給物件的對應的事件處理函數屬性即可。其實方式一也是事件句柄方式的一種。
程式碼實例如下:
<html>
<head>
<meta charset=" utf-8">
<title>javascript如何注册事件处理函数</title>
<style type="text/css">
#mydiv{
width:100px;
height:100px;
background-color:red;
}
</style>
<script type="text/javascript">
window.onload=function(){
var mydiv=document.getElementById("mydiv");
var bt=document.getElementById("bt");
bt.onclick=function(){
mydiv.style.backgroundColor="green";
}
}
</script>
</head>
<body>
<div id="mydiv"></div>
<button id="bt">点击查看效果</button>
</body>
</html>
以上程式碼中，先使用document.getElementById("bt")取得按鈕物件的引用，然後將事件句柄（事件處理函數）賦值給按鈕物件的onclick事件屬性，這樣當點擊按鈕時就會觸發onclick事件，進而執行事件句柄中的程式碼。優缺點如下:
- 1.簡單容易理解。
- 2.個瀏覽器都支援。
- 3.只能夠在同一個物件註冊一個相同類型的事件處理函數。
方式三:
是一種更進階的事件註冊方式，那就是事件監聽器，這種方式解決了在指定物件只能註冊一個指定類型事件的處理函數問題。不過存在一定的相容性問題，以下分別介紹一下:
1).IE瀏覽器:
在IE瀏覽器中可以使用attachEvent()和detachEvent()方法為指定物件註冊事件處理函數和刪除已註冊的事件處理函數。
文法格式如下:
element.attachEvent("onevent",eventListener)
此函數有兩個參數，第一個參數是事件類型的名稱，第二個參數就是要註冊的事件處理函數。
程式碼實例如下:
<html>
<head>
<meta charset=" utf-8">
<title>javascript如何注册事件处理函数</title>
<style type="text/css">
#mydiv{
width:100px;
height:100px;
background-color:red;
}
</style>
<script type="text/javascript">
window.onload=function(){
var mydiv=document.getElementById("mydiv");
var bt=document.getElementById("bt");
bt.attachEvent("onclick",changebg);
function changebg(){
mydiv.style.backgroundColor="green";
}
}
</script>
</head>
<body>
<div id="mydiv"></div>
<button id="bt">点击查看效果</button>
</body>
</html>
以上程式碼使用attachEvent()函數為按鈕註冊onclick事件處理函數，不過只能夠在IE瀏覽器中有效。使用detachEvent()函數可以解除原來註冊的事件處理函數，語法格式如下:
element.detachEvent("onevent",eventListener)
格式和attachEvent()函數式一樣的。
特別說明:第一個參數的必須帶有on，例如點擊事件就要寫成"onclick"。
2).標準瀏覽器:
在標準瀏覽器中（包括IE9和IE9以上瀏覽器），若要使用addEventListener()和removeEventListener()函式註冊和刪除註冊處理函數。
文法格式如下:
element.addEventListener('event', eventListener, useCapture);
此函數有三個參數，第一個參數是事件類型名稱，第二個參數就是要註冊的事件處理函數，第三個函數規定此處理函數是在事件傳遞過程中的捕獲階段被呼叫還是冒泡階段被調用，在預設條件下，此屬性值為false麼也就是在冒泡階段調用事件處理函數。
特別說明:第一個參數不能夠帶有on，例如點擊事件不能寫成"onclick"，而要寫成"click"。
程式碼實例如下:
<html>
<head>
<meta charset=" utf-8">
<title>javascript如何注册事件处理函数</title>
<style type="text/css">
#mydiv{
width:100px;
height:100px;
background-color:red;
}
</style>
<script type="text/javascript">
window.onload=function(){
var mydiv=document.getElementById("mydiv");
var bt=document.getElementById("bt");
bt.addEventListener("click",changebg);
function changebg(){
mydiv.style.backgroundColor="green";
}
}
</script>
</head>
<body>
<div id="mydiv"></div>
<button id="bt">点击查看效果</button>
</body>
</html>
以上代码在IE9和IE9以上或者其他标准浏览器中，点击按钮可以将div的背景颜色设置为绿色。使用removeEventListener()函数可以解除原来注册的事件处理函数，语法格式如下:
element.removeEventListener('event', eventListener, useCapture);
格式和addEventListener()函数式一样的。
跨浏览器注册事件处理函数:
只要加个判断语句即可，代码如下:
var EventUtil={
//注册
addHandler: function(element, type, handler){
if (element.addEventListener){
element.addEventListener(type, handler, false);
} else if (element.attachEvent){
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
},
//移除注册
removeHandler: function(element, type, handler){
if (element.removeEventListener){
element.removeEventListener(type, handler, false);
} else if (element.detachEvent){
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = null;
}
}
};
以上就是本文的详细内容，希望对大家的学习有所帮助。