将事件绑定在父元素上,格式$(父元素).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. 源码编译php5.4 ./configure参数

    ./configure \--prefix=/usr/local/php/5.4 \--with-config-file-path=/usr/local/php/5.4/etc \--with-con ...

  2. Python中的元类(译)

    add by zhj: 这是大stackoverflow上一位小白提出的问题,好吧,我承认我也是小白,元类这块我也是好多次想搞明白, 但终究因为太难懂而败下阵来.看了这篇文章明白了许多,再加下啄木鸟社 ...

  3. 1037B--Reach Median(中位数)

    median 中位数 odd 奇数 even 奇数 You are given an array aa of nn integers and an integer ss. It is guarante ...

  4. mysql 的sleep线程过多处理方法

    php程序不要使用长连接:java程序调整连接池 什么是长连接? 其实长连接是相对于通常的短连接而说的,也就是长时间保持客户端与服务端的连接状态. 通常的短连接操作步骤是: 连接->数据传输-& ...

  5. html页面跳转

    button <button onclick="window.location.href='edit.jsp'">完善个人信息</button> 单击提交表 ...

  6. SQL Server 利用Profiler观察执行计划是否重用时SP:Cachemiss,SP:CacheInsert以及SP:CacheHit的含义

    本文出处:http://www.cnblogs.com/wy123/p/6913055.html 执行计划的缓存与重用 在通过SQL Profile观察一个SQL语句或者存储过程是否有可用的缓存执行计 ...

  7. ArcGIS案例学习笔记-聚类点的空间统计特征

    ArcGIS案例学习笔记-聚类点的空间统计特征 联系方式:谢老师,135-4855-4328,xiexiaokui@qq.com 目的:对于聚集点,根据分组字段case field,计算空间统计特征 ...

  8. C++ MFC Tab Control控件的详细使用

    1. 新建一个MFC工程, 取名MyTab, 选择Dialog based, 然后Finish. 2. 删除对话框上默认添加的三个控件. 添加Tab Control控件并在Property属性中设置I ...

  9. 通过日志恢复SQL Server的历史数据

    通过日志恢复SQL Server的历史数据 Posted on 2008-11-14 21:47 代码乱了 阅读(4658) 评论(10)  编辑 收藏 园子里前段时间发过一篇通过日志恢复MSSQL数 ...

  10. InfluxDB时序数据库应用场景

    目前了解到的InfluxDB时序数据库应用场景:如在数据库中有很多条记录,有的记录包含了时间字段time和数值字段water_level,有的只有时间字段time SELECT MAX("w ...