js事件監聽器用法例項詳解
阿新 • • 發佈：2018-11-16
本文例項講述了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>