一：給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的方法而言比較節約內存。