一:给ul下的li绑定同样的事件(制作选项卡的原理)
html可css:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {margin: 0;padding: 0;}
#myList {width: 200px;height: 200px;margin: 50px;list-style: none;background: #ccc;overflow: hidden;}
#myList li {width: 100%;border-top: 1px solid black;line-height: 50px;}
#myList li:first-child {border-top: 0;}
</style>
</head>
<body>
<ul id="myList">
<li id="list1">列表1</li>
<li id="list2">列表2</li>
<li id="list3">列表3</li>
<li id="list4">列表4</li>
</ul>
</body>
</html>
js代码:
//给ul下的li元素绑定同一个事件
var list = document.getElementById('myList');
var listChild = document.getElementsByTagName('li');
for(var i=0; i<listChild.length; i++){
listChild[i].addEventListener('click',function(){
for(var j=0; j<listChild.length; j++){
listChild[j].style.background = '#ccc'; //给所有li颜色变为#ccd
}
this.style.background = 'red'; //给选中的li颜色变为red
},false)
}
二:给ul下的li绑定不同的事件
还是上面的html,给它们绑定不同的事件,js代码如下:
//给ul下的li元素绑定不同事件
var list = document.getElementById('myList');
list.addEventListener('click',function(event){
event = event || window.event;
var target = event.target || event.srcElement;
switch(target.id){
case "list1" : console.log('list1');
break;
case "list2" : console.log("list2");
break;
case "list3" : console.log("list3");
break;
case "list4" : console.log("list4");
break;
}
},false);
上面的方法相对于给每个事件都直接来一个addEventListener的方法而言比较节约内存。