<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
   <title>JavaScript: Event-Listening (Crossbrowser DOM Scripting)</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 (Crossbrowser DOM Scripting)">
   <meta name="keywords" content="HTML, JavaScript">
   <meta name="author" content="Roland Unger">

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

 function processEvent(event) {
    if (event.type=="mouseover") {
       // Internet Explorer
       if (event.srcElement) event.srcElement.style.backgroundColor="#FFFF00";
       // W3C DOM
       if (event.currentTarget) event.currentTarget.style.backgroundColor="#FFFF00";
    };
    if (event.type=="mouseout") {
       if (event.srcElement) event.srcElement.style.backgroundColor="#FFFFFF";
       if (event.currentTarget) event.currentTarget.style.backgroundColor="#FFFFFF";
    };
 }

 function addEvent(obj, eventType, afunction, isCapture) {
    // W3C DOM
    if (obj.addEventListener) {
       obj.addEventListener(eventType, afunction, isCapture);
       return true;
    }
    // Internet Explorer
    else if (obj.attachEvent) {
       return obj.attachEvent("on"+eventType, afunction);
    }
    else return false;
 }

 function removeEvent(obj, eventType, afunction, isCapture) {
    if (obj.removeEventListener) {
       obj.removeEventListener(eventType, afunction, isCapture);
       return true;
    }
    else if (obj.detachEvent) {
       return obj.detachEvent("on"+eventType, afunction);
    }
    else return false;
 }

 function init() {
    var aTag;

    if (document.getElementById) {
       aTag = document.getElementById("s1");
       if (!addEvent(aTag, "mouseover", processEvent, false))
          alert("Dieser Browser unterst\u00fctzt trotz Document Object Model keine diesbez\u00fcgliche Ereignisbehandlung!");
       addEvent(aTag, "mouseout", processEvent, false);
       aTag = document.getElementById("s2");
       addEvent(aTag, "mouseover", processEvent, false);
       addEvent(aTag, "mouseout", processEvent, false);
    }
    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 (Crossbrowser DOM Scripting)</h3>

<p>Wenn Sie mit der Maus &uuml;ber die rot markierten
<span id="s1" style="color: #FF0000">W&ouml;rter</span> fahren, &auml;ndern
sich ihre <span id="s2" style="color: #FF0000">Hintergrundfarben</span>.</p>

</body>
</html>