SELFHTML/Quickbar
HTML
Universaltattribute
![]() |
Event-Handler |
|
|
|
Anzeigebeispiel: So sieht's aus
Event-Handler (Ergeignis-Behandler) sind HTML-Attribute, die eine Verknüpfung zu einer Scriptsprache herstellen. Ein Ereignis ist zum Beispiel ein Mausklick oder ein Tastendruck des Anwenders. Ein Element, das einen Event-Handler enthält, kann auf ein solches Ereignis reagieren, wenn das Ereignis im Anzeigebereich des Elements stattfindet. Mit dem Event-Handler können Sie beispielsweise eine
JavaScript-Funktion aufrufen, die das Ereignis verarbeitet und reagiert.
<p onClick="alert('Sie haben in den Absatz geklickt!')">ein Textabsatz</p>
|
Das Beispiel enthält einen Textabsatz <p> ... </p>. Im einleitenden <p>-Tag ist der Event-Handler onClick= notiert. Event-Handler erkennen Sie in der Regel daran, daß diese mit on... beginnen. Der Event-Handler onClick= bedeutet so viel wie "beim Anklicken". Dies bezieht sich auf den Anzeigebereich des Textabsatzes.
Im Beispiel wird mit Hilfe eines Dialogfensters am Bildschirm ausgegeben: "Sie haben in den Absatz geklickt!". Das ist JavaScript-Syntax. Auf die Sprachelemente von JavaScript wird hier nicht näher eingegangen. Lesen Sie dazu die JavaScript-Dokumentation.
Netscape bis einschließlich Version 4.x interpretiert Event-Handler zwar, aber nur bei bestimmten HTML-Tags. Zwar gibt es viele Event-Handler, die auch nur in bestimmten HTML-Tags Sinn machen. Doch insgesamt ist die Ereignisbehandlung in HTML-Elementen nach dem HTML-4.0-Standard deutlich weiter gefaßt, als es in Netscape's JavaScript 1.0, 1.1 und 1.2 der Fall ist. So funktioniert mit Netscape auch das obige Beispiel nicht.
Der MS Internet Explorer interpretiert erweiterte Event-Handler seit der Produktversion 4.x. Ob dabei allerdings alle denkbaren Möglichkeiten des HTML-4.0-Standards abgedeckt werden, läßt sich kaum nachprüfen. Das obige Beispiel (und auch das Anzeigebeispiel) funktionieren jedenfalls mit dem Internet Explorer 4.x.
|
|
Die folgende Liste enthält diejenigen Event-Handler, die in der HTML-4.0-Spezifikation des W3-Konsortiums genannt werden. Mehr zu den Event-Handlern erfahren Sie innerhalb der JavaScript-Dokumentation im Abschnitt über
Event-Handler als Teil der
JavaScript-Sprachelemente.
| Event-Handler | Bedeutung | Beispiel | erlaubt in diesen HTML-Tags |
| onblur= | "beim Verlassen des Elements" | siehe in JavaScript |
<a> <area> <button> <input> <label> <select> <textarea> |
| onchange= | "bei geändertem Wert eines Elements" | siehe in JavaScript |
<input> <select> <textarea> |
| onclick= | "beim Anklicken mit der Maus" | siehe in JavaScript |
<a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var> |
| ondblclick= | "beim Doppelklick mit der Maus in den Bereich des Elements" | siehe in JavaScript |
<a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var> |
| onfocus= | "beim Positionieren auf das Element" | siehe in JavaScript |
<a> <area> <button> <input> <label> <select> <textarea> |
| onkeydown= | "wenn Taste gedrückt" (aber noch nicht losgelassen) | siehe in JavaScript |
<a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var> |
| onkeypress= | "wenn Taste gedrückt" (und wieder losgelassen) | siehe in JavaScript |
<a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var> |
| onkeyup= | "wenn Taste losgelassen" | siehe in JavaScript |
<a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var> |
| onload= | "beim Laden" | siehe in JavaScript |
<frameset> <body> |
| onmousedown= | "bei gedrückter Maustaste" | siehe in JavaScript |
<a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var> |
| onmousemove= | "beim Bewegen der Maus" | siehe in JavaScript |
<a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var> |
| onmouseout= | "wenn die Maus den Elementbereich verläßt" | siehe in JavaScript |
<a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var> |
| onmouseover= | "wenn die Maus den Elementbereich erreicht" | siehe in JavaScript |
<a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var> |
| onmouseup= | "beim Loslassen der gedrückten Maustaste" | siehe in JavaScript |
<a> <abbr> <acronym> <address> <area> <b> <big> <blockquote> <body> <button> <caption> <center> <cite> <code> <col> <colgroup> <dd> <del> <dfn> <dir> <div> <dl> <dt> <em> <fieldset> <form> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <input> <ins> <kbd> <label> <legend> <li> <link> <map> <menu> <noframes> <noscript> <object> <ol> <optgroup> <option> <p> <pre> <q> <s> <samp> <select> <small> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <tr> <tt> <u> <ul> <var> |
| onreset= | "beim Zurücksetzen" | siehe in JavaScript |
<form> |
| onselect= | "beim Selektieren von Text" | siehe in JavaScript |
<input> <textarea> |
| onsubmit= | "beim Absenden" | siehe in JavaScript |
<form> |
| onunload= | "beim Beenden" | siehe in JavaScript |
<body> <frameset> |
|
| |
| weiter: |
|
| zurück: |
|