JavaScript gibt uns die Möglichkeit, dynamische Seiten zu erstellen. Ereignisse sind Verhaltensweisen, die von JavaScript erkannt werden können. Jedes Element auf einer Webseite kann bestimmte Ereignisse generieren, die JavaScript-Funktionen auslösen. Was sind also die Ereignisse in js? Dieser Artikel stellt Ihnen häufig verwendete Ereignisse in js vor.
Kommen wir ohne weitere Umschweife direkt zur Sache.
1. Onclick-Ereignis, ein häufig verwendetes Ereignis in js
Click-Ereignis (onclick ist keine Methode in js, onclick ist nur eine vom Browser bereitgestellte Dom-Schnittstelle für js, damit js DOM bedienen kann, muss bei onclick beispielsweise die Groß-/Kleinschreibung beachtet werden.
Codebeispiel für ein Onclick-Ereignis in js:
<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript的一些常用方法</title>
<scripttype="text/javascript">
functionmyFunction(){
alert("测试onclick点击事件");
}
</script>
</head>
<body>
<center>
<buttononclick="myFunction()">点击这里</button>
</center>
</body>
</html>Erklärung:
onclick wird normalerweise in den folgenden Basisobjekten generiert:
Button (Button-Objekt), Checkbox (Checkbox), Radio (Radio-Button), Reset Schaltflächen (Zurücksetzen-Schaltfläche), Senden-Schaltflächen (Senden-Schaltfläche)
2. Das Onload-Ereignis, ein häufig verwendetes Ereignis in js,
kann von body ausgeführt werden, < ;bodyonload="alert (123)">
Codebeispiel für Onload-Ereignis in js:
<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript的一些常用方法</title>
<scripttype="text/javascript">
functiontest(){
alert("测试onload方法");
}
</script>
</head>
<bodyonload="test()">
</body>
</html>Hinweis: Diese Methode kann nur im
3. Das onchange-Ereignis, ein häufig verwendetes Ereignis in js,
wird ausgelöst, wenn sich der Inhalt ändert. Es kann für Objekte wie Textfelder und Listenfelder verwendet werden. Dieses Ereignis wird im Allgemeinen verwendet, um auf andere Änderungen zu reagieren, die durch die Änderung des Inhalts durch den Benutzer verursacht werden.
Codebeispiel für ein Onchange-Ereignis in js:
<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript的一些常用方法</title>
<scripttype="text/javascript">
functionupperCase(){
varx = document.getElementById("fname").value;
document.getElementById("fname").value = x.toUpperCase();
}
</script>
</head>
<body>
<p>
<labelfor="name">用户名：</label>
<inputtype="text"id="fname"onchange="upperCase()"value=""/>
</p>
</body>
</html>Beschreibung: Wenn der Benutzer Text in ein Textfeld eingibt, wird das Onchange-Ereignis nicht ausgelöst, sondern nur der Benutzer Die Eingabe endet. Klicken Sie abschließend auf den Bereich außerhalb des Textfelds, um das Ereignis auszulösen, wenn das Textfeld den Fokus verliert. Wenn es sich um ein Dropdown-Feld handelt, wird es ausgelöst, nachdem die Auswahl abgeschlossen ist.
Der Effekt des obigen Beispiels besteht darin, dass der Inhalt in Großbuchstaben umgewandelt wird, wenn das Eingabefeld den Fokus verliert. Dies liegt daran, dass die Eingabe den Fokus verlieren muss, bevor Inhaltsänderungen erkannt werden können. Das Änderungsereignis wird normalerweise für Dropdown-Menü-Auswahl-Tags verwendet.
4. Onblur-Ereignis und Onfocus-Ereignis, häufig verwendete Ereignisse in js
Dieses Ereignis wird ausgelöst, wenn das aktuelle Element den Fokus verliert, und das entsprechende Onfocus-Ereignis : erhält Fokus-Ereignis; onblur-Ereignis: Das Element verliert den Fokus.
Codebeispiele für Onblur-Ereignisse und Onfocus-Ereignisse in js:
<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript的一些常用方法</title>
<scripttype="text/javascript">
functionchkvalue(txt) {
if(txt.value=="") alert("文本框里必须填写内容!");
}
functionsetStyle(x){
document.getElementById(x).style.background="yellow"
}
</script>
</head>
<body>
失去焦点：
<inputtype="text"name="name"value=""size="30"onblur="chkvalue(this)"><br>
得到焦点：
<inputtype="text"id="name"value=""size="30"onfocus="setStyle(this.id)">
</body>
</html>5. Onscroll-Ereignis, häufig verwendete Ereignisse in js
Fenster-Scroll-Ereignis: Funktion, die beim Scrollen der Seite aufgerufen wird. Dieses Ereignis wird außerhalb der Methode ohne Klammern nach dem Funktionsnamen geschrieben, zum Beispiel window.onscroll=move.
Codebeispiel für ein Onscroll-Ereignis in js:
<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript的一些常用方法</title>
<scripttype="text/javascript">
functionmove() {
alert("页面滚动时调用");
}
window.onscroll = move;
</script>
</head>
<body>
测试onscroll方法<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
测试onscroll方法<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
测试onscroll方法<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
测试onscroll方法<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
</body>
</html>6. Das onsubmit-Ereignis, ein häufiges Ereignis in js,
gehört zum Formularelement