js事件監聽器用法實例詳解_javascript技巧
- WBOY原創
- 2016-05-16 15:57:131278瀏覽
本文實例講述了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>
希望本文所述對大家的javascript程式設計有所幫助。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn