jquery 事件委托（利用冒泡）

最新推荐文章于 2024-11-12 11:19:19 发布

weixin_34095889

最新推荐文章于 2024-11-12 11:19:19 发布

阅读量92

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/duanzhenzhen/p/10156617.html

版权

将事件绑定在父元素上，格式$(父元素).on("事件名称","子元素选择器",function(方法体){})

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>星级评分</title>
        <script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function(){

                    var num = 2;
                    // 点亮
                    function lightOn(num){
                        $(".star-item").each(function(index){
                            if(index < num){
                                $(this).css("background-position","0 -70px");
                            }else{
                                $(this).css("background-position","0 0");
                            }
                        })
                    }
                    lightOn(num);
                    //mouseover和click事件
                    $("#group1").on("mouseover",".star-item",function(){//利用事件冒泡,将事件绑定在父元素上(事件委托)
                        lightOn($(this).index() + 1);
                    }).on("click",".star-item",function(){
                        num = $(this).index() + 1;
                        lightOn(num);
                    }).on("mouseout",function(){
                        lightOn(num);
                    })
            })
        </script>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            li {
                list-style: none;
            }
            .star {
                width: 350px;
                height: 350px;
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                margin: auto;
                border: 1px solid red;
            }
            .star-grounp {
                display: block;
                width: 350px;
                height: 70px;
            }
            .star-item {
                display: inline-block;
                width: 60px;
                height: 60px;
                float: left;
                margin-right: 10px;
                background: url(img/star.jpg) no-repeat;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div class="star">
            <ul class="star-grounp" id="group1">
                <li class="star-item" title="很不好"></li>
                <li class="star-item" title="不好"></li>
                <li class="star-item" title="一般"></li>
                <li class="star-item" title="好"></li>
                <li class="star-item" title="很好"></li>
            </ul>
        </div>
    </body>
</html>