<!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>
时间： 2024-11-06 23:14:22