源代码是javascript step by step 上面的一本书;
ehandler.js 代码如下
var EHandler = {};
if (document.addEventListener) {
EHandler.add = function(element, eType, eFunc) {
if (eType == "load") {
if (typeof window.onload == "function") {
var existingOnload = window.onload;
window.onload = function() {
existingOnload();
eFunc();
} //end existing onload handler
} else {
window.onload = eFunc;
}
} else {
element.addEventListener(eType, eFunc, false);
}
};
EHandler.remove = function(element, eType, eFunc) {
element.removeEventListener(eType, eFunc, false);
};
}
else if (document.attachEvent) {
EHandler.add = function(element, eType, eFunc) {
if (eType == "load") {
if (typeof window.onload == "function") {
var existingOnload = window.onload;
window.onload = function() {
existingOnload();
eFunc();
} //end existing onload handler
} else {
window.onload = eFunc;
}
} else {
element.attachEvent("on" + eType, eFunc);
}
};
EHandler.remove = function(element, eType, eFunc) {
element.detachEvent("on" + eType, eFunc);
};
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Rollover</title>
<script type="text/javascript" src="ehandler.js"></script>
<script type="text/javascript">
function rollover() {
var images = document.getElementsByTagName("img");
var imgLength = images.length;
for (var i = 0; i < imgLength; i++) {
EHandler.add(images[i],"mouseover", function(i) {
return function() {
images[i].src = images[i].id + "_over.png";
};
}(i));
EHandler.add(images[i],"mouseout", function(i) {
return function() {
images[i].src = images[i].id + "_default.png";
};
}(i));
}
}
</script>
</head>
<body>
<p><img id="home" name="img_home" src="home_default.png" alt="Home"></p>
<p><img id="blog" name="img_blog" src="blog_default.png" alt="Blog"></p>
<p><img id="about" name="img_about" src="about_default.png" alt="About"></p>
<script type="text/javascript">
var bodyEl = document.getElementsByTagName("body")[0];
EHandler.add(bodyEl,"load", function() { rollover(); });
</script>
</body>
</html>