事件委托1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.pop-window {
width:200px;
height:200px;
background: red;
position: absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
display: none;
}
</style>
</head>
<body>
<div class="pop-window" id="popWindow"></div>
<input type="button" value="click me" id="btn6">
<script>
var btn6 = document.getElementById("btn6");
var popWindow = document.getElementById('popWindow');
// document.onclick = function(event){
// event = event || window.event;
// var target = event.target || event.srcElement;
// if(target == btn6){
// alert(btn5.value);
// }
// }
// btn6.addEventListener('click',function(ev){
// ev.stopPropagation();
// console.log('btn');
// popWindow.style.display='block';
// })
// window.addEventListener('click',function(event){
// console.log('window');
// popWindow.style.display='none';
// });
window.addEventListener('click',function(event){
var target = event.target;
popWindow.style.display='none';
if(target == btn6){
popWindow.style.display='block';
}
});
</script>
</body>
</html>
事件委托2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<ul id="list">
<li id="item1" >item1</li>
<li id="item2" >item2</li>
<li id="item3" >item3</li>
</ul>
<script>
var item1 = document.getElementById("item1");
var item2 = document.getElementById("item2");
var item3 = document.getElementById("item3");
// item1.onclick = function(){
// alert("hello item1");
// }
// item2.onclick = function(){
// alert("hello item2");
// }
// item3.onclick = function(){
// alert("hello item3");
// }
document.addEventListener("click",function(event){
var target = event.target;
switch(target.id){
case 'item1':
console.log('item1');
break;
case 'item2':
console.log('item2');
break;
case 'item3':
console.log('item3');
break;
}
})
</script>
</body>
</html>