javascript - 事件委托 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件委托</title>
    <style>
        ul{
            padding: 20px;
            list-style: none;
        }
    </style>
</head>
<body>
    <ul id="ul">
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
    </ul>

    <script>
        var ul = document.getElementById('ul');

        ul.onmouseover = function (ev) {
            var ev = ev || window.event,
                target = ev.target || ev.srcElement;    //获取事件源

            if (target.nodeName.toLowerCase() == "li") {
                target.style.background = "red";
            }
        }
        ul.onmouseout = function (ev) {
            var ev = ev || window.event,
                target = ev.target || ev.srcElement;

            if (target.nodeName.toLowerCase() == "li") {
                target.style.background = "";
            }
        }
    </script>
</body>
</html>

 事件委托:利用事件冒泡的原理,把事件添加到父级或祖先元素上,来触发执行效果.

 好处:

　　1.提高性能.

　　2.未来添加进来的元素,身上依然能触发事件.

posted @ 2016-06-28 22:09  Stefan-47  阅读(118)  评论(0)  编辑  收藏  举报