Detaillierte Erläuterung des Auslösevorgangs der Javascript-Mehrfachauswahlbox-js-Tutorial-php.cn

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

巴扎黑

Freigeben： 2017-08-14 13:49:51

Original

1411 Leute haben es durchsucht

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>

Nach dem Login kopieren

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!