一、window对象3大角色
1. 代替 ES 标准中的 global 充当全局作用域对象
所有直接声明的全局变量和全局函数，都默认保存在 window 对象中。
2. 保存了所有"原生"的对象和方法
不需要去第三方下载就可直接使用对象和方法，比如：window.Array, window.document, window.alert...
3. 代表当前正在打开的这个浏览器窗口
（1）获得当前窗口的大小：
（2）打开和关闭窗口
二、打开新链接的几种情况
1. 在当前窗口打开，可后退
window.open("url", "_self") //相当于HTML中 <a href="url" target="_self">
2. 在当前窗口打开，禁止后退
location.replace("新url")
3. 在新窗口打开，可同时打开多个
window.open("url", "_blank"); //相当于HTML中 <a href="url" target="_blank">
4. 在新窗口打开，只能打开一个
window.open("url", "自定义窗口名"); //相当于HTML中 <a href="url" target="自定义窗口名">
注意相同名称的窗口只能打开一个，如果打开第二个同名窗口，则新同名窗口会覆盖旧同名窗口。
举例：演示打开链接的四种情况；
<body> <h3>1. 在当前窗口打开，可后退</h3> <a href="www.baidu.com" target="_self">go to baidu</a><br> <button onclick="open1()">go to baidu</button> <script> function open1() { window.open("www.baidu.com", "_self"); } </script> <h3>2. 在当前窗口打开，禁止后退</h3> <button onclick="open2()">go to baidu</button> <script> function open2() { location.replace("www.baidu.com"); } </script> <h3>3. 在新窗口打开，可打开多个！</h3> <a href="www.baidu.com" target="_blank">go to baidu</a><br> <button onclick="open3()">go to tmooc</button> <script> function open3() { window.open("www.baidu.com", "_blank"); } </script> <h3>4. 在新窗口打开，只能打开一个</h3> <a href="www.baidu.com" target="tmooc">go to baidu</a><br> <button onclick="open4()">go to baidu</button> <script> function open4() { window.open("www.baidu.com", "tmooc"); } </script> </body>
三、history对象
history 是内存中专门保存当前窗口打开后成功访问过得所有 url 的历史记录数组，history 数组不可做任何修改操作，功能有前进、后退和刷新。
前进一步
举例：使用程序实现前进、回退；
<body> <div> <a href="1history.html">1</a> <a href="2history.html">2</a> <a href="3history.html">3</a> </div><br /> <div> <a href="javascript: history.go(-1)">后退一次</a> <a href="javascript: history.go(1)">前进一次</a> </div> </body>
四、location对象
专门保存浏览器地址栏中正在打开的一个 url 的信息的对象。可以分段获得 url 中各个部分的信息：
五、navigator对象
专门保存浏览器配置信息的对象。常用属性如下：
举例：检查浏览器是否安装 PDF 和 Flash 插件；
<body> <h3 id="msg1"></h3> <h3 id="msg2"></h3> <script> console.log(navigator.userAgent); console.log(navigator.plugins); var msg1 = document.getElementById("msg1"); var msg2 = document.getElementById("msg2"); //判断浏览器是否安装了Chrome PDF Viewer if (navigator.plugins["Chrome PDF Viewer"] !== undefined) { msg1.innerHTML = "已安装PDF插件，可正常浏览PDF电子书"; } else { msg1.innerHTML = `未安装PDF插件，<a href="#">点此下载</a>安装`; } //判断浏览器是否安装了Shockwave Flash if (navigator.plugins["Shockwave Flash"] !== undefined) { msg2.innerHTML = "已安装Flash插件，可正常播放Flash视频"; } else { msg2.innerHTML = `未安装Flash插件，<a href="#">点此下载</a>安装`; } </script>
六、事件
事件是浏览器自动触发的或用户手动触发的页面中内容或状态的改变；当事件发生时，我们希望自动调用执行的函数为事件处理函数。
1. 事件绑定
（1）在HTML中手工绑定
<元素 on事件名="事件处理函数()"> <script> function 事件处理函数(){ ... } </script>
（2）在 js 中以赋值方式绑定
元素对象.on事件名=function(){ this }
（3）在 js 中以添加事件监听对象的方式绑定
//1. 查找触发事件的元素，添加事件监听对象 //2. 元素对象.addEventListener("事件名", 事件处理函数)
addEventListener 可以新建一个事件监听对象，其中保存了元素对象、事件名、事件处理函数；还自动将事件监听对象添加到事件监听对象队列中。
移除监听对象：
元素.removeEventListener("事件名", 原事件处理函数)
举例：为发射按钮添加事件监听，可同时发射多种子弹，也可移除子弹；
<body> <button id="btnShoot">shoot</button><br> <button id="btnAward">获得跟踪导弹</button><br> <button id="btnBreak">失去跟踪导弹</button><br> <script> var btnShoot = document.getElementById("btnShoot") var btnAward = document.getElementById("btnAward") var btnBreak = document.getElementById("btnBreak") //开局，点shoot按钮，只能发射一种子弹 btnShoot.onclick = function () { console.log(`发射一枚普通子弹`); } var shoot2 = function () { console.log(`发射一枚跟踪导弹`); } //当单击获得跟踪导弹按钮后，为btnShoot按钮再多添加一种跟踪导弹 btnAward.onclick = function () { btnShoot.addEventListener( "click", shoot2 ) } //当单击btnBreak按钮时，从btnShoot上移除跟踪导弹 btnBreak.onclick = function () { btnShoot.removeEventListener( "click", shoot2 ) } </script> </body>
2. 事件模型
点在内层元素上，也会触发外层元素的单击事件；全球的浏览器开发者一致认为，点在内层元素上，也相当于点在了外层元素上，所以有了事件模型。
事件模型的三个阶段：
（1）捕获：从树根节点开始，到当前触发事件的目标元素结束，由外向内依次遍历并记录各级父元素上是否绑定了事件处理函数，只记录，不执行。
（2）目标触发：总是优先触发实际点击的目标元素上的事件处理函数。
（3）冒泡：从目标元素开始，到树根节点结束，由内向外依次触发各级父元素上绑定的事件处理函数。
3. 事件对象
当事件发生时，浏览器自动创建的，保存事件相关信息的对象；事件对象总是作为事件处理函数的第一个实参值，自动传入。
（1）当事件发生时，浏览器会自动创建事件对象：
元素对象.on事件名=function(e){ ... } 元素对象.addEventListener("事件名",function(e){ ... })
（2）事件对象的功能：
a. 停止冒泡
e.stopPropagation()
举例：点内层元素，也触发父元素上的事件处理函数；
<body> <div id="d1"> <div id="d2"> <div id="d3"> </div> </div> </div> <script> var d2 = document.getElementById("d2"); var d3 = document.getElementById("d3"); var d1 = document.getElementById("d1"); //给每层div都绑定单击事件，可以喊疼 d1.onclick = function () { console.log("d1"); } d2.onclick = function (e) { e.stopPropagation(); //停止冒泡 console.log("d2"); } d3.onclick = function (e) { e.stopPropagation(); console.log("d3"); } </script> </body>
b. 利用冒泡/事件委托
浏览器触发事件采用的是遍历事件监听对象队列形式查找事件监听对象，如果添加的事件监听对象越多遍历时间就越长，事件响应的速度越慢；所以应该尽量减少事件绑定的次数。但功能不能少。
举例：使用事件委托实现计算器效果；
//计算器 <body> <div id="keys"> <button>1</button> <button>2</button> <button>3</button> <button>4</button><br> <button>5</button> <button>6</button> <button>7</button> <button>8</button><br> <button>C</button> <button>+</button> <button>-</button> <button>=</button> </div> <textarea id="sc" style="resize:none;width:200px; height:50px;" readonly></textarea> <script> //DOM4步 //1. 查找触发事件的元素 var div = document.getElementById("keys"); //2. 绑定事件处理函数 div.onclick = function (e) { if (e.target.nodeName === "BUTTON") { //先获得充当显示屏的id为sc的文本域元素 var sc = document.getElementById("sc"); // 判断当前点击的按钮的内容 switch (e.target.innerHTML) { // 如果点击“C”，清空显示屏的内容 case "C": sc.value = ""; break; // 如果点击“=”，获得显示屏中的表达式，计算结果 case "=": var str = sc.value; // 尝试计算显示屏中的内容 try { //将显示屏的内容交给eval做计算，将结果再替换回显示屏中 sc.value = eval(str) } catch (err) { sc.value = err; } break; // 如果点击了其他的按钮，就将按钮内容追加到显示屏上 default: sc.value += e.target.innerHTML; } } } </script>
c. 阻止默认行为，有两种方式：
//1. <a href="javascript:;">文本</a>
此方法只对a元素有效，意思是不让a跳转到其它页面，而是在当前页面的内容中执行一条js语句。; 意为是一条什么也不做的空语句；javascript:; 表示执行一条空语句。
//2. e.preventDefault()
此方法对任意元素有效。
举例：点a，返回页面顶部，并阻止a修改地址栏中url；
<body style="height:2000px"> <!--希望:点a可返回顶部，但是不要在地址栏结尾加#top--> <a id="a1" href="#top">返回顶部</a> <script> var a1 = document.getElementById("a1"); a1.onclick = function (e) { //阻止默认行为 e.preventDefault(); //让窗口滚动到顶部0位置 window.scrollTo(0, 0) } </script>
d. 获取鼠标位置
鼠标相对于屏幕左侧、上方的距离
举例：点击图片，获得鼠标三组坐标位置；
<body> <div id="pop"></div> <script> var pop = document.getElementById("pop"); //点div，输出三组鼠标位置 pop.onclick = function (e) { //鼠标相对于屏幕左侧、上方的距离 console.log(e.screenX, e.screenY); //鼠标相对于浏览器内部文档显示区左侧、上方的距离 console.log(e.clientX, e.clientY); //鼠标相对于当前点击的HTML元素左侧、上方的距离 console.log(e.offsetX, e.offsetY); } </script> </body>
JavaScript DOM BOM 终。
