lyuehh
1/2/2014 - 2:10 PM

event.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css" media="all">
#a {display: block;width: 200px; margin: 10px;border: 1px solid #f00;}
#span {display:block; width: 100px; margin: 20px; border: 1px solid #0f0;}
    </style>
</head>
<body>
    <a id="a" href="javascript:;">a<span id="span">span</span></a>
    <script type="text/javascript" charset="utf-8">
        var a = document.getElementById('a');
        var span = document.getElementById('span');
        console.log(a);
        console.log(span);

        span.addEventListener('click', function() {
                    console.log('span bubble');
                }, false);
        span.addEventListener('click', function() {
                    console.log('span capture');
                }, true);
        a.addEventListener('click', function() {
                    console.log('a capture');
                }, true);
        a.addEventListener('click', function() {
                    console.log('a bubble');
                }, false);
    </script>
</body>
</html>