|
|
@@ -0,0 +1,81 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+ <style>
|
|
|
+ *{
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ #div1{
|
|
|
+ width: 300px;
|
|
|
+ height: 300px;
|
|
|
+ background: green;
|
|
|
+ }
|
|
|
+ #div2{
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ background: red;
|
|
|
+ }
|
|
|
+ #div3{
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ background: blue;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div id="div1">
|
|
|
+ <div id="div2">
|
|
|
+ <div id="div3">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <script>
|
|
|
+ var div1 = document.getElementById('div1')
|
|
|
+ var div2 = document.getElementById('div2')
|
|
|
+ var div3 = document.getElementById('div3')
|
|
|
+
|
|
|
+ // div1.onclick = function(){
|
|
|
+ // console.log('我是div1')
|
|
|
+
|
|
|
+ // }
|
|
|
+ // div2.onclick = function(){
|
|
|
+ // console.log('我是div2')
|
|
|
+ // //阻止事件冒泡
|
|
|
+ // event.stopPropagation()
|
|
|
+ // }
|
|
|
+ // div3.onclick = function(){
|
|
|
+ // console.log('我是div3')
|
|
|
+ // event.stopPropagation()
|
|
|
+ // }
|
|
|
+
|
|
|
+ div1.addEventListener('click',function(){
|
|
|
+ console.log('我是div1')
|
|
|
+ },true)
|
|
|
+ div2.addEventListener('click',function(){
|
|
|
+ console.log('我是div2')
|
|
|
+ },true)
|
|
|
+ div3.addEventListener('click',function(){
|
|
|
+ console.log('我是div3')
|
|
|
+ },true)
|
|
|
+
|
|
|
+ div1.addEventListener('click',function(){
|
|
|
+ console.log('我是div1')
|
|
|
+ },false)
|
|
|
+ div2.addEventListener('click',function(){
|
|
|
+ console.log('我是div2')
|
|
|
+ },false)
|
|
|
+ div3.addEventListener('click',function(){
|
|
|
+ console.log('我是div3')
|
|
|
+ },false)
|
|
|
+ //事件冒泡 从内到外 先触发自己的事件 然后触发父元素的事件 false
|
|
|
+ //事件捕获 从外到内 先触发父元素的事件 然后触发自己事件 true
|
|
|
+
|
|
|
+ //事件执行的顺序 是 先捕获 后冒泡 先从外到里 然后从里到外
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>l
|
zsydgithub