jquery 事件委托(利用冒泡)
将事件绑定在父元素上,格式$(父元素).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 事件委托(利用冒泡)的更多相关文章
- javascript事件委托和jquery事件委托
元旦过后,新年第一篇. 初衷:很多的面试都会涉及到事件委托,前前后后也看过好多博文,写的都很不错,写的各有千秋,自己思前想后,为了以后自己的查看,也同时为现在找工作的前端小伙伴提供一个看似更全方位的解 ...
- jquery事件委托详解
jQuery事件委托处理流程 上一章分析jQuery.event.add的时候已经分析了事件绑定,再把绑定的部分源码抽出来 if ( !(eventHandle = elemData.handle) ...
- jQuery事件委托
jQuery事件委托 <ul id="ulBox"> <li data-id="1"></li> <li data-i ...
- js进阶---12-12、jquery事件委托怎么使用
js进阶---12-12.jquery事件委托怎么使用 一.总结 一句话总结:通过on方法(事件委托),给要绑定事件的元素的祖先绑定事件,从而达到效果. 1.事件委托是什么? 通过事件冒泡,让子元素绑 ...
- jquery 事件委托
什么事件委托? DOM在为页面中的每个元素分派事件时,相应的元素一般都在事件冒泡阶段处理事件.在类似 body > div > a 这样的结构中,如果单击a元素,click事件会从a一直冒 ...
- 转载: jQuery事件委托( bind() \ live() \ delegate()) [委托 和 绑定的故事]
转载:http://blog.csdn.net/zc2087/article/details/7287429 随着DOM结构的复杂化和Ajax等动态脚本技术的运用,事件委托自然浮出了水面.jQuery ...
- jQuery事件委托方法 bind live delegate on
1.bind jquery 1.3之前 定义和用法:主要用于给选择到的元素上绑定特定事件类型的监听函数 语法: bind(type,[data],function(e)); 特点: a.适合页 ...
- JavaScript / JQuery事件委托如何实现?
一:什么是事件委托? 事件委托是利用事件冒泡,只指定一个事件处理程序来管理某一类型的所有事件. 事件委托就是利用事件冒泡原理实现的! 事件冒泡:就是事件从最深节点开始,然后逐步向上传播事件: 例:页面 ...
- Jquery事件委托之Safari
什么是事件委托 事件委托是Jquery中一种事件绑定的方式,不同于常见的事件绑定方式将事件绑定在目标元素上,而是将事件绑定在父级元素上通过事件冒泡来执行绑定函数. //常见的事件绑定(Jquery) ...
随机推荐
- 机器学习进阶-图像金字塔与轮廓检测-轮廓检测 1.cv2.cvtColor(图像颜色转换) 2.cv2.findContours(找出图像的轮廓) 3.cv2.drawContours(画出图像轮廓) 4.cv2.contourArea(轮廓面积) 5.cv2.arcLength(轮廓周长) 6.cv2.aprroxPloyDP(获得轮廓近似) 7.cv2.boudingrect(外接圆)..
1. cv2.cvtcolor(img, cv2.COLOR_BGR2GRAY) # 将彩色图转换为灰度图 参数说明: img表示输入的图片, cv2.COLOR_BGR2GRAY表示颜色的变换形式 ...
- python 阿狸的进阶之路(5)
一.模块 1.什么是模块: 包含了一组功能的python文件,文件名是xxx.py,模块名是module. 可以使用 import module,四个通用的类别: (1)用python编写的py文件 ...
- UI5-学习篇-8-本地SAP WEB IDE开发
1.本地SAP WEB IDE下载 UI5-学习篇-3-Local SAP WEB IDE下载 2.启动Orion服务 解压SAP WEB IDE文件后,双击Orion应用程序启动服务,如下图: 服务 ...
- cp命令 复制目录
格式:cp -R {源目录地址} {目标目录地址} 假设文件夹download下有两个目录 download/a download/b 现在想将文件夹a复制到文件夹b下,执行 cp -R downlo ...
- ejs 用到的语法
1.ejs 服务端渲染模板 2.语法: 01. <%= 变量名 %> -原样输出,不解析标签 02. <% js代码 %> 03. <%- 变量名%> -解析标签 ...
- bash: export: “path” not a valid identifier [closed]
export SPARK_HOME=/usr/local/spark export PATH=$PATH:$SPARK_HOME/bin bash: export: “path” not a vali ...
- ubuntu 安装oracle客户端
from: http://webikon.com/cases/installing-oracle-sql-plus-client-on-ubuntu Installing Oracle SQL*Plu ...
- Redis-stat 的安装与使用
一.ruby源码安装 下载最新版的 Ruby 压缩文件.请点击这里下载. 下载 Ruby 之后,解压到新创建的目录下: $ tar -xvzf ruby-2.2.3.tgz $ cd ruby-2.2 ...
- windows下如何查看端口,关闭端口,开启端口
如何查看端口 在Windows 2000/XP/Server 2003中要查看端口,可以使用NETSTAT命令: “开始">"运行”>“cmd”,打开命令提示符窗口.在 ...
- Spring格式化注解
Spring Framework 3.0发布了.这里我们介绍其中的一个:用于格式化的注解.简介 Spring 3 提供了两个可以用于格式化数字.日期和时间的注解@NumberFormat和@DateT ...