Was ist ein Ereignis?
JavaScript erstellt dynamische Seiten. Ereignisse sind Verhaltensweisen, die von JavaScript erkannt werden können. Jedes Element auf einer Webseite kann bestimmte Ereignisse generieren, die JavaScript-Funktionen oder -Prozeduren auslösen können.
1. Mausklickereignis (Onclick)
onclick ist ein Mausklickereignis, das auftritt, wenn mit der Maus auf eine Webseite geklickt wird. Gleichzeitig wird der vom onclick-Ereignis aufgerufene Programmblock ausgeführt, der normalerweise mit Schaltflächen verwendet wird.
Beispiel: Wenn wir auf die Schaltfläche klicken, wird das onclick-Ereignis ausgelöst und die Funktion add2() der Summe zweier Zahlen aufgerufen.
<html>
<head>
<script type="text/javascript">
function add2(){
var numa,numb,sum;
numa=6;
numb=8;
sum=numa+numb;
document.write("两数和为:"+sum); }
</script>
</head>
<body>
<form>
<input name="button" type="button" value="点击提交" onclick="add2()" />
</form>
</body>
</html>
Nach dem Login kopieren
Hinweis: Wenn Sie Ereignisse auf einer Webseite verwenden, legen Sie das Ereignisattribut im Element fest.
2. Mouseover-Ereignis (onmouseover)
Mouse-Over-Ereignis Wenn die Maus über ein Objekt bewegt wird, löst das Objekt das Onmouseover-Ereignis aus und führt das vom Onmouseover-Ereignis aufgerufene Programm aus.
Wenn die Maus über die Schaltfläche „OK“ fährt, wird die Funktion message() aufgerufen und das Nachrichtendialogfeld angezeigt.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 鼠标经过事件 </title>
<script type="text/javascript">
function message(){
confirm("请输入密码后，再单击确定!"); }
</script>
</head>
<body>
<form>
密码:
<input name="password" type="password" >
<input name="确定" type="button" value="确定" onmouseover="message()"/>
</form>
</body>
</html>
Nach dem Login kopieren
3. Mouse-out-Ereignis (onmouseout)
Mausbewegungsereignis: Wenn sich die Maus vom aktuellen Objekt wegbewegt, wird das Programm namens onmouseout ausgeführt.
Wenn sich die Maus von der Schaltfläche „Click Me“ entfernt, wird die Funktion message() aufgerufen und ein Nachrichtendialogfeld angezeigt.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标移开事件 </title>
<script type="text/javascript">
function message(){
alert("不要移开，点击后进行慕课网!"); }
</script>
</head>
<body>
<form>
<a href="http://www.imooc.com" onmouseout="message()">点击我</a>
</form>
</body>
</html>
Nach dem Login kopieren
4. Cursor-Fokus-Ereignis (Onfocus)
Wenn ein Objekt auf der Webseite den Fokus erhält, wird das Programm ausgeführt, das den Onfocus-Aufruf ausführt.
Wenn die Dropdown-Liste den Fokus erhält, rufen Sie die Funktion message() auf und ein Dialogfeld wird angezeigt: „Bitte wählen Sie Ihren aktuellen Beruf aus!“ ”.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 光标聚焦事件 </title>
<script type="text/javascript">
function message(){
alert("请选择，您现在的职业！");
}
</script>
</head>
<body>
请选择您的职业：<br>
<form>
<select name="career" onfocus="message()">
<option>学生</option>
<option>教师</option>
<option>工程师</option>
<option>演员</option>
<option>会计</option>
</select>
</form>
</body>
</html>
Nach dem Login kopieren
5. Unscharfes Ereignis (Onblur)
Das Onblur-Ereignis und das Onfocus-Ereignis sind relative Ereignisse. Wenn der Cursor das aktuell fokussierte Objekt verlässt, wird das Onblur-Ereignis ausgelöst und gleichzeitig das aufgerufene Programm ausgeführt.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 失焦事件 </title>
<script type="text/javascript">
function message(){
alert("请确定已输入密码后，在移开!"); }
</script>
</head>
<body>
<form>
用户:
<input name="username" type="text" value="请输入用户名！" >
密码:
<input name="password" type="text" value="请输入密码！" onblur="message()">
</form>
</body>
</html>
Nach dem Login kopieren
6. Inhaltsauswahlveranstaltung (onselect)
Ereignis auswählen: Wenn der Text im Textfeld oder Textfeld ausgewählt wird, wird das Ereignis onselect ausgelöst und das aufgerufene Programm wird ausgeführt.
Wenn der Text im Textfeld für das persönliche Profil ausgewählt wird, wird das Ereignis „onselect“ ausgelöst und ein Dialogfeld wird angezeigt.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 内容选中事件 </title>
<script type="text/javascript">
function message(){
alert("您触发了选中事件！"); }
</script>
</head>
<body>
<form>
个人简介：<br>
<textarea name="summary" cols="60" rows="5" onselect="message()">请写入个人简介，不少于200字！</textarea>
</form>
</body>
</html>
Nach dem Login kopieren
7. Textfeld-Inhaltsänderungsereignis (onchange)
Lösen Sie das onchange-Ereignis aus, indem Sie den Inhalt des Textfelds ändern und gleichzeitig das aufgerufene Programm ausführen.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 文本框内容改变事件 </title>
<script type="text/javascript">
function message(){
alert("您改变了文本内容！"); }
</script>
</head>
<body>
<form>
个人简介：<br>
<textarea name="summary" cols="60" rows="5" onchange="message()">请写入个人简介，不少于200字！</textarea>
</form>
</body>
</html>Nach dem Login kopieren
8. Ladeereignis (Onload)
Das -Ereignis tritt unmittelbar nach dem Laden der Seite ein und das aufgerufene Programm wird gleichzeitig ausgeführt.
Hinweis: 1. Wenn die Seite geladen wird, wird das Onload-Ereignis ausgelöst und das Ereignis in das
-Tag geschrieben.
2. Das Laden der Seite dieses Abschnitts kann als Öffnen einer neuen Seite verstanden werden.
Wenn im folgenden Code eine neue Seite geladen wird, wird das Dialogfeld „Laden, bitte warten …“ angezeigt.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 加载事件 </title>
<script type="text/javascript">
function message(){
alert("加载中，请稍等…"); }
</script>
</head>
<body onload="message()">
欢迎学习JavaScript。
</body>
</html>
Nach dem Login kopieren
9. Ereignis entladen (onunload)
Wenn der Benutzer die Seite verlässt (Seite schließt, Seite aktualisiert usw.), wird das onUnload-Ereignis ausgelöst und gleichzeitig das aufgerufene Programm ausgeführt.
Hinweis: Verschiedene Browser bieten unterschiedliche Unterstützung für Onunload-Ereignisse.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 卸载事件 </title>
<script type="text/javascript">
window.onunload = onunload_message;
function onunload_message(){
alert("您确定离开该网页吗？");
}
</script>
</head>
<body onunload="onunload_message">
欢迎学习JavaScript。
</body>
</html>
Nach dem Login kopieren
Die Testergebnisse zeigen, dass es nur im IE-Browser und nicht in anderen Browsern ausgeführt wird.
Die oben genannten neun Zustände der Reaktion auf Javascript-Ereignisse werden für das Lernen aller hilfreich sein.
