JavaScript的三大对象：window、Document和Event-源码交易平台丞旭猿-丞旭猿

三大对象概述

•访问一个网页时，首先打开浏览器，键入一个网址，浏览器便会为你开启一个tab窗口，随着你每打开一个网页，这个窗口就会自动增加一个，你也可以通过单击+进行手动打开一个窗口。另外，在右上角，还有三个按钮，对应的功能分别是缩小，放大和关闭窗口。

•本质上都是依靠程序实现的。其中的核心程序一定会涉及JavaScript中的window对象，其中每一个窗口都对应着一个Window对象。其中，窗口的主要内容区主要负责加载并显示网页内容，这些内容是由HTML文档产生的，因此，它又对应着一个document对象（文档对象），这样浏览器才知道如何显示网页中的每一个元素以及显示什么内容。当我们选择选择当前页面显示其中一个tab选项卡时，会自动产生一个event对象。

每一个窗口都对应一个window对象，窗口主要内容区负责加载并显示网页内容，这些内容是由HTML文档产生的，文档对应着document对象，这样浏览器才知道如何显示网页中的每一个元素以及显示什么内容。这两个对象为了便于JavaScript开发，都被封装成了对象。

window对象主要提供跟浏览器窗口相关的接口，比如窗口的高和宽属性，大小的改变方法；document对象则提供跟html文档中的元素相关的接口，如，html元素的查找和替换方法。

除此之外，window对象和document对象还提供对用户的行为做出响应的事件，比如，用户的单击评论按钮，就会自动产生一个event对象，相应地就会触发相应的处理函数，随着处理函数的执行，网页上就添加了新的评论内容。

以JavaScript为基础开发的Web应用属于典型的事件驱动型应用，这类应用的程序中通常存在一个主循环，用于监听所有排队的事件，一旦检测到一个事件发生，就自动执行其事件处理函数，来对这个事件做出回应。

在小学，一到早上8:00，就打铃提示同学们该上第一节课了。

事件是时间一到8点整，事件处理函数（响应函数）是打铃，并播放提示音乐同学们，上课了，请赶快坐好，最后的效果是同学们整齐地准好，开始上课。

web应用属于图形化交互应用，离不开window对象，document和event对象提供的大量API接口。

认识Window 对象

Window对象的组成

Window对象：

alert ()方法：直接调用

事件onload：触发调用

document、screen、navigator对象，直接访问

window对象中属性用法

window对象的onload属性

window.onload = function(){
 document.body.style.background = "lightgreen";
 };

window对象中方法的应用

常见的方法

window.console.log() 在控制台窗口中输出 简写为 Console.log()
window.confirm() 打开一个带确认的窗口 简写为 Confirm()
window.alert() 打开一个警告弹出框  简写为 Alert()
Window.open（）打开一个新窗口

if(window.confirm(真的要离开吗？)){
 window.open(exit.html,感谢关注！);
}

console也是一个对象，是window对象的子对象，也有一些方法如log().

window对象中事件的用法

（1）通过window对象的on事件属性

window.onfocus = 处理函数名；同样地，还有window.onblur = 处理函数名；在这种方式中，事件是JavaScript已经定义好的，比如onfocus，表示获取到焦点的事件，而onblur则表示失去焦点的事情发生。通过为其赋予函数名，就表示一旦定义的事件被触发，就会自动执行函数内部的代码，最后的效果一般是网页内容的一些动态变化，比如背景颜色的改变等。

（2）通过window对象的addEventListener()方法

在上一个任务中，主要通过addEventListener（’事件名称’,事件处理函数名）; 的方式，添加了两个事件，一个是获取焦点事件，一个是失去焦点事件。该方法需要提供2个必须的参数，第一是事件名称，第二是事件句柄，它就等价于事件处理函数。这里，将一个函数作为该方法的参数，这个函数有个专有名称——回调函数。

<html><head><metacharset="UTF-8"><title>window对象的事件title><linkrel="stylesheet"href="my.css"><style>.paused{background:ddd;color:eee;}style>head><body><pid="log">单击这个段落所在窗口让它获取焦点p><script>functionloseFocus(){document.body.classList.add(paused);log.textContent=失去焦点了;}functiongetFocus(){document.body.classList.remove(paused);log.textContent=获取到了焦点，点击窗口外部区域失去焦点;}constlog=document.getElementById(log);window.addEventListener(focus,getFocus);window.addEventListener(blur,loseFocus);script>body>html>

计时器

window对象提供三个计时器方法的用法。

（1）setInterval(‘函数名’，间隔时间（ms）)：指定在每隔一定的毫秒（ms），就执行一次执行指定函数或具体的脚本计算代码。

（2）clearInterval(定时器的引用变量)：用于清除setInterval设置的计时器，停止其正在执行的动作。

（3）setTimeout(‘函数名’，时间（ms）)：在指定的毫秒数后只执行一次函数或计算。

主要HTML代码如下

<divid="digitalClock"><h2>抢单倒计时h2><pid="clock">p>div>

CSS样式声明

digitalClock{
 margin-top:20px;
}
digitalClock h2{
 color:red;
}
clock{
 margin:20px 0;
 width: 300px;
 font: bold 24pt sans;
 background: ddf;
 padding: 10px;
 text-align:center;
 border:solid black 2px;
 border-radius: 10px;
}
JS实现代码：<script>functioncountDownTime(times){varend=newDate("2019/12/25 00:00:00");varnow=newDate();vars=parseInt((end-now)/1000);//距离下一个假期还有: ?天?小时?分?秒varp=document.getElementById("clock");if(s>0){vard=parseInt(s/3600/24);if(d<10)d="0"+d;//s/3600/24,再下取整varh=parseInt(s%(3600*24)/3600);if(h<10)h="0"+h;//s/(3600*24)的余数,再/3600,再下去整varm=parseInt(s%3600/60);p.innerHTML="抢单已结束";if(m<10)m="0"+m;//s/3600的余数,再/60，再下取整s%=60;//s/60的余数if(s<10)s="0"+s;p.innerHTML=d+"天"+h+"时"+m+"分"+s+"秒";}else{clearInterval(timer);timer=null;p.innerHTML="抢单已结束";}}vartimer=setInterval(countDownTime,1000);window.onload=countDownTime;script>

理解document对象

DOM让JavaScript与元素互动起来

<html><head><title>文档示例title>head><body><h1>这是一个HTML文档h1><p>这是一个段落p>body>html>

通过可编程的DOM（文档对象模型），JavaScript 获得了足够的能力来创建动态的 HTML，它主要可以做到：

（1）改变页面中的所有 HTML 元素

（2）改变页面中的所有 HTML 属性

（3）改变页面中的所有 CSS 样式

（4）能够对页面中的所有事件做出反应

动态创建元素实例：

<html><head><metacharset="UTF-8"><title>DOM对象与JavaScript交互title><linkrel="stylesheet"href="my.css">head><body><divid="oldDiv">你好，这是旧divdiv><script>document.body.onload=addElement;functionaddElement(){//创建一个新的div元素vardiv=document.createElement(div);//给这个div添加内容varcontent=document.createTextNode(你好，这是新div元素);//把内容添加到div.appendChild(content);//最后把div和它的内容这个分支添加到DOM的body之后varoldDiv=document.getElementById(oldDiv);document.body.insertBefore(div,oldDiv);}script>body>html>

查找元素：

<html><head><metacharset="UTF-8"><title>DOM对象与JavaScript交互title><linkrel="stylesheet"href="my.css">head><body><divid="divContainer">你好，这是一个divdiv><script>//通过id号，查找divvardiv=document.getElementById(divContainer);alert(div.innerHTML);script>body>html>

修改元素

<html><head><metacharset="UTF-8"><title>DOM对象与JavaScript交互title><linkrel="stylesheet"href="my.css">head><body><pid="visited">近日印尼再一次受到暴风影响，迎来12级台风p><script>varele=document.getElementById("visited");//修改它的样式ele.style.color="red";script>body>html>

通过触发DOM事件实现交互

通过两个用法体会DOM元素事件的基本用法：

用法一：通过onclick事件，改变h1的文本内容

<html><head><metacharset="UTF-8"><title>DOM对象与JavaScript交互title><linkrel="stylesheet"href="my.css">head><body><h1id="heading">点击这个一级标题h1><script>varh1=document.getElementById("heading");h1.onclick=changeText;functionchangeText(){h1.innerHTML="我被改变了";}script>body>html>

Event对象

event对象的常见属性

clientX

clientX	返回当事件被触发时，鼠标指针的水平坐标。
clientY	返回当事件被触发时，鼠标指针的垂直坐标。

clientY

clientX	返回当事件被触发时，鼠标指针的水平坐标。
clientY	返回当事件被触发时，鼠标指针的垂直坐标。

属性	用途
target	存储触发事件的对象，一般是HTML元素
type	指出是哪一种事件类型，click”,”load等
clientX	用户单击屏幕上一点距离窗口左侧距离
clientY	用户单击屏幕上一点距离窗口上方距离
keyCode	用户按下了哪个键，一般是一个数字编码
timeStamp	查出事件是何时发生的
touches	在可触摸设备上，确定用户是几根手指来触摸屏幕的

button{
    height:30px;
    width: 150px;
    border-radius: 2px;
}<body><h1id="heading">这有好多按钮，我能知道你点了哪个，不信就试试吧！h1><divid="btns"><buttonid="btn1">我是第一个按钮button><buttonid="btn2">我是第二个按钮button><buttonid="btn3">我是第三个按钮button><buttonid="btn4">我是第四个按钮button>div><script>varbtns=document.getElementById(btns);btns.addEventListener("click",function(e){//如果目标元素是按钮，才触发if(e.target.nodeName=="BUTTON"){varcurrentBtnId=e.target.id;alert(currentBtnId);}});script>body>

Event对象的方法

这里介绍两个与event对象的常用方法：

（1）preventDefault()，用于阻止默认行为，比如表单提交时，会自动将数据提交给服务器的后台程序。调用它，则可以阻止这种默认行为。

（2）StopPropagation()，用于阻止事件的蔓延。默认情况下，嵌套的元素，一旦一个元素被触发，根据冒泡法则，就会向上寻找父亲节点，也会激发其父元素的事件处理函数。因此，调用它，可以阻止这一切蔓延的发生。

阻止表单的自动提交行为：

<html><head><metacharset="UTF-8"><title>阻止表单提交的默认行为title><linkrel="styleSheet"href="my.css"/>head><body><formid="form1"><h2>添加管理员h2><table><tr><td>姓名：td><td><inputname="username"/><span>*span>td>tr><tr><td>密码：td><td><inputtype="password"name="pwd"/><span>*span>td>tr><tr><td>td><tdcolspan="2"><inputtype="submit"value="提交"id="sub"/><inputtype="reset"value="重填"/>td>tr>table>form><script>varform=document.getElementById(form1);form.addEventListener("submit",function(e){varuName=form.username.value;varuPwd=form.pwd.value;//如果用户名和密码有一个为空，就阻止提交表单if(uName===||uPwd===){e.preventDefault();}});script>body>html>

参考文献

web全栈开发从入门到实战，董雪燕，中国铁道出版社，2021年5月

www.m.crphdm.com

www.w3school.com.cn

www.runoob.com

声明：本文部分素材转载自互联网，如有侵权立即删除。

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！邮箱：cxysz1@tom.com
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
丞旭猿论坛

THE END

技术文档