javascript通用事件处理程序

最新推荐文章于 2024-01-20 20:17:34 发布

阿甘孔乙己

最新推荐文章于 2024-01-20 20:17:34 发布

阅读量823

点赞数

分类专栏： PHP 文章标签： javascript function

本文链接：https://blog.csdn.net/awenit/article/details/23591965

版权

PHP 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

源代码是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>