lovecoding
/
web0331


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1 {
            width: 700px;
            height: 700px;
            background: #f00;
        }
        #box2 {
            width: 350px;
            height: 350px;
            background: #ff0;
        }
        #box3 {
            width: 175px;
            height: 175px;
            background: #0f0;
        }
    </style>
</head>
<body>
    <!-- 
        事件三个阶段：
            事件捕获：由外向内
            目标阶段
            事件冒泡:由内向外
    -->
            <div id="box1">
                <div id="box2">
                    <div id="box3"></div>
                </div>
            </div>
            <script>

                var box1 = document.getElementById("box1")
                var box2 = document.getElementById("box2")
                var box3 = document.getElementById("box3")
                // box1.onclick = function() {
                //     console.log("1")
                // }
                // box2.onclick = function(event) {
                //     console.log("2");
                //     // 阻止事件冒泡
                //     event.stopPropagation();
                // }
                // box3.onclick = function(event) {
                //     console.log("3")
                //     // 阻止事件冒泡
                //     event.cancelBubble = true;
                // }
                /**
                 * 监听事件
                 * xxx.addEventListener('mousemove',function() {xxxx},true/false)
                 * true 捕获
                 * false 冒泡
                */
               box1.addEventListener('click',function() {
                console.log(1);
               },false)
               box2.addEventListener('click',function() {
                console.log(2);
               },false)
               box3.addEventListener('click',function() {
                console.log(3);
               },false)
            </script>
</body>
</html>