SELFHTML: HTML/XHTML / Universalattribute / Event-Handler für Scripts
Author: Redaktion SELFHTML, selfhtml81@selfhtml.org
Description: Welche Attribute es in HTML gibt, um ereignisorientiertes Programmieren mit Hilfe einer Script-Sprache wie JavaScript zu ermöglichen
Keywords: SELFHTML, HTML, Universalattribute, Attribute, Event-Handler, Programmierung, JavaScript, ereignisorientierte Programmierung, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup
Date: 2005-10-31T12:25:34+01:00

| # Event-Handler für Scripts
| Event-Handler notieren Übersicht der universalen Event-Handler

## Event-Handler notieren

Event-Handler (Ereignisbehandler) sind HTML-Attribute, die eine Verknüpfung zu einer Script-Sprache 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.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
           "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Event-Handler notieren</title>
    <script type="text/javascript">
    function Ergebnis () {
      document.Formular.Eingabe.value = eval(document.Formular.Eingabe.value);
    }
    </script>
    </head>
    <body>

    <form name="Formular" action="">
      <p>Geben Sie eine Rechenoperation mit Grundrechenarten ein und klicken Sie dann
      auf den Button neben dem Eingabefeld:</p>
      <p>
        <input type="text" name="Eingabe" size="30">
        <input type="button" value=" = " onclick="Ergebnis()">
      </p>
    </form>

    </body>
    </html>

### Erläuterung:

Das Beispiel enthält ein Formular mit einem Eingabefeld und einem Klick-Button. Beim Klick-Button ist der Event-Handler `onclick` notiert, der beim Anklicken des Buttons die JavaScript-Funktion `Ergebnis()` aufruft, die im Dateikopf in einem Script-Bereich notiert ist. Diese Funktion holt sich den Inhalt aus dem Eingabefeld, berechnet ihn und schreibt das Ergebnis wieder in das Eingabefeld.

### Beachten Sie:

Das obige Beispiel funktioniert auch mit älteren, JavaScript-fähigen Browsern. Solche Browser interpretieren Event-Handler nur in sehr eingeschränkter Form, nämlich bei Formularelementen und einigen wenigen anderen Elementen. Das Konzept der Event-Handler geht jedoch viel weiter. So kann beispielsweise auch eine Tabellenzelle beim Anklicken ihre Hintergrundfarbe wechseln usw. Solche dynamischen Änderungen am Dokument funktionieren aber erst mit neueren Browsern (Internet Explorer ab Version 4.x, Netscape ab Version 6.x).

In HTML ist nicht festgelegt, dass Event-Handler-Attribute standardmäßig JavaScript-Code enthalten. Andere Scriptsprachen wären genauso möglich, z.B. VBScript. Deshalb erfordert es der HTML-Standard, dass beim Gebrauch von Event-Handler-Attributen die verwendete Scriptsprache zentral angegeben wird. Dies ist durch eine Angabe zur Default-Sprache für Scripts im Kopf der HTML-Datei möglich:

    <meta http-equiv="Content-Script-Type" content="text/javascript">

Ohne diese Angabe soll ein Browser die Attributwerte nicht als Code einer bestimmten Scriptsprache behandeln. Über den Sinn oder Unsinn dieser Regelung lässt sich trefflich streiten. Da sich JavaScript als Standard-Scriptsprache in HTML-Dokumenten durchgesetzt hat, gibt es momentan keine praktische Notwendigkeit einer solchen Angabe. Es ist daher allgemein akzeptierte Praxis, diese Angabe wegzulassen - in SELFHTML wird konsequent darauf verzichtet. Seien Sie sich aber im Klaren darüber, dass dies strenggenommen ein Verstoß gegen die W3C-Empfehlung ist.

## Übersicht der universalen Event-Handler

Die folgende Tabelle listet nur solche Event-Handler auf, die im HTML-Standard als weitgehend universell und für die meisten HTML-Elemente einsetzbar festgehalten sind. Es gibt noch weitere Event-Handler, die jedoch nur für bestimmte Elemente gültig sind. Lesen Sie dazu auch den Abschnitt im JavaScript-Kapitel über Event-Handler.

Attribut | Bedeutung | Beispiel | Erlaubt bei HTML-Elementen
--- | --- | --- | ---
`onclick` | Für den Fall, dass der Anwender ein Element anklickt. | siehe JavaScript-Kapitel: onclick | siehe HTML-Referenz: Universalattribute
`ondblclick` | Für den Fall, dass der Anwender ein Element doppelt anklickt. | siehe JavaScript-Kapitel: ondblclick | siehe HTML-Referenz: Universalattribute
`onmousedown` | Tritt ein, wenn der Anwender die Maustaste gedrückt hält. | siehe JavaScript-Kapitel: onmousedown | siehe HTML-Referenz: Universalattribute
`onmouseup` | Tritt ein, wenn der Anwender die Maustaste gedrückt hat und sie nun wieder loslässt. | siehe JavaScript-Kapitel: onmouseup | siehe HTML-Referenz: Universalattribute
`onmouseover` | Tritt ein, wenn der Anwender mit der Maus über ein Element fährt. | siehe JavaScript-Kapitel: onmouseover | siehe HTML-Referenz: Universalattribute
`onmousemove` | Tritt ein, wenn der Anwender die Maus bewegt, unabhängig davon, ob die Maustaste gedrückt ist oder nicht. | siehe JavaScript-Kapitel: onmousemove | siehe HTML-Referenz: Universalattribute
`onmouseout` | Tritt ein, wenn der Anwender mit der Maus über ein Element fährt und dieses dabei verlässt. | siehe JavaScript-Kapitel: onmouseout | siehe HTML-Referenz: Universalattribute
`onkeypress` | Tritt ein, wenn der Anwender eine Taste drückt und diese gedrückt hält. | siehe JavaScript-Kapitel: onkeypress | siehe HTML-Referenz: Universalattribute
`onkeydown` | Tritt ein, wenn der Anwender, während er ein Element aktiviert hat, eine Taste drückt. | siehe JavaScript-Kapitel: onkeydown | siehe HTML-Referenz: Universalattribute
`onkeyup` | Tritt ein, wenn der Anwender, eine Taste gedrückt hat und diese wieder loslässt. | siehe JavaScript-Kapitel: onkeyup | siehe HTML-Referenz: Universalattribute

| Unterschiede zwischen XHTML und HTML
| Allgemeine Universalattribute

© 2007 Impressum