tests/manual/mouseenter2.html

	mouseenter2.html revision 3de4a3a52c3fd1dffee53e2e99c6d27334763659
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>MouseEnter and MouseLeave Event Tests</title>

    <link rel="stylesheet" type="text/css" href="/build/reset/reset-min.css">
    <link rel="stylesheet" type="text/css" href="/build/base/base-min.css">

    <style type="text/css">

        .container {
            background-color: #ccc;
            padding: 20px;
            margin: 10px 0;
            border-width: 1px;
            border-style: solid;
            border-color: #ccc;
        }

        .container.hover {
            background-color: #fc0;
        }

        .container ul {
            list-style: none;
            padding: 10px;
            margin: 0;
            background-color: #333;
        }

        .container ul li {
            margin: 10px;
            padding: 1px;
            background-color: #999;
            border-width: 1px;
            border-style: solid;
            border-color: #999;
        }

        .container ul li.hover {
            background-color: #ff6;
        }

        .container ul li em {
            display: block;
            margin: 10px;
            padding: 5px;
            background-color: #666;
        }

        .outline,
        .container ul li.outline {
            border-color: #f00;
        }

        .container.focus {
            background-color: blue;
        }

    </style>

</head>
<body>

    <h1>MouseEnter and MouseLeave Event Tests</h1>

    <ul>
        <li>The background color of the <code>div</code> element should turn
        orange and have a red outline when you move the mouse over it.</li>
        <li>The background color of each <code>li</code> should change to yellow
        when you mouse over it and have a red outline.</li>
    </ul>

    <script type="text/javascript" src="/build/yui/yui.js"></script>

    <script type="text/javascript">
        YUI({ }).use('event', 'node-style', function (Y) {

            //  Build the content via a timer to test Event's mechanism to
            //  defer the attachment of listeners until they are available
            //  in the DOM

            Y.Lang.later(3000, Y, function () {
                Y.one('body').append('<div id="container-1" class="container"><ul id="ul-1"><li><em>Item Type One</em></li><li><em>Item Type Two</em></li><li><em>Item Type Three</em></li></ul></div><button id="remove-listeners">Remove Listeners</button>');
            });


            var onContainerMouseEnter = function (event) {

                if (event.currentTarget == this) {
                    this.addClass("hover");
                }

            };

            var onContainerMouseLeave = function (event) {

                if (event.currentTarget == this) {
                    this.removeClass("hover");
                }

            };

            var onLIMouseEnter = function (event) {

                if (event.container.get("id") == "container-1") {
                    this.addClass("hover");
                }

            };

            var onLIMouseLeave = function (event) {

                if (event.container.get("id") == "container-1") {
                    this.removeClass("hover");
                }

            };

            var addContainerOutline = function (event, className) {

                event.currentTarget.addClass(className);

            };

            var removeContainerOutline = function (event) {

                event.currentTarget.removeClass(this);

            };


            var addLIOutline = function (event, className) {

                event.currentTarget.addClass(className);

            };

            var removeLIOutline = function (event) {

                event.currentTarget.removeClass(this);

            };

            var setLIColor = function (event) {

                this.setStyle("color", "#fff");

            };

            var removeLIColor = function (event) {

                this.setStyle("color", "");

            };

            var handle1 = Y.on("mouseenter", onContainerMouseEnter, "#container-1");
            var handle2 = Y.on("mouseleave", onContainerMouseLeave, "#container-1");

            var handle3 = Y.on("mouseenter", addContainerOutline, "#container-1", Y, "outline");
            var handle4 = Y.on("mouseleave", removeContainerOutline, "#container-1", "outline");

            var handle5 = Y.on("mouseenter", setLIColor, "#container-1 li");
            var handle6 = Y.on("mouseleave", removeLIColor, "#container-1 li");

            var handle7 = Y.delegate("mouseenter", onLIMouseEnter, "#container-1", "li");
            var handle8 = Y.delegate("mouseleave", onLIMouseLeave, "#container-1", "li");

            var handle9 = Y.delegate("mouseenter", addLIOutline, "#container-1", "li", Y, "outline");
            var handle10 = Y.delegate("mouseleave", removeLIOutline, "#container-1", "li", "outline");


            Y.on("click", function () {

                handle1.detach();
                handle2.detach();
                handle3.detach();
                handle4.detach();
                handle5.detach();
                handle6.detach();
                handle7.detach();
                handle8.detach();
                handle9.detach();
                handle10.detach();

            }, "#remove-listeners");

        });

    </script>

</body>
</html>