本文實例講述了js事件監聽器用法。分享給大家供大家參考。具體分析如下：
1、當同一個對象使用.onclick的寫法觸發多個方法的時候，後一個方法會把前一個方法覆蓋掉，也就是說，在對象的onclick事件發生時，只會執行最後綁定的方法。而用事件監聽則不會有覆蓋的現象，每個綁定的事件都會被執行。如下：
window.onload = function(){
var btn = document.getElementById("yuanEvent");
btn.onclick = function(){
alert("第一個事件");
}
btn.onclick = function(){
alert("第二個事件");
}
btn.onclick = function(){
alert("第三個事件");
}
}
最後只輸出：第三個事件，因為後一個方法都把前一個方法覆蓋掉了。
原生態的事件綁定函數addEventListener：
var eventOne = function(){
alert("第一個監聽事件");
}
function eventTwo(){
alert("第二個監聽事件");
}
window.onload = function(){
var btn = document.getElementById("yuanEvent");
//addEventListener：綁定函數
btn.addEventListener("click",eventOne);
btn.addEventListener("click",eventTwo);
}
輸出：第一個監聽事件 和 第二個監聽事件
2、采用事件監聽給對象綁定方法後，可以解除相應的綁定，寫法如下：
var eventOne = function(){
alert("第一個監聽事件");
}
function eventTwo(){
alert("第二個監聽事件");
}
window.onload = function(){
var btn = document.getElementById("yuanEvent");
btn.addEventListener("click",eventOne);
btn.addEventListener("click",eventTwo);
btn.removeEventListener("click",eventOne);
}
輸出：第二個監聽事件
3、解除綁定事件的時候一定要用函數的句柄，把整個函數寫上是無法解除綁定的。
錯誤寫法：
btn.addEventListener("click",function(){
alert(11);
});
btn.removeEventListener("click",function(){
alert(11);
});
正確寫法：
btn.addEventListener("click",eventTwo);
btn.removeEventListener("click",eventOne);
總結：對函數進行封裝後的監聽事件如下，兼容各大主流浏覽器。
/*
* addEventListener:監聽Dom元素的事件
*
* target：監聽對象
* type：監聽函數類型，如click,mouseover
* func：監聽函數
*/
function addEventHandler(target,type,func){
if(target.addEventListener){
//監聽IE9，谷歌和火狐
target.addEventListener(type, func, false);
}else if(target.attachEvent){
target.attachEvent("on" + type, func);
}else{
target["on" + type] = func;
}
}
/*
* removeEventHandler:移除Dom元素的事件
*
* target：監聽對象
* type：監聽函數類型，如click,mouseover
* func：監聽函數
*/
function removeEventHandler(target, type, func) {
if (target.removeEventListener){
//監聽IE9，谷歌和火狐
target.removeEventListener(type, func, false);
} else if (target.detachEvent){
target.detachEvent("on" + type, func);
}else {
delete target["on" + type];
}
}
var eventOne = function(){
alert("第一個監聽事件");
}
function eventTwo(){
alert("第二個監聽事件");
}
window.onload = function(){
var bindEventBtn = document.getElementById("bindEvent");
//監聽eventOne事件
addEventHandler(bindEventBtn,"click",eventOne);
//監聽eventTwo事件
addEventHandler(bindEventBtn,"click",eventTwo );
//監聽本身的事件
addEventHandler(bindEventBtn,"click",function(){
alert("第三個監聽事件");
});
//取消第一個監聽事件
removeEventHandler(bindEventBtn,"click",eventOne);
//取消第二個監聽事件
removeEventHandler(bindEventBtn,"click",eventTwo);
}
實例：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Event</title>
<script type="text/javascript">
function addEventHandler(target,type,func){
if(target.addEventListener){
//監聽IE9，谷歌和火狐
target.addEventListener(type, func, false);
}else if(target.attachEvent){
target.attachEvent("on" + type, func);
}else{
target["on" + type] = func;
}
}
function removeEventHandler(target, type, func) {
if (target.removeEventListener){
//監聽IE9，谷歌和火狐
target.removeEventListener(type, func, false);
} else if (target.detachEvent){
target.detachEvent("on" + type, func);
}else {
delete target["on" + type];
}
}
var eventOne = function(){
alert("第一個監聽事件");
}
function eventTwo(){
alert("第二個監聽事件");
}
window.onload = function(){
var bindEventBtn = document.getElementById("bindEvent");
//監聽eventOne事件
addEventHandler(bindEventBtn,"click",eventOne);
//監聽eventTwo事件
addEventHandler(bindEventBtn,"click",eventTwo );
//監聽本身的事件
addEventHandler(bindEventBtn,"click",function(){
alert("第三個監聽事件");
});
//取消第一個監聽事件
removeEventHandler(bindEventBtn,"click",eventOne);
//取消第二個監聽事件
removeEventHandler(bindEventBtn,"click",eventTwo);
}
</script>
</head>
<body>
<input type="button" value="測試" id="bindEvent">
<input type="button" value="測試2" id="yuanEvent">
</body>
</html>
PS：這裡再為大家提供一個關於JS事件的在線工具，歸納總結了JS常用的事件類型與相關函數功能：
javascript事件與功能說明大全：
http://tools.jb51.net/table/javascript_event
希望本文所述對大家的javascript程序設計有所幫助。