非IE冒泡与捕获

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{
            width:500px;
            height: 500px;
            background-color: aqua;
        }
        #div2{
            width:300px;
            height: 300px;
            background-color:darkcyan;
        }
        #div3{
            width:100px;
            height: 100px;
            background-color:darksalmon;
        }
    </style>
    <script>

        window.onload = function(){
            var div1 = document.getElementById('div1');
            var div2 = document.getElementById('div2');
            var div3 = document.getElementById('div3');

            div1.addEventListener('click',function(){
                alert('div1');
            },true);//捕获
            div3.addEventListener('click',function(e){
                alert('div3');
               // e.stopPropagation();阻止事件冒泡

            },true);//目标函数

            div1.addEventListener('click',function(){
                alert('div1');
            },false);//冒泡

            

        }

    </script>
</head>
<body>

<div id="div1">

    <div id="div2">

        <div id="div3">

        </div>
    </div>
</div>
</body>
</html>

非IE浏览器既有捕获又有冒泡

true=捕获

false=冒泡

当我点击div3的时候，先捕获弹出div1，在弹出div3,最后冒泡弹出div1；

像我们平时在传统的绑定事件中，element.onclick = dosomething;是采用了事件冒泡方式。