JavaScript: Event-Listening (Document Object Model)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
   <title>JavaScript: Event-Listening (Document Object Model)</title>

   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   <meta http-equiv="Content-Style-Type" content="text/css">

   <meta name="description"
      content="&Uuml;bung JavaScript. Event-Listening">
   <meta name="keywords" content="HTML, JavaScript (Document Object Model)">
   <meta name="author" content="Roland Unger">

 <script language="JavaScript" type="text/javascript">
 <!--

 function processSingleWord() {
    alert("Sie haben auf das rot geschriebene Wort gedr\u00fcckt!");
 }

 function processSingleWordAndStop(event) {
    alert("Sie haben auf das rot geschriebene Wort gedr\u00fcckt!");
    event.stopPropagation();
 }

 function processParagraph() {
    alert("Sie haben auf den \u00fcbergeordneten Absatz gedr\u00fcckt!");
 }

 function processMouseOverAndOut(event) {
    var color;
    if (event.type=="mouseover") color="#FFFF00"; else color="#FFFFFF";
    event.currentTarget.style.backgroundColor=color;
 }

 function init() {
    var aTag;

    if (document.getElementById) {
       aTag = document.getElementById("s1");
       if (aTag.addEventListener) {
          aTag.addEventListener("mouseup", processSingleWord, true);

          aTag = document.getElementById("p1");
          aTag.addEventListener("mouseup", processParagraph, true);

          aTag = document.getElementById("s2");
          aTag.addEventListener("mouseup", processSingleWord, false);

          aTag = document.getElementById("p2");
          aTag.addEventListener("mouseup", processParagraph, false);

          aTag = document.getElementById("s3");
          aTag.addEventListener("mouseup", processSingleWordAndStop, false);

          aTag = document.getElementById("p3");
          aTag.addEventListener("mouseup", processParagraph, false);

          aTag = document.getElementById("s4");
          aTag.addEventListener("mouseover", processMouseOverAndOut, false);
          aTag.addEventListener("mouseout", processMouseOverAndOut, false);
       }
       else alert("Dieser Browser unterst\u00fctzt keine Ereignisbehandlung nach dem Document Object Model!");
    }
    else alert("Dieser Browser unterst\u00fctzt keine Form des Document Object Model und somit auch keine diesbez\u00fcgliche Ereignisbehandlung!");
 }

 onload = init;

 // -->
 </script>

</head>

<body>

<h2>&Uuml;bung JavaScript</h2>
<h3>Event-Listening (Document Object Model)</h3>

<p id="p1">Wenn Sie auf das rot markierte Wort
&quot;<span id="s1" style="color: #FF0000">capture</span>&quot; dr&uuml;cken,
erhalten Sie mehrere Meldungsfenster. Die Ereignisverarbeitung erfolgt nach dem
Capturing-Konzept. Bitte achten Sie auf die Reihenfolge des Auftretens der
Meldungsfenster!</p>

<p id="p2">Wenn Sie auf das rot markierte Wort
&quot;<span id="s2" style="color: #FF0000">bubble</span>&quot; dr&uuml;cken,
erhalten Sie mehrere Meldungsfenster. Die Ereignisverarbeitung erfolgt nach dem
Bubbling-Konzept. Bitte achten Sie auf die Reihenfolge des Auftretens der
Meldungsfenster!</p>

<p id="p3">Wenn Sie auf das rot markierte Wort
&quot;<span id="s3" style="color: #FF0000">bubble</span>&quot; dr&uuml;cken,
erhalten Sie nur noch ein Meldungsfenster: die Ereignisweitergabe wird danach
gestoppt.</p>

<p>Wenn Sie mit der Maus &uuml;ber das rot markierte
&quot;<span id="s4" style="color: #FF0000">Wort</span>&quot; fahren, &auml;ndert
sich seine Hintergrundfarbe. Wenn man den Typ des Ereignisses auswertet, braucht man
hierf&uuml;r nur eine Funktion zu schreiben.</p>

</body>
</html>