学习冒泡事件，并根据网上的文章跟着敲了代码并做了小细节的改动，现有个疑问：
1、最终目的要实现鼠标移动上去就变色，如何实现？
2、如何解决点击下一个li元素，上一个点击的元素颜色还原？
求各位大哥说下思路以及会用到的方法，剩下的我自己来写，我想锻炼下自己敲代码的能力，感谢！
PS:看书容易，自己写代码就懵逼，哎！
HTML代码如下：
<ul id="color">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>JS代码：
(function () {
var color_list = document.getElementById('color');
color_list.addEventListener('click',changeColor);
function changeColor(e) {
var x = e.target;
if(x.nodeName.toLowerCase() === 'li')
x.style.backgroundColor = 'red';
// 最终目的要实现鼠标移动上去就变色？
// 另外，如何解决点击下一个li元素，上一个点击的元素颜色还原？
}
})();
滿天的星座2017-05-19 10:32:58
1,能用CSS解决就不用JS,题目的思路用：hover伪类可以解决这个问题。
2,但是你的代码是click事件..有点没对上,好吧,既然都写了事件代理,我写一个low点的,在li不多的情况下直接操作li
(function(){
var color_list = document.getElementById('color');
var lis = color_list.getElementsByTagName("li");
for(var i = 0;i<lis.length;i++){
lis[i].onclick = function(){
for(var i = 0;i<lis.length;i++){
lis[i].style.color = "";
}
this.style.color = "red";
}
}
})(); 闭包知道吧？为了不污染全局变量使用闭包,第一种写法是直接清除全部li的颜色,给当前点击的li加上颜色。
第二种写法我直接写里面了,外面的雷同的元素获取和闭包的代码我就不重复写了
var last = 0;
for(var i = 0;i<lis.length;i++){
lis[i].index = i;
lis[i].onclick = function(){
lis[last].style.color = "";
lis[this.index].style.color = "red";
last = this.index;
}
}第二种是清除上一个,给当前的li添加颜色,相比较而言第二种的性能稍微好点,第一种方法理解起来简单一点。
ps:不过我还是推荐事件代理的写法。
某草草2017-05-19 10:32:58
鼠标移上去就变色主要还是用css，伪类:hover就搞定了。
点击的话提供两个思路，1.把ul下的所有li都恢复变色，e.target再变成red。
2.点击后保存上一个target，点击后上一个target恢复变色，目前的target变成red
淡淡烟草味2017-05-19 10:32:58
所有移上去xx、移下来yy的，首先考虑用css的hover伪类；
你把你默认的属性存到一个类名里，改变后的属性存到另一个类名里，click回调时，$(this)去掉默认类添加改变类，然后遍历它的兄弟元素，去找改变类，找到以后去掉改变类添加默认类，应该就可以了吧~
