ul li 点击事件切换颜色
[问题点数：40分，结帖人qumoy]
本版专家分：0
结帖率 100%
CSDN今日推荐
本版专家分：2478
本版专家分：0
本版专家分：2478
本版专家分：0
本版专家分：2478
本版专家分：2764
本版专家分：2764
本版专家分：7044
本版专家分：7044
本版专家分：90
本版专家分：84
本版专家分：0
本版专家分：0
本版专家分：2764
本版专家分：0
本版专家分：2764
本版专家分：0
匿名用户不能发表回复！|
其他相关推荐
问题：CSS样式中的 nav ul li ul 与 nav&ul&li 这两种写法的区别是什么，“&”的作用是什么，谢谢。
padding:0;
list-style:
nav ul li ul{
二级ul li元素动态加载click事件
1、获取ul标签下li的内容&head&
&title&无标题页&/title&
&li&test1&/li&
&li&test2&/li&
1、标签对用来创建一个标有数字的列表；标签对用来创建一个标有圆点的列表；标签对只能在或标签对之间使用，此标签对用来创建一个列表项。若放在之间，则每个列表项前加上一个逐项递增的数字；若在之间，则每个列表项前加上一个圆点。
2、 标签定义了定义列表。
用来创建一个普通的列表，dl是definition list(定义列表)的简写。用来创建列表中的上层项目
通过jquery 控制ul下li标签中的ul li列表，来实现ul的收缩和展开功能
我们在写轮播图时，底部的小圆点或数字会放在一个ul下li里，这时候一般都要求小圆点或数字垂直居中，今天就写一个简单的li在ul中水平垂直居中。
　　轮播图一般有两种，左右轮播和上下轮播，对应的ul中的li也分为水平排列和竖直排列，下面就针对这两种情况分别说明。
1、轮播图左右轮播，li水平排列：
div class=&box&&
有这样的需求，就是对 li 列表进行排序，刚开始觉得木有什么头绪，就想起以前好像Array.prototype.sort.call可以这样做，可以实现对象的排序，比如
那么对于一个dom列表，怎么做呢。下面有一个JS原生版本的。DOM结构
&ul class=&datalist&&
&li class=&item&&
ul li 样式
简单的 ul li 树形菜单在实际开发中，我们经常遇到树形菜单，闲暇之余，特此简单研究了一下，欢迎吐槽！前言
所谓的树形菜单，无非就是 ul li的嵌套使用，如果有两级目录，就需要在li里再嵌套一层ul li，以此类推。
本例效果：
1.点击的li如果是叶子节点，则该节点变为红色字体；
2.点击的不是叶子节点，则展示子节点，再次点击，则影藏子节点。代码块html代码，例如：
/* ul li以横排显示 */
/* 所有class为menu的div中的ul样式 */
div.menu ul
list-style: /* 去掉ul前面的符号 */
margin: 0 /* 与外界元素的距离为0 */
padding: 0 /* 与内部元素的距离为0 */
width: /* 宽度根据元专注WEB开发
分享经验，沉淀知识
jquery on如何给未来元素绑定事件？
&作者：chenxing
&时间： 23:15
&阅读：690
&评论：
我们跳出问题设定的思维陷阱，把元素绑在未来元素的父级上，那么这个问题就迎刃而解了。
我们要想在一个元素上绑定一个事件，那么这个元素必须先存在，也就是绑定事件动作前就已有这个元素。
这是一个给元素绑定任何事件的前提。
如果按照这种思路走，那么“给未来元素绑定事件”将会是一个死胡同。
我们跳出问题设定的思维陷阱，把元素绑在未来元素的父级上，那么这个问题就迎刃而解了。
demo如下：
html部分代码
&ul class="menu"&
&li class="son"&php&/li&
&li class="son"&javascript&/li&
&button class="add"&添加菜单&/button&
js部分代码
$('button.add').click(function(){
$('&li class="son"&mysql&/li&').appendTo('ul.menu');
//给li绑定click事件
//记住不要把事件直接绑定在son元素上$('.son').on('click',function(){})
//正确的姿态：
$('.menu').on('click', '.son', function(){
alert('正在进入...');
ok，拿这个demo尝试一下，是不是未来添加的几个菜单项都被绑定了点击事件了呢？没错，jquery on 绑定未来事件就是这么简单。
除特别注明外，本站所有文章均为作者原创。 或分享自己的编程经验，或探讨工作中的问题，或聊以人生趣事。 转载请注明出处来自 http://www.qiusuoweb.com/74.html
&&&&&&
chenxing(PHP攻城狮)
运营天数
总访问量
文章数量
交流群:
新浪微博：草莽兴
&近期文章
&啊啊啊:
thinkphp如何有效的设置session过期时间
&卡密尔:
分析console.log输出和预期的不一致问题
&asd:
mobAdmin我的第一个开源项目
&asd:
mobAdmin我的第一个开源项目
&1111:
这个结果反了吧
深入PHP内核理解传值赋值与传址赋值的区别
&求索网:
thinkphp如何有效的设置session过期时间
一直有一个误区，以为架构那是自己5年以后的事儿。其实架构的学习可以穿插到整个开发中去，挺好的一个专栏~
求索网（www.qiusuoweb.com）是一个web开发技术分享博客。作为一名开发者不管是技术进步，还是自我成长都是一个需要不断的求索的漫长过程，
有问题，有挫折，有瓶颈，还有各种坑，把过去的总结成经验分享出来与诸君共勉！事件委托与阻止冒泡阻止其父元素事件触发
转载 &更新时间：日 15:26:51 & 投稿：whsnow
当点击具体的li元素时，发现ul的事件也被触发了，这是我们不想看到的，解决方法就是加一句阻止冒泡即可
简单说下事件委托与阻止冒泡
&ul class="clearfix" data-type="cityPick"&
&li class="active_sort_opts" data-id="0"&全部&/li&
&li data-id="88"&纽约&/li&
&li data-id="119"&洛杉矶&/li&
&li data-id="138"&拉斯维加斯&/li&
&li data-id="84"&夏威夷&/li&
&li data-id="120"&旧金山&/li&
&li data-id="105"&奥兰多&/li&
&li data-id="118"&西雅图&/li&
$("ul[data-type='cityPick']").on('click',function(){
alert("父元素ul被点击");
$("ul[data-type='cityPick']").on('click','li',function(){
alert("子元素li被点击");
当点击具体的li元素时，发现ul的事件也被触发了，这是我们不想看到的。
$("ul[data-type='cityPick']").on('click',function(){
alert("父元素ul被点击");
$("ul[data-type='cityPick']").on('click','li',function(e){
e.stopPropagation();//阻止冒泡
alert("子元素li被点击");
加一句阻止冒泡即可。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具事件冒泡机制与委托机制，jQuery动态绑定
一、事件的捕获与冒泡
由W3C规定的DOM2标准中，一次事件的完整过程包括三步：捕获→执行目标元素的监听函数→冒泡，在捕获和冒泡阶段，会依次检查途径的每个节点，如果该节点注册了相应的监听函数，则执行监听函数。以下面的HTML结构为例：
&div id="parentdiv"&
&div id="childdiv"&孩子&/div&
执行的流程应该是这样的：
下面是一组例子，分别点击孩子节点可以清楚的看到第三个参数的影响：
父亲节点的监听函数在捕获阶段执行：
var parent = document.getElementById('parentdiv');
var child = document.getElementById('childdiv');
parent.addEventListener('click',function(){alert('父亲被点击了');},true);
child.addEventListener('click',function(){alert('孩子被点击了');},false);
孩子父亲节点的监听函数在冒泡阶段执行：
var parent = document.getElementById('parentdiv');
var child = document.getElementById('childdiv');
parent.addEventListener('click',function(){alert('父亲被点击了');},false);
child.addEventListener('click',function(){alert('孩子被点击了');},false);
父亲节点的监听函数在捕获冒泡阶段都执行：
var parent = document.getElementById('parentdiv');
var child = document.getElementById('childdiv');
parent.addEventListener('click',function(){alert('父亲被点击了');},true);
parent.addEventListener('click',function(){alert('父亲被点击了');},false);
child.addEventListener('click',function(){alert('孩子被点击了');},false);
如果不想让事件向上冒泡，可以在监听函数中调用event.stopPrapagation()来完成，这样父亲节点就捕捉不到该事件了。在实际的开发中，这一用处还是挺多的。
js事件冒泡
js所谓的事件冒泡就是子级元素的某个事件被触发，它的上级元素的该事件也被递归执行，jQuery中的事件委托就是用的冒泡。
class="clearfix" id="ulOuter"&
class="active_sort_opts" data-id="0"&全部&
data-id="88"&纽约&
data-id="119"&洛杉矶&
data-id="138"&拉斯维加斯&
data-id="84"&夏威夷&
data-id="120"&旧金山&
data-id="105"&奥兰多&
data-id="118"&西雅图&
$("#ulOuter").on('click',function(){
alert("父元素ul被点击");
$("#ulOuter").on('click','li',function(){
alert("子元素li被点击");
当li的点击事件被触发时，父级ul的点击事件也被触发执行了。
对于通过这种方式绑定的事件实际上是挂载在$('#ulOuter')上的，点击$('#ulOuter')区域后会触发e.target的判断，简单的实现就相当于：
$('.outer').on('click',function(e){
if(e.target.tagName.toLowerCase()=='li'){
而在某些场合我们是不希望它冒泡的，达到点击 ul 时触发 ul 上（li 外围）的事件处理函数，点击 li 时只触发 li 上的函数而不触发
ul 上的函数的效果，应该将事件委托到 ul 上，然后stopPropagation阻止冒泡：
$("#ulOuter").on('click',function(){
alert("父元素ul被点击");
$("#ulOuter").on('click','li',function(e){
e.stopPropagation();
alert("子元素li被点击");
加上e.stopPropagation(); 这一句便可以阻止事件冒泡了。这样的效果是点击 li 标签只触发 li 的点击事件，点击 li 之外的 ul 触发父元素的点击事件。
实际上，事件委托的事件处理函数是当被委托的元素上的事件触发时判断e.target后执行，而不是目标元素上的事件被触发后就立即执行，在没有阻止冒泡的情况下，事件还是一层层传播的，只是处理函数在事件到达那一层被触发的问题。根据事件代理的规则，点击li元素后，click事件是从li至ul至ul父元素一层层冒泡上去的，沿途触发各个元素上的事件处理函数。如果我们将事件委托在ul上，调用了stopPropagation，就阻止了事件从ul继续向上冒泡，而不是阻止事件从li向上冒泡。这样从ul开始，ul及其祖先元素上的事件冒泡被阻止。
二、事件委托机制
知道了事件的捕获冒泡机制，我们可以利用它来实现更方便的程序控制，事件委托便是最典型的应用之一。下面来说说javascript中的事件委托机制。什么叫委托呢？想想我们现实生活中，自己不想干的事，让别人来帮忙完成，这就是把事情“委托”给别人。Javascript的事件委托机制也是这个道理，本来一个监听函数要处理节点a触发的事件，现在把这个监听函数绑定到节点a的父层节点上，让它的父辈来完成事件的监听，这样就把事情“委托”了过去。在父辈元素的监听函数中，可通过event.target属性拿到触发事件的原始元素，然后再对其进行相关处理。
那这样做有什么好处呢？最大的用处便是监听动态增加的元素。比如我们现在有这样的需求，点击下面每个列表项弹出各自的内容，现在随着web应用的盛行，网页中使用异步请求来动态加载节点已经变的很普遍，所以我们点击下方的按钮要在列表中增加一项，并且点击新增加的节点也要弹出内容。HTML结构如下：
id="olist"&
&列表内容1&
&列表内容2&
&列表内容3&
&列表内容4&
&列表内容5&
若我们使用之前的监听器绑定方式，需要遍历所有的li元素并监听，代码应该是这样的：
var listArray = document.getElementById('olist').childN
for(var i=0;i&listArray.i++){
listArray[i].addEventListener('click',function(){
alert(this.innerText);
运行效果如下：
可以发现当新增元素后，点击它并没有弹出内容。那是当然的了，因为我们并没有给新增的元素绑定监听器，为了实现点击新增元素也弹出内容，我们不得不在每次新增一个元素后，再进行一次绑定。加一个绑一个，加一个绑一个，累不累啊！你不累浏览器都累了！这样做导致的性能开销是可想而知的，而且浏览器还要维系n多元素与应的监听函数的映射关系，会占用大量内存。
面对这样拖沓冗杂的代码，你是不是已经不能忍，来看看使用事件委托的效果，代码如下：
var olist = document.getElementById('olist');
olist.addEventListener('click',function(){
alert(event.target.innerText);
看看实际运行的效果：
我们并未给li元素绑定任何监听器，而是监听它的父元素ul，等到事件冒泡上来的时候，在处理函数中通过event.target获得触发事件的li元素，进行相关处理。这样做的好处是显而易见的，首先只进行了一次监听器的绑定，浏览器轻松，其次动态增加元素后你也不必要再绑定监听器，你也轻松。正所谓大家好才是真的好！
jQuery事件委托
假如现在有10个按钮，要为每个按钮绑定一个click事件，可能才十个按钮，你可以一个一个的绑定或用循环进行绑定，但是这样性能呢？
&div class="button-group"&
&bottoun type="button" class="btn"&提交&/bottoun&
&bottoun type="button" class="btn"&提交&/bottoun&
&bottoun type="button" class="btn"&提交&/bottoun&
&bottoun type="button" class="btn"&提交&/bottoun&
&bottoun type="button" class="btn"&提交&/bottoun&
&bottoun type="button" class="btn"&提交&/bottoun&
&bottoun type="button" class="btn"&提交&/bottoun&
&bottoun type="button" class="btn"&提交&/bottoun&
&bottoun type="button" class="btn"&提交&/bottoun&
&bottoun type="button" class="btn"&提交&/bottoun&
$(".button-group").on('click','.btn',function(){
alert($(this).html());
这里可以看出，我们只是为所有的button的一个父级绑定了click事件，而不是为所有的button绑定事件，极大的提高了性能，这样做的好处还有可以对动态加进来的元素进行处理：就是有一个按钮原本的dom里面是没有的，是你通过其他方式添加进来的，即未来元素，用直接绑定方法是不能成功的，只能用事件委托，委托给该元素的父级进行处理。
由于事件委托是通过事件冒泡实现的，所以如果子级的元素阻止了事件冒泡，那么事件委托也将失效！
其实jQueryjQuery 1.7 Beta 1之前版本为绑定和委托事件提供了.bind()、.live()和.delegate()方法，可以说是一步步改进。
假设有一个多行多列的表格，我们想让用户单击每个单元格都能看到与其中内容相关的更多信息（比如，通过提示条）。为此，可以为每个单元格都绑定click事件：
$("info_table td").bind("click", function(){});
问题是，如果表格中要绑定单击事件的有10列500行，那么查找和遍历5000个单元格会导致脚本执行速度明显变慢，而保存5000个td元素和相应的事件处理程序也会占用大量内存。
事件委托可以解决上述两个问题。具体到代码上，只要用jQuery 1.3新增的.live()方法代替.bind()方法即可：
$("#info_table td").live("click",function(){});
这里的 .live() 方法会把click事件绑定到 $(document) 对象（但这一点从代码中体现不出来，这也是.live()方法饱受诟病的一个重要原因，稍后再详细讨论），而且只需要给$(document)绑定一次（不是50次，更不是5000次）。在接收到任何事件时，$(document)对象都会检查事件类型和事件目标，如果是click事件且事件目标是td，那么就执行委托给它的处理程序。
一切似乎很完美。可惜，事实并非如此。因为.live()方法并不完美，它有如下几个主要缺点：
$()函数会找到当前页面中的所有td元素并创建jQuery对象，但在确认事件目标时却不用这个td元素集合，而是使用选择符表达式与event.target或其祖先元素进行比较，因而生成这个jQuery对象会造成不必要的开销；
默认把事件绑定到$(document)元素，如果DOM嵌套结构很深，事件冒泡通过大量祖先元素会导致性能损失；
只能放在直接选择的元素后面，不能在连缀的DOM遍历方法后面使用，即$("#infotable td").live...可以，但$("#infotable").find("td").live...不行；
收集td元素并创建jQuery对象，但实际操作的却是$(document)对象，令人费解。
而为了避免事件冒泡造成的性能损失，jQuery从1.4开始支持在使用.live()方法时配合使用一个上下文参数：
$("td",$("#info_table")[0]).live("click",function(){});
这样，“受托方”就从默认的$(document)变成了$("#infotable")[0]，节省了冒泡的旅程。
.delegate()
如前所述，为了突破单一.bind()方法的局限性，实现事件委托，jQuery 1.3引入了.live()方法。后来，为解决“事件传播链”过长的问题，jQuery 1.4又支持为.live()方法指定上下文对象。而为了解决无谓生成元素集合的问题，jQuery 1.4.2干脆直接引入了一个新方法.delegate()。
使用.delegate()，前面的例子可以这样写：
$("#info_table").delegate("td","click",function(){});
jQuery 1.7为了解决.bind()、.live()和.delegate()并存造成的不一致性问题，将会增加一对新的事件方法：.on()和.off()：
$(elems).on(events, selector, data, fn);
$(elems).off(events, selector, fn);
如果指定selector，则为事件委托；否则，就是常规绑定。
所以现在只要用on方法就可以了，推荐用on方法进行委托或常规绑定事件。
没有更多推荐了，系统发生错误
您浏览的页面暂时发生了错误！请稍后再试～}