<!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="Ü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") {
if (event.srcElement) event.srcElement.style.backgroundColor="#FFFF00";
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) {
if (obj.addEventListener) {
obj.addEventListener(eventType, afunction, isCapture);
return true;
}
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>Übung JavaScript</h2>
<h3>Event-Listening (Crossbrowser DOM Scripting)</h3>
<p>Wenn Sie mit der Maus über die rot markierten
<span id="s1" style="color: #FF0000">Wörter</span> fahren, ändern
sich ihre <span id="s2" style="color: #FF0000">Hintergrundfarben</span>.</p>
</body>
</html>