qfedu-web/www/js9.html

39 lines
1.4 KiB
HTML
Raw Normal View History

2023-09-18 11:21:50 +08:00
<!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>