<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <ul id="ul"> <li id="li1">qwe</li> <li id="li2">qwe</li> <li id="li3">qwe</li> </ul> </body> <script type="text/javascript"> /* 目标： 点击每个li可以有三种不同的效果 */ //优化前的代码 /* 利用的就是传统的方式，在每一个需要处理的li上面添加上一个click */ var li1 = document.getElementById('li1'); li1.addEventListener("click",function(){ li1.innerHTML = "兔子只吃胡萝卜"; },false); var li2 = document.getElementById('li2'); li2.addEventListener("click",function(){ alert("by交易"); },false); var li3 = document.getElementById('li3'); li3.addEventListener("click",function(){ location.href = "www.baidu.com"; },false); //优化后的代码 /* 利用的就是事件的冒泡原理，在li的统一的父元素上添加一个click事件 通过click事件的向上传递性，来获取对应的值 */ var ul = document.getElementById('ul'); ul.addEventListener("click",function(event){ switch(event.target.id){ case "li1": event.target.innerHTML = "兔子只吃胡萝卜"; break; case "li2": alert("by交易"); break; case "li3": location.href = "www.baidu.com"; break; } },false); </script> </html>