开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> web04.JavaScript概述-事件(四) -> 正文阅读

[JavaScript知识库]web04.JavaScript概述-事件(四)

事件基础和调用

事件介绍

在之前的学习中，我们接触过鼠标点击事件（即onclick）。那事件究竟是什么呢？

? 举个例子，当我们点击一个按钮时，会弹出一个对话框。其中“点击”就是一个事件，“弹出对话框”就是我们在点击这个事件里面做的一些事情。
在JavaScript中，一个事件应该有3部分：
1. 事件主角：是按钮呢？还是div元素呢？还是其他？
2. 事件类型：是点击呢？还是移动呢？还是其他？
3. 事件过程：这个事件都发生了些什么？
在JavaScript中，事件一般是用户对页面的一些“小动作”引起的，例如按下鼠标、移动鼠标等，这些都会触发相应的一个事件。
- JavaScript常见的事件共有以下5种：
  1. 鼠标事件
  2. 键盘事件
  3. 表单事件
  4. 编辑事件
  5. 页面事件

事件调用方式

在JavaScript中，调用事件的方式有两种：

在script标签中调用
在元素中调用

在script标签中调用

在script标签中调用事件，指的是在< script >< /script >标签内部调用事件。
语法：
```
obj.事件名 = function()
{
……
};
```

说明：obj是一个DOM对象.

? 由于上面是一个赋值语句，而语句一般都是要以英文分号结束的，所以最后需要添加一个英文分号（;）。虽然没加上也不会报错，不过为了规范，还是加上比较好。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () {
            //获取元素
            var oBtn = document.getElementById("btn");
            //为元素添加点击事件
            oBtn.onclick = function () {
                alert("事件基础学习");
            };
        }
    </script>
</head>

<body>
    <input id="btn" type="button" value="弹出" />
</body>

</html>

在元素中调用事件

在元素中调用事件，指的是直接在HTML属性中来调用事件，这个属性又叫做“事件属性”。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        function alertMes() {
            alert("老师带你学习事件");
        }
    </script>
</head>

<body>
    <input type="button" onclick="alertMes()" value="弹出" />
</body>

</html>

等价于

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
	<input type="button" onclick="alert('老师带你学前端')" value="弹出" />
</body>
</html>

在script标签中调用事件，我们需要使用getElementById()、getElementsByTagName()等方法来获取想要的元素，然后才能对其进行事件操作。
在元素属性中调用事件，我们是不需要使用getElementById()、getElementsByTagName()等方法来获取想要的元素的，因为系统已经知道事件的主角是哪个元素了。
在实际开发中，我们更倾向于在script标签中调用事件，因为这种方式可以使得结构（HTML）与行为（JavaScript）分离，代码更具有可读性和维护性。

鼠标事件

鼠标事件介绍

事件操作是JavaScript核心之一，也是学习的重中之重，因为JavaScript本身就是一门基于事件的编程语言。

事件	说明
onclick	鼠标单击事件
onmouseover	鼠标移入事件
onmouseout	鼠标移出事件
onmousedown	鼠标按下事件
onmouseup	鼠标松开事件
onmousemove	鼠标移动事件

鼠标单击

? 单击事件onclick，单击事件不只是按钮才有，任何元素我们都可以为它添加单击事件！

鼠标移入和鼠标移出

? 当用户将鼠标移入到某个元素上面时，就会触发onmouseover事件。

? 如果将鼠标移出某个元素时，就会触发onmouseout事件。

? onmouseover和onmouseout这两个平常都是形影不离的。 onmouseover和onmouseout分别用于控制鼠标“移入”和“移出”这两种状态。

例如在下拉菜单导航中，鼠标移入会显示二级导航，鼠标移出则会收起二级导航。

鼠标按下和鼠标松开

? 当用户按下鼠标时，会触发onmousedown事件。

? 当用户松开鼠标时，则会触发onmouseup事件。

? onmousedown表示鼠标按下的一瞬间所触发的事件，而onmouseup表示鼠标松开的一瞬间所触发的事件。当然我们都知道，只有“先按下”才能“再松开”。

键盘事件

键盘事件介绍

在JavaScript中，常用的键盘事件共有2种。

键盘按下：onkeydown
键盘松开：onkeyup

? onkeydown表示键盘按下一瞬间所触发的事件，而onkeyup表示键盘松开一瞬间所触发的事件。对于键盘来说，都是先有“按下”，才有“松开”，也就是onkeydown发生在onkeyup之前。

统计输入字符的长度

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () {
            var oTxt = document.getElementById("txt");
            var oNum = document.getElementById("num");
            oTxt.onkeyup = function () {
                var str = oTxt.value;
                oNum.innerHTML = str.length;
            };
        };
    </script>
</head>

<body>
    <input id="txt" type="text" />
    <div>字符串长度为：<span id="num">0</span></div>
</body>

</html>
//输入：请问   输出：字符串长度为：3
//输入：12345   输出：字符串长度为：5
//输入：qwert   输出：字符串长度为：5
//输入：asas是的   输出：字符串长度为：6

飞机移动小游戏

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        #player {
            position: absolute;
            top: 600px;
            left: 600px;
        }
    </style>
    <script>
        window.onload = function () {
            var player = document.getElementById("player");
            window.document.onkeydown = function (ent) {
                var event = ent || window.event;
                //alert(event.keyCode);
                switch (event.keyCode) {
                    case 87: //w
                    case 38: //上
                        player.style.top = player.offsetTop - 10 + "px";
                        break;
                    case 83: //s
                    case 40: //下
                        player.style.top = player.offsetTop + 10 + "px";
                        break;
                }
            }
        };
    </script>
</head>

<body>
    <img src="../GroupBuying/img/waimai.png" alt="飞机" id="player">
</body>

</html>

表单事件

表单事件介绍

在JavaScript中，常用的表单事件有3种。

onfocus和onblur
onselect
onchange

onfocus和onblur

onfocus表示获取焦点时触发的事件，而onblur表示失去焦点时触发的事件，两者是相反操作。

例如:用户准备在文本框中输入内容时，此时它会获得光标，就会触发onfocus事件。当文本框失去光标时，就会触发onblur事件。

并不是所有的HTML元素都有焦点事件，具有“获取焦点”和“失去焦点”特点的元素只有2种。

表单元素（单选框、复选框、单行文本框、多行文本框、下拉列表）

超链接

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #search {
            color: #bbbbbb;
        }
    </style>
    <script>
        window.onload = function () {
            //获取元素对象
            var oSearch = document.getElementById("search");
            //获取焦点
            oSearch.onfocus = function () {
                if (this.value == "百度一下，你就知道") {
                    this.value = "";
                }
            };
            //失去焦点
            oSearch.onblur = function () {
                if (this.value == "") {
                    this.value = "百度一下，你就知道";
                }
            };
        }
    </script>
</head>

<body>
    <input id="search" type="text" value="百度一下，你就知道" />
</body>

</html>

onselect

在JavaScript中，当我们选中“单行文本框”或“多行文本框”中的内容时，就会触发onselect事件。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () {
            var oSearch = document.getElementById("search");
            oSearch.onclick = function () {
                this.select();
            };
        }
    </script>
</head>

<body>
    <input id="search" type="text" value="百度一下，你就知道" />
</body>

</html>

onchange

在JavaScript中，onchange事件常用于“具有多个选项的表单元素”。

单选框选择某一项时触发。
复选框选择某一项时触发。
下拉列表选择某一项时触发。

单选框：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () {
            var oFruit = document.getElementsByName("fruit");
            var oP = document.getElementById("content");
            for (var i = 0; i < oFruit.length; i++) {
                oFruit[i].onchange = function () {
                    if (this.checked) {
                        oP.innerHTML = "你选择的是：" + this.value;
                    }
                };
            }
        }
    </script>
</head>

<body>
    <div>
        <label><input type="radio" name="fruit" value="苹果" />苹果</label>
        <label><input type="radio" name="fruit" value="香蕉" />香蕉</label>
        <label><input type="radio" name="fruit" value="西瓜" />西瓜</label>
    </div>
    <p id="content"></p>
</body>

</html>

复选框的全选与反选：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () {
            var oSelectAll = document.getElementById("selectAll");
            var oFruit = document.getElementsByName("fruit");
            oSelectAll.onchange = function () {
                //如果选中，即this.checked返回true
                if (this.checked) {
                    for (var i = 0; i < oFruit.length; i++) {
                        oFruit[i].checked = true;
                    }
                } else {
                    for (var i = 0; i < oFruit.length; i++) {
                        oFruit[i].checked = false;
                    }
                }
            };
        }
    </script>
</head>

<body>
    <div>
        <p><label><input id="selectAll" type="checkbox" />全选/反选：</label></p>
        <label><input type="checkbox" name="fruit" value="苹果" />苹果</label>
        <label><input type="checkbox" name="fruit" value="香蕉" />香蕉</label>
        <label><input type="checkbox" name="fruit" value="西瓜" />西瓜</label>
    </div>
</body>

</html>

下拉列表：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () {
            var oList = document.getElementById("list");
            oList.onchange = function () {
                var link = this.options[this.selectedIndex].value;
                window.open(link);
            };
        }
    </script>
</head>

<body>
    <select id="list">
        <option value="http://wwww.baidu.com">百度</option>
        <option value="http://www.sina.com.cn">新浪</option>
        <option value="http://www.qq.com">腾讯</option>
        <option value="http://www.sohu.com">搜狐</option>
    </select>
</body>

</html>

编辑事件

编辑事件介绍

在JavaScript中，常用的编辑事件有3种：

oncopy
onselectstart
oncontextmenu

oncopy

在JavaScript中，我们可以使用oncopy事件来防止页面内容被复制。

语法：

document.body.oncopy = function ()
{
return false;
}

实例：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () {
            document.body.oncopy = function () {
                return false;
            }
        }
    </script>
</head>

<body>
    <div>我是不能被复制的</div>
</body>

</html>

onselectstart

在JavaScript中，我们可以使用onselectstart事件来防止页面内容被选取。

语法:

document.body.onselectstart=function()
{
	return false;
}

实例

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () {
            document.body.onselectstart = function () {
                return false;
            }
        }
    </script>
</head>

<body>
    <div>防止页面内容被选取。</div>
</body>

</html>

oncontextmenu

? 在JavaScript中，我们可以使用oncontextmenu事件来禁止鼠标右键。

语法：

document.oncontextmenu = function ()
{
return false;
}

实例：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () {
            document.oncontextmenu = function () {
                return false;
            }
        }
    </script>
</head>

<body>
    <div>禁用鼠标右键</div>
</body>

</html>

页面事件

页面事件onload

在JavaScript中，onload表示文档加载完成后再执行的一个事件。

语法：

window.onload = function(){
……
}

实例：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        var oBtn = document.getElementById("btn");
        oBtn.onclick = function () {
            alert("JavaScript");
        };
    </script>
</head>

<body>
    <input id="btn" type="button" value="提交" />
</body>

</html>

正确的解决方法就是使用window.onload，实现代码如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () {
            var oBtn = document.getElementById("btn");
            oBtn.onclick = function () {
                alert("JavaScript");
            };
        }
    </script>
</head>

<body>
    <input id="btn" type="button" value="提交" />
</body>

</html>

onbeforeunload

在JavaScript中，onbeforeunload表示离开页面之前触发的一个事件。

语法：

window.onbeforeunload = function(){
……
}

实例：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () {
            alert("欢迎来");
        }
        window.onbeforeunload = function (e) {
            e.returnValue = "记得下来再来喔！";
        }
    </script>
</head>

<body>
</body>

</html>

页面事件进阶

页面事件介绍

在JavaScript中，想要给元素添加一个事件，其实我们有以下2种方式。

事件处理器
事件监听器

事件处理器

在前面的学习中，如果想要给元素添加一个事件，我们都是通过操作HTML属性的方式来实现，这种方式其实也叫“事件处理器”，

例如： oBtn.onclick = function(){……};

事件处理器的用法非常简单，代码写出来也很易读。不过这种添加事件的方式是有一定缺陷的。先来看一个例子：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () {
            var oBtn = document.getElementById("btn");
            oBtn.onclick = function () {
                alert("第1次");
            };
            oBtn.onclick = function () {
                alert("第2次");
            };
            oBtn.onclick = function () {
                alert("第3次");
            };
        }
    </script>
</head>

<body>
    <input id="btn" type="button" value="按钮" />
</body>

</html>

，我们一开始的目的是想给按钮添加3次onclick事件，但JavaScript最终只会执行最后一次 onclick。从上面也可以看出来了，事件处理器是没办法为一个元素添加多个相同事件的。

事件监听器

绑定事件

所谓的“事件监听器”，指的是使用addEventListener()方法来为一个元素添加事件，我们又称之为**“绑定事件”**。
语法：obj.addEventListener(type , fn , false)
说明：
- obj是一个DOM对象，指的是使用getElementById()、getElementsByTagName()等方法获取到的元素节点。
- type是一个字符串，指的是事件类型。例如单击事件用click，鼠标移入用mouseover等。一定要注意，这个事件类型是不需要加上“on”前缀的。
- fn是一个函数名，或者一个匿名函数。
- false表示事件冒泡阶段调用。

此对于addEventListener()的兼容性我们不需要考虑IE浏览器。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () {
            var oBtn = document.getElementById("btn");
            oBtn.addEventListener("click", function () {
                alert("第1次");
            }, false);
            oBtn.addEventListener("click", function () {
                alert("第2次");
            }, false);
            oBtn.addEventListener("click", function () {
                alert("第3次");
            }, false);
        }
    </script>
</head>

<body>
    <input id="btn" type="button" value="按钮" />
</body>

</html>
//监听到了三次点击，输出了三次

多次调用window.onload

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        //第1次调用window.onload
        window.onload = function () {
            var oBtn1 = document.getElementById("btn1");
            oBtn1.onclick = function () {
                alert("第1次");
            };
        }
        //第2次调用window.onload
        window.onload = function () {
            var oBtn2 = document.getElementById("btn2");
            oBtn2.onclick = function () {
                alert("第2次");
            };
        }
        //第3次调用window.onload
        window.onload = function () {
            var oBtn3 = document.getElementById("btn3");
            oBtn3.onclick = function () {
                alert("第3次");
            };
        }
    </script>
</head>

<body>
    <input id="btn1" type="button" value="按钮1" /><br />
    <input id="btn2" type="button" value="按钮2" /><br />
    <input id="btn3" type="button" value="按钮3" />
</body>

</html>

事件解绑

在JavaScript中，我们可以使用removeEventListener()方法为元素解绑（或解除）某个事件。解绑事件与绑定事件是相反的操作。

语法：obj.removeEventListener(type , fn , false);
说明：
- obj是一个DOM对象，指的是使用getElementById()、getElementsByTagName() 等方法获取到的元素节点。
- type是一个字符串，指的是事件类型。例如，单击事件用click，鼠标移入用mouseover等。一定要注意，这里我们是不需要加上on前缀的。
- 对于removeEventListener()方法来说，fn必须是一个函数名，而不能是一个函数。

举例：解除“事件监听器”添加的事件

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () {
            var oP = document.getElementById("content");
            var oBtn = document.getElementById("btn");
            //为p添加事件
            oP.addEventListener("click", changeColor, false);
            //点击按钮后，为p解除事件
            oBtn.addEventListener("click", function () {
                oP.removeEventListener("click", changeColor, false);
            }, false);

            function changeColor() {
                this.style.color = "hotpink";
            }
        }
    </script>
</head>

<body>
    <p id="content">老师带你</p>
    <input id="btn" type="button" value="解除" />
</body>

</html>

举例：解除“事件处理器”添加的事件

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () {
            var oP = document.getElementById("content");
            var oBtn = document.getElementById("btn");
            //为P元素添加事件
            oP.onclick = changeColor;
            //点击按钮后，为p元素解除事件
            oBtn.addEventListener("click", function () {
                oP.onclick = null;
            }, false);

            function changeColor() {
                this.style.color = "hotpink";
            }
        }
    </script>
</head>

<body>
    <p id="content">老师带你</p>
    <input id="btn" type="button" value="解除" />
</body>

</html>

Event对象

当一个事件发生的时候，这个事件有关的详细信息都会临时保存到一个指定的地方，这个地方就是event 对象。**每一个事件，都有一个对应的event对象。**给大家打个比喻，我们都知道飞机都有黑匣子，对吧？每次飞机出事（一个事件）后，我们都可以从黑匣子（event对象）中获取到详细的信息。在JavaScript中，我们可以通过event对象来获取一个事件的详细信息。

属性	说明
type	事件类型
keyCode	键码值
shiftKey	是否按下shift键
ctrlKey	是否按下Ctrl键
altKey	是否按下Alt键

type

在JavaScript中，我们可以使用event对象的type属性来获取事件的类型。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () {
            var oBtn = document.getElementById("btn");
            oBtn.onclick = function (e) {
                alert(e.type);
            };
        }
    </script>
</head>

<body>
    <input id="btn" type="button" value="按钮" />
</body>

</html>

实际上，每次调用一个事件的时候，JavaScript都会默认给这个事件函数加上一个隐藏的参数，这个参数就是event对象。一般来说，event对象是作为事件函数的第1个参数传入的。

其实e仅仅是一个变量名，它存储的是一个event对象。也就是说，e可以换成其他名字，如ev、event、 a等都可以，大家可以测试一下。

event对象在IE8及以下版本还有一定的兼容性，可能还需要采取“var e=e||window.event;”来处理。不过随着IE退出历史舞台，这些兼容性问题我们慢慢可以不用管了，这里简单了解一下就行。

keyCode

在JavaScript中，如果我们想要获取按下了键盘中的哪个键，可以使用event对象的keyCode属性来获取。

语法：event.keyCode
说明：event.keyCode返回的是一个数值，常用的按键及对应的键码如表所示。

按键	键码
W（上）	87
S（下）	83
A（左）	65
D（右）	68
↑	38
↓	40
←	37
→	39

如果是shift、ctrl和alt键，我们不需要通过keyCode属性来获取，而是可以通过shiftKey、ctrlKey和 altKey属性获取。

禁止shfit、alt、ctrl键：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () {
            document.onkeydown = function (e) {
                if (e.shiftKey || e.altKey || e.ctrlKey) {
                    alert("禁止使用shift、alt、ctrl键！")
                }
            }
        }
    </script>
</head>

<body>
    <p> 禁止使用shift、alt、ctrl键！</p>
</body>

</html>

获取“上下左右”方向键：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () {
            window.document.body.onkeydown = function (eve) {
                switch (eve.keyCode) {
                    case 38:
                        alert("上");
                        break;
                    case 39:
                        alert("右");
                        break;
                    case 40:
                        alert("下");
                        break;
                    case 37:
                        alert("左");
                        break;
                }
            }
        }
    </script>
</head>

<body>
</body>
</html>

this

this对象

? 在事件操作中，可以这样理解：哪个DOM对象（元素节点）调用了this所在的函数，那么this指向的就是哪个DOM对象。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () {
            var oDiv = document.getElementsByTagName("div")[0];
            oDiv.onclick = function () {
                this.style.color = "hotpink";
            }
        }
    </script>
</head>

<body>
    <div>老师讲授前端~</div>
</body>
</html>

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () {
            var oDiv = document.getElementsByTagName("div")[0];
            oDiv.onclick = changeColor;

            function changeColor() {
                this.style.color = "hotpink";
            }
        }
    </script>
</head>

<body>
    <div>this指向的问题</div>
</body>

</html>

this所在的函数是changeColor，然后changeColor函数被oDiv调用了，因此this指向的就是oDiv。事实上，上面两个例子是等价的。

哪个DOM对象（元素节点）调用了this所在的函数，那么this指向的就是哪个DOM对象。

window对象

window对象介绍

在JavaScript中，一个浏览器窗口就是一个window对象。我们可以用这个对象的属性和方法来操作这个窗口。

window对象存放了这个页面的所有信息，为了更好分类处理这些信息，window对象下面又分为很多对象，如下图所示。

子对象	说明
document	文档对象，用于操作页面元素
location	地址对象，用于操作URL地址
navigator	浏览器对象，用于获取浏览器版本信息
history	历史对象，用于操作浏览历史
screen	屏幕对象，用于操作屏幕宽度高度

document对象也是window对象下的一个子对象。很多人以为一个窗口就是一个document对象，其实这个理解是错的。因为一个窗口不仅仅包括HTML文档，还包括浏览器信息、浏览历史、浏览地址等等。

window对象及下面这些location、navigator等子对象，由于都是操作浏览器窗口的，所以我们又称之为“BOM”，也就是Browser Object Module（浏览器对象模型）。

此外，你也可以把window下的子对象看成是它的属性，只不过这个属性也是一个对象，所以我们才称之为“子对象”。对象一般都有属性和方法，上表介绍的是window对象的属性。实际上，window对象也有非常多的方法，常用的如下表所示。

方法	说明
alert()	提示对话框
confirm()	判断对话框
prompt()	输入对话框
open()	打开窗口
close()	关闭窗口
setTimeout()	开启“一次性”定时器
clearTimeout()	关闭“一次性”定时器
setInterval()	开启“重复性”定时器
clearInterval()	关闭“重复性”定时器

**对于window对象来说，无论是它的属性，还是方法，都可以省略window前缀。**例如window.alert()可以简写为alert()，window.open()可以简写为open()。

window对象窗口操作

在JavaScript中，窗口常见的操作有两种：一种是“窗口”；另外一种是“关闭窗口”。打开窗口和关闭窗口，在实际开发中经常用到

打开窗口

在JavaScript中，我们可以使用window对象的open()方法来打开一个新窗口。
语法：window.open(url, target)
说明：
- window.open()可以直接简写为open()，不过我们一般都习惯加上window前缀。window.open()参数有很多，但是只有url和target这两个用得上。
- url指的是新窗口的地址，如果url为空，则表示打开一个空白窗口。空白窗口很有用，我们可以使用document.write()往空白窗口输出文本，甚至输出一个HTML页面。
- target表示打开方式，它的取值跟a标签中target属性的取值是一样的，常用取值有两个： _ blank 和_self。当target为 _ blank（默认值），表示在新窗口打开；当target为 _ self时，表示在当前窗口打开。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oBtn = document.getElementById("btn");
oBtn.onclick = function ()
{
window.open("http://www.baidu.com");
};
}
</script>
</head>
<body>
<input id="btn" type="button" value="打开"/>
</body>
</html>

打开一个空白窗口：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () {
            var oBtn = document.getElementById("btn");
            oBtn.onclick = function () {
                var opener = window.open();
                opener.document.write("这是一个新窗口");
                opener.document.body.style.backgroundColor = "lightskyblue";
            };
        }
    </script>
</head>

<body>
    <input id="btn" type="button" value="打开" />
</body>

</html>

? 这段代码实现的效果是：打开一个新的空白窗口，然后往里面输出内容。可能很多人会对var opener = window.open();这句代码感到困惑：“为什么window.open()可以赋值给一个变量呢？”

? 实际上，window.open()就像函数调用一样，会返回（也就是return）一个值，这个值就是新窗口对应的window对象。也就是说，此时opener就是这个新窗口的window对象。既然我们可以获取到新窗口的window对象，那么想要在新窗口页面干点什么，如输出点内容、控制元素样式等，就很简单了。

关闭窗口

在JavaScript中，我们可以使用window.close()来关闭一个新窗口。
语法：window.close()
说明：window.close()方法是没有参数的。

关闭新窗口:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () {
            var btnOpen = document.getElementById("btn_open");
            var btnClose = document.getElementById("btn_close");
            var opener = null;
            btnOpen.onclick = function () {
                opener = window.open("http://www.baidu.com");
            };
            btnClose.onclick = function () {
                opener.close();
            }
        }
    </script>
</head>

<body>
    <input id="btn_open" type="button" value="打开新窗口" />
    <input id="btn_close" type="button" value="关闭新窗口" />
</body>

</html>

分析：

当我们点击【打开新窗口】按钮后，再点击【关闭新窗口】按钮，就会把新窗口关闭掉。 window.close()关闭的是当前窗口，opener.close()关闭的是新窗口。从本质上来说，window和opener 都是window对象，只不过window指向的是当前窗口，opener指向的是新窗口。

window对话框

? 在JavaScript中，对话框有3种： alert()、confirm()和prompt()。它们都是window对象的方法。前面我们说过，对于window对象的属性和方法，是可以省略window前缀的，例如window.alert()可以简写为alert()。

alert()

alert()对话框一般仅仅用于提示文字。这个方法在之前都用到烂了，这里我们就不用多说。对于alert()，只需记住一点就行：在alert()中实现文本换行，用的是\n。

confirm()

confirm()对话框不仅提示文字，还提供确认。
语法：confirm(“提示文字”)

说明：如果用户点击【确定】按钮，则confirm()返回true。如果用户点击【取消】按钮，则confirm()返回false

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () {
            var oBtn = document.getElementById("btn");
            oBtn.onclick = function () {
                if (confirm("确定要跳转到首页吗？")) {
                    window.location.href = "http://www.baidu.com";
                } else {
                    document.write("你取消了跳转");
                }
            };
        }
    </script>
</head>

<body>
    <input id="btn" type="button" value="回到首页" />
</body>

</html>

分析

在弹出的confirm()对话框中，当我们点击【确定】按钮时，confirm()会返回true，然后当前窗口就会跳转到百度首页。当我们点击【取消】按钮时，confirm()会返回false，然后就会输出内容。

prompt()

prompt()对话框不仅提示文字，还返回一个字符串。
语法：prompt(“提示文字”)

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () {
            var oBtn = document.getElementById("btn");
            oBtn.onclick = function () {
                var name = prompt("请输入你的名字");
                document.write("欢迎来到<strong>" + name + "</strong>");
            };
        }
    </script>
</head>

<body>
    <input id="btn" type="button" value="按钮" />
</body>

</html>

定时器

定时器介绍

? 在浏览器网页的过程中，我们经常可以看到这样的动画：轮播效果中，图片每隔几秒就切换一次；在线时钟中，秒针每隔一秒转一次。

语法：setTimeout(code, time);
说明：
- 参数code可以是一段代码，可以是一个函数，也可以是一个函数名。
- 参数time是时间，单位为毫秒，表示要过多长时间才执行code中的代码。

实例:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () {
            setTimeout('alert("欢迎来到老师的学习课程");', 2000);
        }
    </script>
</head>

<body>
    <p>2秒后提示欢迎语。</p>
</body>

</html>

clearTimeout()

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
            border: 1px solid silver;
        }
    </style>
    <script>
        window.onload = function () {
            //获取元素
            var oBtn = document.getElementsByTagName("input");
            //timer存放定时器
            var timer = null;
            oBtn[0].onclick = function () {
                timer = setTimeout(function () {
                    alert("欢迎来到老师的前端课程");
                }, 2000);
            };
            oBtn[1].onclick = function () {
                clearTimeout(timer);
            };
        }
    </script>
</head>

<body>
    <p>点击“开始”按钮，2秒后提示欢迎语。</p>
    <input type="button" value="开始" />
    <input type="button" value="暂停" />
</body>

</html>

setInterval()

在JavaScript中，我们可以使用setInterval()方法来“重复性”地调用函数，并且可以使用 clearInterval()来取消执行setInterval()。

语法：setInterval(code, time);
说明：
- 参数code可以是一段代码，可以是一个函数，也可以是一个函数名。
- 参数time是**时间，**单位为毫秒，表示要过多长时间才执行code中的代码。

? setInterval()跟setTimeout()语法是一样的，唯一不同的是：setTimeout()只执行一次；而 setInterval()可以重复执行无数次。对于setInterval()来说，下面3种方式都是正确的，这个跟 setTimeout()一样：

//方式1
setInterval(function(){…}, 2000)
//方式2
setInterval(alertMes, 2000)
//方式3
setInterval("alertMes()", 2000)

clearInterval()

? 在JavaScript中，我们可以使用setInterval()方法来“重复性”地调用函数，并且可以使用 clearInterval()来取消执行setInterval()。

setInterval("console.log(1)",1000);
function ae(){
alert(1);
}
setInterval(ae,1000);
var timere = setInterval(function(){
alert(1);
},2000);
console.log(timere);
clearInterval(timere); //会结束掉循环

倒计时效果:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        //定义全局变量，用于记录秒数
        var n = 5;
        window.onload = function () {
            //设置定时器，重复执行函数countDown
            setInterval(countDown, 1000);
        }
        //定义函数
        function countDown() {
            //判断n是否大于0，因为倒计时不可能有负数
            if (n > 0) {
                n--;
                document.getElementById("num").innerHTML = n;
            }
        }
    </script>
</head>

<body>
    <p>倒计时：<span id="num">5</span></p>
</body>

</html>

window对象-location对象

window对象-location对象介绍

? 在JavaScript中，我们可以使用window对象下的location子对象来操作当前窗口的URL。所谓URL，指的就是页面地址。对于location对象，我们只需要掌握以下3个属性，如表所示。

属性	说明
href	当前页面地址
search	当前页面地址“？”后面的内容
hash	当前页面地址“#”后面的内容

window.location.href

在JavaScript中，我们可以使用location对象的href属性来获取或设置当前页面的地址。

语法：window.location.href
说明：window.location.href可以直接简写为location.href，不过我们一般都习惯加上window前缀。

实例：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        var url = window.location.href;
        document.write("当前页面地址是：" + url);
    </script>
</head>

<body>
</body>

</html>

设置当前页面地址:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        setTimeout(function () {
            window.location.href = "http://www.baidu.com";
        }, 2000);
    </script>
</head>

<body>
    <p>2秒后跳转</p>
</body>
    </html>

window.location.search

在JavaScript中，我们可以使用location对象的search属性来获取和设置当前页面地址**“?”后面的内容**

语法：window.location.search

实例：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        document.write(window.location.search);
    </script>
</head>

<body>
</body>

</html>

此时页面是空白的，我们在浏览器地址后面多加上?id=1（要自己手动输入），再刷新页面，就会出现结果了，浏览器预览效果如图所示。地址“?”后面这些内容，也叫querystring（查询字符串），一般用于数据库查询，而且是大量用到。

window.location.hash

JavaScript中，我们可以使用location对象的hash属性来获取和设置当前页面地址井号（#）后面的内容。井号（#）一般用于锚点链接，这个相信大家见过不少了。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        document.write(window.location.hash);
    </script>
</head>

<body>
</body>

</html

此时页面是空白的，我们在浏览器地址后面多加上#imgId（要自己手动输入），再刷新页面，就会出现结果了，在实际开发中，window.location.hash用得还是比较少，我们了解一下就行。

window对象-navigator对象

在JavaScript中，我们可以使用window对象下的子对象navigator来获取浏览器的类型。

语法：window.navigator.userAgent

实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
alert(window.navigator.userAgent);
</script>
</head>
<body>
</body>
</html>

不同浏览器，会弹出相应的版本号信息。不过这3种浏览器都含有独一无二的字符：IE含有“MSIE”； Chrome含有“Chrome”；而Firefox含有“Firefox”。根据这个特点，我们可以判断当前浏览器是什么类型的浏览器。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        if (window.navigator.userAgent.indexOf("MSIE") != -1) {
            alert("这是IE");
        } else if (window.navigator.userAgent.indexOf("Chrome") != -1) {
            alert("这是Chrome");
        } else if (window.navigator.userAgent.indexOf("Firefox") != -1) {
            alert("这是Firefox");
        }
    </script>
</head>

<body>
</body>

</html>

这里注意一下，对于IE浏览器来说，上面代码只能识别IE10及以下版本，如果想要识别所有的IE浏览器，我们应该使用下面代码来进行判断：

if (!!window.ActiveXObject || "ActiveXObject" in window){
     alert("这是IE"); 
}

判断浏览器类型也是经常用到的，特别是在处理不同浏览器兼容性上，我们就需要根据浏览器的类型来加载对应的JavaScript处理代码。不过现在浏览器更新迭代非常快，随着IE逐渐退出历史舞台，很多时候我们已经不再需要考虑浏览器之间的兼容性了。

window对象-document对象

? 我们知道，document对象其实是window对象下的一个子对象，它操作的是HTML文档里所有的内容。事实上，浏览器每次打开一个窗口，就会为这个窗口生成一个window对象，并且会为这个窗口内部的页面（即HTML文档）自动生成一个document对象，然后我们就可以通过document对象来操作页面中所有的元素了。

? window对象是浏览器为每个窗口创建的一个对象。通过window对象，我们可以操作窗口如打开窗口、关闭窗口、浏览器版本等，这些又被统称为“BOM（浏览器对象模型）”。

? document对象是浏览器为每个窗口内的HTML页面创建的一个对象。通过document对象，我们可以操作页面的元素，这些操作又被统称为“DOM（文档对象模型）”。

? 由于window对象是包括document对象的，所以我们可以“简单”地把BOM和DOM的关系理解成： BOM包含DOM。只不过对于文档操作来说，我们一般不把它看成是BOM的一部分，而是看成独立的，也就是DOM。我们已经在大量使用document对象的属性和方法了，如document.write()、 document.getElementById()、document.body等。

JavaScript知识库最新文章

ES6的相关知识点

react 函数式组件 & react其他一些总结

Vue基础超详细

前端JS也可以连点成线（Vue中运用 AntVG6）

Vue事件处理的基本使用

Vue后台项目的记录（一）

前后端分离vue跨域，devServer配置proxy代理

TypeScript

初识vuex

vue项目安装包指令收集