js事件监听器用法实例详解
?
這篇文章主要介紹了js事件監聽器用法,以實例形式較為詳細的分析了javascript事件監聽器使用注意事項與相關技巧,需要的朋友可以參考下
本文實例講述了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>
轉自：http://www.jb51.net/article/67051.htm
?
轉載于:https://www.cnblogs.com/zhn0823/p/5821505.html
總結
以上是生活随笔為你收集整理的js事件监听器用法实例详解的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： HBase API 详细例子(封装的DA
- 下一篇： 42:换汽水瓶ExchangeBottl