suchen

Heim  >  Artikel  >  Web-Frontend  >  Detaillierte Erläuterung der Verwendungsbeispiele für den JS-Ereignis-Listener_Javascript-Kenntnisse

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

WBOY
WBOYOriginal
2016-05-16 15:57:131252Durchsuche

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("第三个事件"); 
  } 
}

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

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

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

Richtiges Schreiben: 

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

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

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>

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

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Wie jquery XML-Dateien liest, um eine dreistufige Verknüpfung von Provinzen, Städten und Kreisen zu realisieren_jqueryNächster Artikel：Wie jquery XML-Dateien liest, um eine dreistufige Verknüpfung von Provinzen, Städten und Kreisen zu realisieren_jquery

In Verbindung stehende Artikel

Mehr sehen