Detaillierte Erläuterung der Verwendungsbeispiele für den JS-Ereignis-Listener

Detaillierte Erläuterung der Verwendungsbeispiele für den JS-Ereignis-Listener_Javascript-Kenntnisse

WBOY

Freigeben： 2016-05-16 15:57:13

Original

1274 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt die Verwendung des js-Ereignis-Listeners. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

1. Wenn dasselbe Objekt die .onclick-Schreibmethode verwendet, um mehrere Methoden auszulösen, überschreibt die letztere Methode die vorherige Methode. Das heißt, wenn das Onclick-Ereignis des Objekts auftritt, wird nur die letzte Bindung ausgeführt . Methode. Beim Abhören von Ereignissen erfolgt kein Überschreiben und jedes gebundene Ereignis wird ausgeführt. Wie folgt:

window.onload = function(){ 
  var btn = document.getElementById("yuanEvent"); 
  btn.onclick = function(){ 
    alert("第一个事件"); 
  } 
  btn.onclick = function(){ 
    alert("第二个事件"); 
  } 
  btn.onclick = function(){ 
    alert("第三个事件"); 
  } 
}

Nach dem Login kopieren

Am Ende wird nur das dritte Ereignis ausgegeben, da die letztere Methode die vorherige Methode überschreibt.

Ursprüngliche Ereignisbindungsfunktion 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); 
}

Nach dem Login kopieren

Ausgabe: das erste Hörereignis und das zweite Hörereignis

2. Nachdem Sie die Ereignisüberwachung zum Binden von Methoden an Objekte verwendet haben, können Sie die entsprechende Bindung wie folgt aufheben:

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); 
}

Nach dem Login kopieren

Ausgabe: Zweites Hörereignis

3. Wenn Sie die Bindung eines Ereignisses aufheben, müssen Sie das Handle der Funktion verwenden. Durch Schreiben der gesamten Funktion wird die Bindung nicht aufgehoben.

Falsche Schreibweise:

btn.addEventListener("click",function(){ 
  alert(11); 
}); 
btn.removeEventListener("click",function(){ 
  alert(11); 
});

Nach dem Login kopieren

Richtiges Schreiben:

btn.addEventListener("click",eventTwo); 
btn.removeEventListener("click",eventOne);

Nach dem Login kopieren

Zusammenfassung: Die Abhörereignisse nach der Kapselung der Funktion lauten wie folgt und sind mit allen gängigen Mainstream-Browsern kompatibel.

/* 
 * 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); 
}

Nach dem Login kopieren

Beispiel:

<!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>

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.