js 冒泡捕获

浏览数：30 / 时间：2015年06月09日

<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>