将事件绑定在父元素上，格式$(父元素).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>

jquery 事件委托（利用冒泡）的更多相关文章

  1. javascript事件委托和jquery事件委托

    元旦过后,新年第一篇. 初衷:很多的面试都会涉及到事件委托,前前后后也看过好多博文,写的都很不错,写的各有千秋,自己思前想后,为了以后自己的查看,也同时为现在找工作的前端小伙伴提供一个看似更全方位的解 ...

  2. jquery事件委托详解

    jQuery事件委托处理流程 上一章分析jQuery.event.add的时候已经分析了事件绑定,再把绑定的部分源码抽出来 if ( !(eventHandle = elemData.handle) ...

  3. jQuery事件委托

    jQuery事件委托 <ul id="ulBox"> <li data-id="1"></li> <li data-i ...

  4. js进阶---12-12、jquery事件委托怎么使用

    js进阶---12-12.jquery事件委托怎么使用 一.总结 一句话总结:通过on方法(事件委托),给要绑定事件的元素的祖先绑定事件,从而达到效果. 1.事件委托是什么? 通过事件冒泡,让子元素绑 ...

  5. jquery 事件委托

    什么事件委托? DOM在为页面中的每个元素分派事件时,相应的元素一般都在事件冒泡阶段处理事件.在类似 body > div > a 这样的结构中,如果单击a元素,click事件会从a一直冒 ...

  6. 转载： jQuery事件委托( bind() \ live() \ delegate()) [委托 和 绑定的故事]

    转载:http://blog.csdn.net/zc2087/article/details/7287429 随着DOM结构的复杂化和Ajax等动态脚本技术的运用,事件委托自然浮出了水面.jQuery ...

  7. jQuery事件委托方法 bind live delegate on

    1.bind    jquery 1.3之前 定义和用法:主要用于给选择到的元素上绑定特定事件类型的监听函数 语法:  bind(type,[data],function(e)); 特点: a.适合页 ...

  8. JavaScript / JQuery事件委托如何实现？

    一:什么是事件委托? 事件委托是利用事件冒泡,只指定一个事件处理程序来管理某一类型的所有事件. 事件委托就是利用事件冒泡原理实现的! 事件冒泡:就是事件从最深节点开始,然后逐步向上传播事件: 例:页面 ...

  9. Jquery事件委托之Safari

    什么是事件委托 事件委托是Jquery中一种事件绑定的方式,不同于常见的事件绑定方式将事件绑定在目标元素上,而是将事件绑定在父级元素上通过事件冒泡来执行绑定函数. //常见的事件绑定(Jquery) ...

随机推荐

  1. flash推流工具<转>

    https://github.com/young-cowboy/young-cowboy.github.io https://www.cnblogs.com/xiaoniuzai/p/7129036. ...

  2. ABAP-1-会计凭证批量数据导入本地ACCESS

    公司会计凭证导入ACCESS数据库,需要发送给审计,原先的方案是采用DEPHI开发的功能(调用函数获取会计凭证信息,然后INSERT到ACCESS数据表),运行速度非常慢,业务方要求对该功能进行优化, ...

  3. webstorm设置自定义代码快捷键

    1.file——>setting——>Editor——>live Templates出现如下界面 2.点击左上角绿色+选择template group创建分组(图中React Vue ...

  4. C++复习：函数模板和类模板

    前言 C++提供了函数模板(function template).所谓函数模板,实际上是建立一个通用函数,其函数类型和形参类型不具体指定,用一个虚拟的类型来代表.这个通用函数就称为函数模板.凡是函数体 ...

  5. ETC2 区别于ETC的重要点

    ETC2 主要是对于NPOT却是4的倍数的贴图有较大压缩,比如一个1920X1080RGB的Loading图,ETC4压缩下不管用,大小5.9M,ETC2下压缩为1M

  6. debian9 下编译安装tengine2.2.1

    首先下载tengine的源码包,这个大家都会下载吧 wget http://tengine.taobao.org/download/tengine-2.2.1.tar.gz 然后解压缩 tar zxf ...

  7. python异常处理方法

    异常是指程序中的例外.违例情况,比如序列的下标越界.打开不存在的文件.空引用异常等.通过捕获异常并进行正确处理,可以提高程序的健壮性.如果没有代码处理异常,Python解释器将输出相关异常信息并终止程 ...

  8. android手机 解锁bootloader 刷recovery 线刷rom 卡刷rom

    1 解锁bootloader 为手机安装官方驱动 按相应的组合键使手机进入fastboot模式 执行命令fastboot oem unlock 123456 (123456为厂家提供的解锁码) 手机重 ...

  9. mysql主从复制以及读写分离

    之前我们已经对LNMP平台的Nginx做过了负载均衡以及高可用的部署,今天我们就通过一些技术来提升数据的高可用以及数据库性能的提升. 一.mysql主从复制 首先我们先来看一下主从复制能够解决什么问题 ...

  10. 导出excel时设置单元格格式（避免类似0100的数字丢失前面的0）

    <td style="vnd.ms-excel.numberformat:@;"><s:property value="accountCode" ...