先上一段代码
<div id="test">
<div class="child">
click
</div>
</div>
<script>
document.addEventListener(‘click‘, function (e) {
if(e.target.classList.contains(‘child‘)){
console.log(‘child‘)
}
if(e.target.id===‘test‘){
console.log(‘test‘)
}
if(e.target.tagName === ‘HTML‘){
console.log(‘html‘)
}
}, false)
</script>
想一下，当点击click的时候，控制台会打印出什么？
一开始我认为是顺序打印出child,test,html。但是实际上只打印了child。理解不深啊。
实际上一个监听事件的处理函数handle的e.target只有一个，就是指向被点击最具体的那个节点。所以这里的e.target就是child这个节点。故后面两个if是不成立的。
如何想实现上面的功能了，具体代码
<script>
document.addEventListener(‘click‘, function(e) {
console.log(e.path,"e.path")
var target = e.target;
while (target) {
if (target.classList && target.classList.contains(‘child‘)) {
console.log(‘child‘)
}
if (target.id === ‘test‘) {
console.log(‘test‘)
}
if (target.tagName === ‘HTML‘) {
console.log(‘html‘)
}
target = target.parentNode;
}
}, false)
</script>
手动冒泡来或者这些节点。这样就可以顺序打印出child，test，html了。
原文：http://www.cnblogs.com/childsplay/p/4758396.html