"Focus" event on dynamic links_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-02-01 10:49 出处：网络

I want to apply a \"focus\" effect on every single link, its easy but isn\'t like the real css \"focus\":

I want to apply a "focus" effect on every single link, its easy but isn't like the real css "focus":

var backgroundColor, color, links = container.getElementsByTagName ("a");

for (i = 0; i < links.length; i ++) {
    links[i].onblur = function () {
        this.style.backgroundColor = backgroundColor;
        this.style.color = color;
    }

    links[i].onfocus = function () {
        backgroundColor = document.defaultView.getComputedStyle (this, null).ge开发者_如何学编程tPropertyValue ("background-color");
        color = document.defaultView.getComputedStyle (this, null).getPropertyValue ("color");

        this.style.backgroundColor = "blue";
        this.style.color = "white";
    }
}

Lets add some more links dynamically and the effect won't apply to them, unlike the real css "focus":

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en">
    <head>
        <meta http-equiv = "content-type" content = "text/html; charset=utf-8" />

        <script type = "text/javascript">
            window.onload = function () {
                var container = document.getElementsByTagName ("div")[0];

                var i = 0;

                container.innerHTML = "Focus on the links, you have 10 seconds, <b>" + i + "<b>";

                for (i = 1; i <= 5; i ++) {
                    var a = document.createElement ("a");
                        a.innerHTML = i;
                        a.setAttribute ("href", "#");

                    container.appendChild (a);
                }

                i = 0;

                var interval = window.setInterval (function () {
                    i ++;

                    if (i < 10) {
                        container.childNodes[1].innerHTML = i;
                    }
                    else {
                        window.clearInterval (interval);

                        container.innerHTML = "No more effects, different links";

                        for (i = 1; i <= 10; i ++) {
                            var a = document.createElement ("a");
                                a.innerHTML = i;
                                a.setAttribute ("href", "#");

                            container.appendChild (a);
                        }
                    }
                }, 1000);

                var backgroundColor, color, links = container.getElementsByTagName ("a");

                for (i = 0; i < links.length; i ++) {
                    links[i].onblur = function () {
                        this.style.backgroundColor = backgroundColor;
                        this.style.color = color;
                    }

                    links[i].onfocus = function () {
                        backgroundColor = document.defaultView.getComputedStyle (this, null).getPropertyValue ("background-color");
                        color = document.defaultView.getComputedStyle (this, null).getPropertyValue ("color");

                        this.style.backgroundColor = "blue";
                        this.style.color = "white";
                    }
                }
            }
        </script>

        <style type = "text/css">
            a {
                border: 1px solid black;
                display: block;
                margin: 5px;
                padding: 5px;
                text-decoration: none;
            }
            */
            a:focus {
                background-color: blue;
                color: white;
            }*/
        </style>

        <title>Olá</title>
    </head>

    <body><div></div></body>
</html>

What can I do to reverse it ?

Thanks

You can handle events on the <body> tag; they will bubble up and arrive there.

jQuery will do this for you with its live method.