Эхлэл Бүгдийг харах Тусламж
Нэвтрэх
lovecoding
/
VIP20
6
0
Салаа 0
Файлууд Асуудлууд 0 Хуулах хүсэлтүүд 0 Мэдлэгийн сан
Эх сурвалжийг харах

new

zsydgithub 3 жил өмнө
parent
57edbf2426
commit
b4661b99ab
4 өөрчлөгдсөн 192 нэмэгдсэн , 0 устгасан
Өөрчлөллтийг нэгтгэж харах Өөрчлөлтийн статистик харах
  1. 81 0
      14_事件冒泡.html
  2. 23 0
      15_阻止事件默认行为.html
  3. 39 0
      16_事件源.html
  4. 49 0
      17_事件流.html

+ 81 - 0
14_事件冒泡.html
Файл харах 

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

+ 23 - 0
15_阻止事件默认行为.html
Файл харах 

@@ -0,0 +1,23 @@
 
+<!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>
 
+</head>
 
+<body>
 
+  <a href="https://www.baidu.com" id="a1">跳转</a>
 
+  <script>
 
+    var a1 = document.getElementById('a1')
 
+    a1.onclick = function(e){
 
+      console.log(123)
 
+      //阻止事件默认行为
 
+      // e.preventDefault() //仅w3c
 
+
 
+      //将其设为flase 表示以取消事件的默认动作
 
+      e.returnValue = false //仅ie浏览器
 
+    }
 
+  </script>
 
+</body>
 
+</html>

+ 39 - 0
16_事件源.html
Файл харах 

@@ -0,0 +1,39 @@
 
+<!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>
 
+    #div1{
 
+      width: 200px;
 
+      height: 200px;
 
+      background: aqua;
 
+    }
 
+    #div2{
 
+      width: 100px;
 
+      height: 100px;
 
+      background: antiquewhite
 
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+  <div id="div1">
 
+    <div id="div2"></div>
 
+  </div>
 
+  <script>
 
+    var div1 = document.getElementById('div1')
 
+    var div2 = document.getElementById('div2')
 
+    div1.onclick = function(e){
 
+      console.log(this)
 
+      console.log(e.target)
 
+    }
 
+    div2.onclick = function(e){
 
+      console.log(this)
 
+      console.log(e.target)
 
+    }
 
+    //事件源  事件的源头
 
+  </script>
 
+</body>
 
+</html>

+ 49 - 0
17_事件流.html
Файл харах 

@@ -0,0 +1,49 @@
 
+<!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>
 
+    #div1 {
 
+      width: 200px;
 
+      height: 200px;
 
+      background: aqua;
 
+    }
 
+
 
+    #div2 {
 
+      width: 100px;
 
+      height: 100px;
 
+      background: antiquewhite
 
+    }
 
+  </style>
 
+</head>
 
+
 
+<body>
 
+  <div id="div1">
 
+    <div id="div2"></div>
 
+  </div>
 
+  <script>
 
+    var div1 = document.getElementById('div1')
 
+    var div2 = document.getElementById('div2')
 
+    // div2.onclick = function(){
 
+    //   console.log('我是div2')
 
+    // }
 
+    // div1.onclick = function(){
 
+    //   console.log('我是div1')
 
+    // }
 
+    
+    //事件捕获
 
+    //元素.addEventListener('事件',函数，布尔值) 
+    div1.addEventListener('click', function () {
 
+      console.log('我是div1')
 
+    }, true)
 
+    div2.addEventListener('click', function () {
 
+      console.log('我是div2')
 
+    }, true)
 
+  </script>
 
+</body>
 
+
 
+</html>