<div >
<div id="main">
12456</div>
</div>
<script>
window.onload = function(){
document.getElementById("main").onclick = function(e){
console.log(e.target);
console.log(e.target.id);
console.log(e.target.nodeName);
console.log(e.target.className);
console.log(e.target.innerHTML);
console.log(e.target.innerText)
}
}
</script>
<style>
#a{width:100px;height:100px;background: red}
#b{width:80px;height:80px;background: green}
#c{width:60px;height:60px;background: yellow}
#d{width:40px;height:40px;background: orange}
</style>
</head>
<body>
<div id="a">
<div id="b">
<div id="c">
<div id="d"></div>
</div>
</div>
</div>
<script>
document.getElementById("a").addEventListener('click',function(e){
console.log('target:'+e.target.id+" "+'tTarget:'+e.currentTarget.id)
})
document.getElementById("b").addEventListener('click',function(e){
console.log('target:'+e.target.id+" "+'tTarget:'+e.currentTarget.id)
})
document.getElementById("c").addEventListener('click',function(e){
console.log('target:'+e.target.id+" "+'tTarget:'+e.currentTarget.id)
})
document.getElementById("d").addEventListener('click',function(e){
console.log('target:'+e.target.id+" "+'tTarget:'+e.currentTarget.id)
})
</script>