Heim > Artikel > Web-Frontend > Detaillierte Erläuterung des Auslösevorgangs der Javascript-Mehrfachauswahlbox

Detaillierte Erläuterung des Auslösevorgangs der Javascript-Mehrfachauswahlbox

巴扎黑Original: 2017-08-14 13:49:511337Durchsuche

In diesem Artikel werden hauptsächlich relevante Informationen zur Analyse des Select-Trigger-Prozesses in JavaScript vorgestellt. Hier finden Sie eine ausführliche Analyse des Select-Trigger-Prozesses, auf die sich alle Freunde in Not beziehen können it

Analyse des durch das Auswahlfeld in JavaScript ausgelösten Ereignisprozesses

Wir haben Mousedown, Mouseup, Click, Input, Change, Focus, Blur, Keydowm, Keydown geschrieben Ereignisse und binden sie an die Auswahl, um den Auslöseprozess von Ereignissen im Zusammenhang mit der Kundenauswahl zu simulieren:

Schließlich wurde festgestellt, dass der Auslöseprozess grundsätzlich derselbe ist, wenn keine Auswahl vorhanden ist oder aktuell Wenn die angezeigte Option ausgewählt ist, wird das Änderungsereignis nicht ausgelöst. Nur wenn die Auswahl unterschiedlich ist. Das Änderungsereignis wird nur ausgelöst, wenn die Option ausgewählt ist. Das Folgende ist ein Screenshot des Ereignisses, das nach Auswahl verschiedener Optionen ausgelöst wurde:

Wir können feststellen, dass Änderungen das Eingabeereignis und das Änderungsereignis auslösen können, und zwar wenn keine Änderung erfolgt oder Dropdown Wenn Sie direkt auf eine andere Stelle klicken, werden diese beiden Ereignisse nicht ausgelöst:

Angehängter Code:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>Title</title> 
</head> 
<body> 
<select name="" id="input"> 
  <option value="1">1</option> 
  <option value="">2</option> 
  <option value="">3</option> 
  <option value="">4</option> 
  <option value="">5</option> 
</select> 
</body> 
<script> 
  document.getElementById("input").addEventListener("focus",function () { 
    console.log("focus"); 
  }); 
 
  document.getElementById("input").addEventListener("mousedown",function () { 
    console.log("mousedown"); 
  }); 
 
  document.getElementById("input").addEventListener("mouseup",function () { 
    console.log("mouseup"); 
  }); 
 
  document.getElementById("input").addEventListener("input",function () { 
    console.log("input"); 
  }); 
 
  document.getElementById("input").addEventListener("change",function () { 
    console.log("change"); 
  }); 
 
  document.getElementById("input").addEventListener("blur",function () { 
    console.log("blur"); 
  }); 
 
  document.getElementById("input").addEventListener("click",function () { 
    console.log("click"); 
  }); 
 
  document.getElementById("input").addEventListener("keydown",function () { 
    console.log("keydown"); 
  }); 
 
  document.getElementById("input").addEventListener("keyup",function () { 
    console.log("keyup"); 
  }); 
 
  document.getElementById("input").addEventListener("select",function () { 
    console.log("select"); 
  }); 
 
 
</script> 
</html>

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Auslösevorgangs der Javascript-Mehrfachauswahlbox. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：Erläuterung, wie man mit JavaScript die Anzahl der Nachkommastellen ermitteltNächster Artikel：Erläuterung, wie man mit JavaScript die Anzahl der Nachkommastellen ermittelt

In Verbindung stehende Artikel

Mehr sehen