<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <div> <a id="p" onclick="alert(‘父级 onclick‘)" style="display:block;background-color:red;width:400px;height:200px">一刀一个 <span id="el" onclick="alert(‘子级 onclick‘)" style="display:block;background-color:green;width:300px;height:150px">一枪一个 <div id="dl" onclick="alert(‘孙级 onclick‘)" style="display:block;background-color:gray;width:200px;height:100px"> <div id="sl" onclick="alert(‘曾孙级 onclick‘)" style="display:block;background-color:orange;width:120px;height:100px"></div> </div> </span> </a> </div> <script type="text/javascript"> var el = document.getElementById(‘el‘); var p = document.getElementById(‘p‘); var d = document.getElementById(‘dl‘); var z = document.getElementById(‘sl‘); p.addEventListener(‘click‘, function () { alert(‘父级 冒泡‘); }, false); p.addEventListener(‘click‘, function () { alert(‘父级 捕获‘); }, true); el.addEventListener(‘click‘, function () { alert(‘子级 捕获‘); }, true); el.addEventListener(‘click‘, function () { alert(‘子级 冒泡‘); }, false); d.addEventListener(‘click‘, function () { alert(‘孙级 捕获‘); }, true); d.addEventListener(‘click‘, function () { alert(‘孙级 冒泡‘); }, false); z.addEventListener(‘click‘, function () { alert(‘曾孙级 冒泡‘); }, false); z.addEventListener(‘click‘, function () { alert(‘曾孙级 捕获‘); }, true); </script> </body> </html>
原文：http://www.cnblogs.com/kongxs/p/4026039.html