Halaman utama Jelajahi Bantuan
Masuk
lovecoding
/
vipAllDay
10
0
Fork 0
Berkas Masalah 0 Permintaan Tarik 0 Wiki
Jelajahi Sumber

dom

e 11 bulan lalu
induk
801e9a7338
melakukan
70b8add125
5 mengubah file dengan 173 tambahan dan 0 penghapusan
Tampilan Split Tampilkan Statistik Diff
  1. 21 0
      js/js初阶/DOM/16.默认事件.html
  2. 24 0
      js/js初阶/DOM/17.事件源.html
  3. 46 0
      js/js初阶/DOM/18.事件流.html
  4. 36 0
      js/js初阶/DOM/19.事件委托.html
  5. 46 0
      js/js初阶/DOM/20.this指向.html

+ 21 - 0
js/js初阶/DOM/16.默认事件.html
Tampilan Berkas 

@@ -0,0 +1,21 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <a href="http://www.baidu.com">哈哈哈</a>
 
+    <script>
 
+        var a1 = document.querySelector("a");
 
+        a1.onclick = function(event) {
 
+            // 取消默认事件方法 
+            // event.preventDefault();
 
+            // IE浏览器
 
+            event.returnValue = false;
 
+            alert("哈哈哈");
 
+        }
 
+    </script>
 
+</body>
 
+</html>

+ 24 - 0
js/js初阶/DOM/17.事件源.html
Tampilan Berkas 

@@ -0,0 +1,24 @@
 
+<!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>
 
+        #box {
 
+            width: 300px;
 
+            height: 300px;
 
+            background: purple;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="box"></div>
 
+    <script>
 
+        var box = document.getElementById("box");
 
+        box.onclick = function(event) {
 
+            console.log(event.target);
 
+        }
 
+    </script>
 
+</body>
 
+</html>

+ 46 - 0
js/js初阶/DOM/18.事件流.html
Tampilan Berkas 

@@ -0,0 +1,46 @@
 
+<!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: 500px;
 
+            height: 500px;
 
+            background: red;
 
+        }
 
+        #box2 {
 
+            width: 300px;
 
+            height: 300px;
 
+            background: yellowgreen;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="box1">
 
+        <div id="box2"></div>
 
+    </div>
 
+    <script>
 
+        var box1 = document.getElementById("box1");
 
+        // box1.onclick
 
+        /**
 
+         * 事件：
 
+         * 捕获：true
 
+         * 目标
 
+         * 冒泡：false
 
+        */
 
+       /**
 
+        * 事件流：
 
+        *   xxx.addEventListener("监听方法",执行函数,true/false);
 
+       */
 
+        box1.addEventListener("click",function(){
 
+            console.log("111")
 
+        },true)
 
+        box2.addEventListener("click",function(){
 
+            console.log("222")
 
+            // event.stopPropagation()
 
+        },true)
 
+    </script>
 
+</body>
 
+</html>

+ 36 - 0
js/js初阶/DOM/19.事件委托.html
Tampilan Berkas 

@@ -0,0 +1,36 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <button>添加</button>
 
+    <ul>
 
+        <li>111</li>
 
+        <li>222</li>
 
+        <li>333</li>
 
+    </ul>
 
+    <script>
 
+        var uls = document.getElementsByTagName("ul");
 
+        var lis = document.querySelectorAll("ul li");
 
+        var btn = document.querySelector("button");
 
+        btn.onclick  = function() {
 
+            var li1 = document.createElement("li");
 
+            li1.innerText = Math.round(Math.random() * 9 + 1);
 
+            uls[0].appendChild(li1);
 
+            console.log(uls,"走")
 
+        }
 
+        
+        for(var i=0;i<uls.length;i++) {
 
+            uls[i].onclick = function(eve) {
 
+            console.log(eve)
 
+            if(eve.target.nodeName == 'LI') {
 
+                alert(eve.target.innerText)
 
+            }
 
+        }
 
+        }
 
+    </script>
 
+</body>
 
+</html>

+ 46 - 0
js/js初阶/DOM/20.this指向.html
Tampilan Berkas 

@@ -0,0 +1,46 @@
 
+<!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: 300px;
 
+            height: 300px;
 
+            background-color: aqua;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="box1"></div>
 
+    <script>
 
+        var box1 = document.getElementById("box1");
 
+        // 1.点击事件 this指向当前点击元素
 
+        // box1.onclick = function() {
 
+        //     console.log(this);
 
+        // }
 
+        // 2.定时器 this指向window
 
+        // var timer = setInterval(function(){
 
+        //     // console.log(this);
 
+        //     box1.onclick = function() {
 
+        //     console.log(this);
 
+        // }
 
+        // },1000)
 
+        // 3.对象 this指向当前对象
 
+        // var obj = {
 
+        //     name:"LiLi",
 
+        //     age: 10,
 
+        //     eat:function() {
 
+        //         console.log(this);
 
+        //     }
 
+        // }
 
+        // obj.eat();
 
+        // 4.函数 this指向window
 
+        function fn1() {
 
+            console.log(this)
 
+        }
 
+        fn1()
 
+    </script>
 
+</body>
 
+</html>