demo5，鼠标移入移出改变样式，总结

最新推荐文章于 2024-04-23 10:36:46 发布

ZZZZJW

最新推荐文章于 2024-04-23 10:36:46 发布

阅读量514

点赞数

分类专栏：总结

本文链接：https://blog.csdn.net/q834344798/article/details/77540293

版权

总结专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标移入移出改变样式</title>
    <style>
        div{
            background-color: black;
            color: #fff;
            font-size: 12px;
            width: 150px;
            height: 150px;
            margin: 10px auto;
        }
        .current{
            background-color: coral;
            cursor: crosshair;
        }
    </style>
</head>
<body>
    <div id="change">鼠标移入改变样式，鼠标移出恢复</div>

    <script>
        var EventUtil = {
            addHandler: function (element, type, handler) {
                if (element.addEventListener) {
                    element.addEventListener(type, handler, false);
                }
                else if (element.attachEvent) {
                    element.attachEvent("on" + type, handler);
                }
                else {
                    element["on" + type] = handler;
                }
            },
            removeHandler: function (element, type, handler) {
                if (element.removeEventListener) {
                    element.removeEventListener(type, handler, false);
                }
                else if (element.detachEvent) {
                    element.detachEvent("on" + type, handler);
                }
                else {
                    element["on" + type] = null;
                }
            },
            getEvent: function (event) {
                return event?event:window.event;
            },
            getTarget: function (event) {
                return event.target || event.srcElement;
            },
            preventDefault: function (event) {
                if (event.preventDefault) {
                    event.preventDefault();
                }
                else {
                    event.returnValue = false;
                }
            },
            stopPropagation: function (event) {
                if (event.stopPropagation) {
                    event.stopPropagation();
                }
                else {
                    event.cancelBubble = true;
                }
            },
            getCharCode: function (event) {
                if (typeof event.charCode == "number") {
                    return event.charCode;
                }
                else {
                    return event.keyCode;
                }
            }
        };
        window.onload = function () {
            var div = document.getElementsByTagName("div")[0];

            var handler1 = function () {
                this.className = "current";
            };
            var handler2 = function () {
                this.className = "";
            };
            EventUtil.addHandler(div, "mouseover", handler1);
            EventUtil.addHandler(div, "mouseout", handler2);
        }
    </script>
</body>
</html>