简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

Heim  >  Artikel  >  Web-Frontend  >  Welche Ereignisse gibt es in js? Einführung in häufige Ereignisse in js

Welche Ereignisse gibt es in js? Einführung in häufige Ereignisse in js

不言
不言Original
2018-09-18 10:08:1810311Durchsuche

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)">36cc49f0c466276486e50c850b7e4956, wo Sie nach dem Laden eine Methode schreiben können, z. B.: onload="test()", und dann eine test()-Methode in JavaScript schreiben, dann wann Die Seite wird geladen. Rufen Sie zuerst diese Methode auf.

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 6c04bd5ca3fcae76e30b72ad730ca86d-Tag geschrieben werden

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 ff9c23ada1bcecdd1a0fb5d5a0f18437, geschrieben im Formular-Tag ff9c23ada1bcecdd1a0fb5d5a0f18437 Syntax: onsubmit="Funktionsname zurückgeben()".

Codebeispiel für ein onsubmit-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("测试onsubmit........"+testForm.name.value);
  }
 </script>
</head>
<body>
<formaction=""method="post"name="testForm"onsubmit="returnmove()">
    <inputtype="text"name="name"value="">
    <br>
    <inputtype="submit"name="submit"value="测试onsubmit"/>
</form>
</body>
</html>

7. Häufig verwendete Ereignisse in js: mausbezogene Ereignisse

Onmouseover: Wenn sich die Maus über den Bereich eines Objekts bewegt, wird ein Ereignis zum Aufruf der Funktion ausgelöst. Hinweis: Im selben Bereich wird die Funktion unabhängig von Ihrer Bewegung nur einmal ausgelöst.

Onmouseout: Wenn die Maus den Bereich eines Objekts verlässt, wird ein Ereignis ausgelöst, um die Funktion aufzurufen.

Onmousemove: Wenn sich die Maus über den Bereich eines Objekts bewegt, wird ein Ereignis ausgelöst, um die Funktion aufzurufen. Hinweis: Im selben Bereich wird ein Ereignis ausgelöst, solange die Maus einmal bewegt wird.

Codebeispiel: 

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript的一些常用方法</title>
<scripttype="text/javascript">
functionbigImg(x)
{
x.style.height="180px";
x.style.width="180px";
}
functionnormalImg(x)
{
x.style.height="128px";
x.style.width="128px";
}
</script>
</head>
<body>
<imgonmousemove="bigImg(this)"onmouseout="normalImg(this)"border="0"src="images/defaultAvatar.gif"alt="Smiley">
</body>
</html>

Onmouseup: Ereignis auslösen, wenn die Maus losgelassen wird

Onmousedown: Wenn die Maustaste gedrückt wird. Wann ein Ereignis wird ausgelöst

Codebeispiel: 

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript的一些常用方法</title>
<scripttype="text/javascript">
functionmouseDown(){
    document.getElementById("p1").style.color="red";
}
functionmouseUp(){
    document.getElementById("p1").style.color="green";
}
</script>
</head>
<body>
<pid="p1"onmousedown="mouseDown()"onmouseup="mouseUp()">
请点击文本！mouseDown()函数当鼠标按钮在段落上被按下时触发。此函数把文本颜色设置为红色mouseUp(。) 函数在鼠标按钮被释放时触发。mouseUp() 函数把文本的颜色设置为绿色。
</p>
</body>
</html>

Weitere Informationen zu js-Ereignissen finden Sie im js-Entwicklungshandbuch.

Das obige ist der detaillierte Inhalt vonWelche Ereignisse gibt es in js? Einführung in häufige Ereignisse in js. 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：Welche sechs Datentypen gibt es in Javascript? js-Datentypen und allgemeine implizite Konvertierungslogik (Einführung)Nächster Artikel：Welche sechs Datentypen gibt es in Javascript? js-Datentypen und allgemeine implizite Konvertierungslogik (Einführung)

In Verbindung stehende Artikel

Mehr sehen