Heim > Web-Frontend > js-Tutorial > Hauptteil

Ereignisantwort in JS

不言
Freigeben: 2018-04-04 13:39:21
Original
1343 Leute haben es durchsucht

Der Inhalt dieses Artikels handelt von der Zeitreaktion von js. Jetzt teile ich ihn mit allen. Freunde in Not können sich auch auf den Inhalt dieses Artikels beziehen.

Hier sind einige häufig verwendete Zeitreaktionen Die Anwendung ist einfach und die Wirkung ist sehr gut.

1. Auslöser durch Tastendruck

Diese Art der Ereignisreaktion kommt sehr häufig vor und kommt auch von Anfang an vor. Um ein einfaches Beispiel zu geben:

<!DOCTYPE html>  
<html>  
<head>  
<title>javascript</title>  
</head>  
<body>  
    <p>点击确认查看日期</p>  
    <button onclick="myFunction()">确认</button>  
    <p id="demo"></p>  
    <script>  
    function myFunction() {  
        document.getElementById("demo").innerHTML =Date();  
}  
</script>  
</body>
Nach dem Login kopieren

Der Kern dieser Art von Methode besteht darin, onclick+Funktionsnamen zur Schaltflächenbeschriftung hinzuzufügen, um die Funktion auszulösen.

2. Mausauslöser oder Eingabeauslöser.

Die Mängel der ersten Methode sind eigentlich sehr offensichtlich. Wenn ich beispielsweise einen Datenstapel verarbeiten möchte und viele Eingabefelder vorhanden sind, muss ich dann nach jedem Feld einen Bestätigungsschlüssel hinzufügen? Dies ist für Benutzereingaben sehr unzumutbar, daher ist es viel effizienter, beim Ausfüllen eines Formulars oder mehrerer Eingabefelder die Maus oder die Eingabetaste zu verwenden, um den Effekt auszulösen.

<!DOCTYPE html>  
<html>  
<head>  
<title>javascript</title>  
</head>  
<body>  
    <p>请输入下列表框</p>  
	<label>表框一</label><input type="text" id="t1" onchange="myFunction()"/>  
    <p id="demo1"></p>  
    <script>  
    function myFunction() {  
        var x = document.getElementById("t1").value;
		document.getElementById("demo1").innerHTML="表格一的内容是"+x;
}  
</script>  
</body>
Nach dem Login kopieren

Der Kern besteht darin, die Funktion im Eingabefeld mit onchange aufzurufen. Nach dem Ausfüllen wird die Funktion aufgerufen, indem Sie mit der Maus auf eine beliebige Stelle klicken oder die Eingabetaste drücken Verarbeitung.

3. Jederzeit auslösen

Für reale Beispiele können Sie die Online-Hexadezimalkonvertierung auf der Webseite ausprobieren Das Drücken der Bestätigungstaste erfordert nicht, dass Sie die Eingabetaste drücken. Sie können es jederzeit eingeben und konvertieren. Unter Einbeziehung des Rechners auf dem Mobiltelefon berechnet es den Eingabewert in Echtzeit.

<!DOCTYPE html>  
<html>  
<head>  
<title>javascript</title>  
</head>  
<body>  
    <p>请输入下列表框</p>  
	<label>表框一</label><input type="text" id="t1" onKeyUp="myFunction()"/>  
    <p id="demo1"></p>  
    <script>  
    function myFunction() {  
        var x = document.getElementById("t1").value;
		document.getElementById("demo1").innerHTML="表格一的内容是"+x;
}  
</script>  
</body>
Nach dem Login kopieren

Der Kern der Verwendungsmethode ist oneKeyUp + Methodenname. Darüber hinaus gibt es auch die Schlüsselwörter onkeypress, oneKeyDown usw. Ich persönlich finde oneKeyUp praktischer.

Verwandte Empfehlungen:

JS-Implementierung von Event-Response-Beispiel für OCX-Steuerung_Javascript-Fähigkeiten

Vollständige Anmerkungen zur Javascript-Event-Response-Studie _Javascript Fähigkeiten






Das obige ist der detaillierte Inhalt vonEreignisantwort in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!