<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>面试题练习img居中</title>
<style type="text/css">
img {
/*display: table-cell;
vertical-align: middle;*/
}
html,body{
height: 100%;
}
div{
width: 600px;
height: 1600px;
display: table-cell;
vertical-align: middle;
text-align: center;
}
</style>
</head>
<body>
<ul>
<li id="a">1</li>
<li id="b">2</li>
<li id="c">3</li>
<li id="d">4</li>
<li id="e">5</li>
</ul>
</body>
<script type="text/javascript">
var str = document.getElementsByTagName("ul")[0];
str.onclick = function(){
var hehe = event || window.event;
var target = hehe.target || hehe.srcElement;
switch(target.id){
case "a":{
console.log(1);
this.style.background = "orange";
break;
}
case "b":{
console.log(2);
this.style.background = "orange";
break;
}
case "c":{
console.log(3);
this.style.background = "orange";
break;
}
case "d":{
console.log(4);
this.style.background = "orange";
break;
}
case "e":{
console.log(5);
this.style.background = "orange";
break;
}
}
}
</script>
</html>
使用事件委托以后，可以不必在每个子元素上绑定事件，能够优化性能，同时对于一些动态添加进去的子元素，事件委托也要比执行回调函数绑定事件更加方便