前端

2023-09-18 11:21:50 +08:00
parent 8038f02f30
commit 85e41f3ef9
31 changed files with 1802 additions and 30 deletions
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="author" content="flykhan" />
+    <meta name="keywords" content="c c++ 物联网" />
+    <title>window窗口对象</title>
+  </head>
+  <body>
+    <span data-url="css3.html" data-target="_self" onclick="open_page(event)"
+      >打开主页</span
+    ><br />
+    <span data-url="css1.html" data-target="_blank" onclick="open_page(event)"
+      >打开样式1</span
+    ><br />
+
+    <script>
+      // event 表示在 span 标签上发生的事件对象
+      // event 对象的核心属性：
+      // 1) target 发生事件的目标对象（事件源）
+      // 2) x,y 事件发生的坐标
+      // 3) type 事件类型, 如：click, dbclick, mousemove, mouseover, mouseout, mouseup, mousedown 等
+      // 4) preventDefault() 阻止默认事件
+      function open_page(event) {
+        console.log(event);
+        // 获取点击的标签元素对象
+        let span = event.target;
+        // 从点击的目标对象中获取数据集 dataset, 里面存储了所有的 data-xxx 属性及其值
+        let page_url = span.dataset.url;
+        let page_target = span.dataset.target;
+
+        // open(url, target, features, replace) 是 window 对象的方法，用于打开新的窗口
+        // 在页面的 script 标签中，window 对象可以省略
+        open(page_url, page_target); // 打开新的页面
+      }
+    </script>
+  </body>
+</html>