1、HTML
<!DOCTYPE html> <html> <head> <title>event</title> </head> <body> <div id="obj1"> welcome <h5 id="obj2">hello</h5> <h5 id="obj3">world</h5> </div> <script type="text/javascript"> var obj1=document.getElementById('obj1'); var obj2=document.getElementById('obj2'); obj1.addEventListener('click',function(){ alert('hello'); },false); obj2.addEventListener('click',function(){ alert('world'); }) </script> </body> </html>
简单地文档结构：document > html > body > div > h5
我们再上边代码的基础上，尝试点击h5标签时，弹出对应的innerHTML。常规的做法是遍历每个h5，然后在每个h5上绑定一个点击事件，这种做法在h5标签少的时候可以使用，但若有很多的h5，那就会导致性能降低。所以有如下代码：
2、JavaScript
obj1.addEventListener('click',function(e){
var e=e||window.event;
if(e.target.nodeName.toLowerCase()=='h5'){
alert(e.target.innerHTML);
}
},false);
由于事件冒泡机制，点击了h5后会冒泡到div,此时就会触发绑定在div上的点击事件，再利用target找到事件实际发生的元素，就可以达到预期的效果。