五、事件基础
事件绑定方式：
1. 方式一：行内事件属性赋值
<button onclick="alert('行内事件属性赋值')">点击按钮</button>
2. 方式二：事件属性赋值
var btn = document.querySelector('button'); btn.onclick = function() { alert('事件属性赋值') }
3. 方式三：事件监听
//格式：addEventListener(type, listener, useCapture) //type: 事件类型 //listener: 监听器（处理程序） //useCapture: 默认为false，设置为true时，不会因冒泡触发监听器 const btn = document.querySelector('button'); btn.addEventListener('click', function() { alert('事件监听') })
（1）实现点击按钮，更改按钮内容效果，请补全横线处代码。
<button class="btn">点击我</button> <script> document.querySelector('.btn').________ ('click', function() { this.innerText = '我被点击了' }) </script>
答案：addEventListener
此处需要为按钮绑定点击事件，根据代码形式可知，此处应使用事件监听方法。
（2）实现点击按钮，更改按钮内容效果，请补全横线处代码。
<div class="box">点击这个盒子</div> <script> document.querySelector('.box').________ = function() { this.style.backgroundColor = '#000' this.style.color = '#fff' this.innerText = '盒子黑了' } </script>
答案：onclick
此处使用事件属性赋值的方式绑定点击事件。
（3）实现点击变身按钮，弹出变身台词，请补全横线处代码。
<button>变身</button> <script> var btn = document.querySelector('button') btn.addEventListener('click', ________) function rider() { alert("胜利的法则已经确定了！") } </script>
答案：rider
由题知，点击按钮需要弹出对话框，addEventListener方法第二个参数可以填写对应函数名进行监听，注意函数名后不需要括号。
（4）点击输出数字按钮，最终输出的数字是________。
<button>输出数字</button> <script> var btn = document.querySelector('button') btn.onclick = foo2 btn.onclick = foo1 function foo1() { console.log(111) } function foo2() { console.log(222) } </script>
答案：111
使用事件属性绑定两个事件处理程序，只会执行最后一个。
（5）代码如下，点击一次按钮，p元素中显示的数字是________。
<button >按钮</button> <p>0</p> <script> var btn = document.querySelector('button') var num = 0 btn.addEventListener('click', function() { num++ document.querySelector('p').innerHTML = num }) btn.addEventListener('click', function() { num++ document.querySelector('p').innerHTML = num }) </script>
答案：2
addEventListener为事件监听方法，可以调用多次事件处理程序，所以num执行了两次加法运算。
六、鼠标及键盘事件
1. 常用鼠标事件
PS：事件处理程序中的this指代当前操作元素。
2. 常用键盘事件
3. 常用键盘属性事件
（1）实现点击按钮，弹出“已点击”提示，补全代码。
var btn = document.querySelector('button'); btn.addEventListener('________', showPublish); function showPublish() { alert('已点击'); }
答案：click
addEventListener方法第一个参数为事件名称，此处应为对应的点击事件名称。
（2）点击按钮，弹框显示对应按钮中文字，补全代码。
<button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <script> var btns = document.querySelectorAll('button') for (var idx = 0; idx < btns.length; idx++) { btns[idx].addEventListener('click', function() { alert(________.innerHTML) }) } </script>
答案：this
横线处指的是当前节点，此处需要一个能指代当前节点的变量。
（3）鼠标移出span元素时，字体大小是________px。
<span>五谷丰登</span> <script> var span = document.querySelector('span') span.addEventListener('mouseenter', function() { this.style.fontSize = '16px' }) span.addEventListener('mouseleave', function() { this.style.fontSize = '14px' }) </script>
答案：14
mouseleave代表鼠标移出事件。
（4）补全代码 ，实现在文本框中输入内容时，唐僧先于白龙马输出。
<input type="text" /> <script> var input = document.querySelector('input') input.addEventListener('________', function() { console.log('白龙马') }) input.addEventListener('keypress', function() { console.log('唐僧') }) </script>
答案：keyup
常用键盘事件执行顺序为：keydown->keypress->keyup。
（5）在input输入框中点击回车后，弹出登录成功提示，补全代码。
<input type="text"> <script> var input = document.querySelector('input') input.addEventListener('keyup', function(event) { if (event.key=== '________') { alert('登录成功') } }) </script>
答案：Enter
event.key返回按键标识符，此处应为对应的回车键标识符。
七、窗口事件
常用鼠标事件：
（1）实现窗口大小发生变化时，重置div元素高度为当前窗口高度的一半，请补全横线处代码。
<style> .box { width: 200px; height: 500px; background-color: blue; } </style> <div class="box"></div> <script> window.addEventListener('________', function() { document.querySelector('.box').style.height = window.innerHeight/2 + 'px' }) </script>
答案：resize
此处需要监听窗口大小的变化，横线处应为对应的窗口大小改变事件名。
（2）实现窗口滚动时，类名为top的元素固定在顶部，请补全横线处代码。
<style> .box {height: 3000px;} .top {width: 200px;height: 200px;background-color: gray;} </style> <div class="box"> <span>我是顶部</span> <div class="top">顶部元素</div> </div> <script> window.addEventListener('________', function() { document.querySelector('.top').style.position = 'fixed' }) </script>
答案：scroll
此处需要监听窗口滚动变化，横线处应为对应的元素滚动事件名。
（3）将h1元素中文字改为“欢迎光临”，请补全横线处代码。
<script> window.addEventListener('________', function() { document.querySelector('h1').innerText = "欢迎光临" }) </script> <h1>等待中</h1>
答案：load
由于代码中的js写在了h1元素上方，所以需要等待页面加载完成才能获取到此元素，此处需使用页面加载完成时触发的事件。
（4）代码如下，最后输出的num数字是________。
<script> var num = 0 function add() { if(document.querySelector('.box')) { num++ } console.log(num) } add() window.addEventListener('load', function() { add() }) add() </script> <div class="box"></div>
答案：1
add方法中，只有获取到box节点时才会对num加1；
box节点在JS代码下方，只有在load事件中的add方法才能获取到box节点，所以最终num只会执行一次相加。
八、BOM window 对象
1. window对象：
2. location 对象：
3. history 对象：
4. navigator对象：
5. screen对象：
（1）补全代码，完成点击按钮返回顶部的功能。
<style> .box { height: 3000px; } .btn { position: fixed;bottom: 50px;right: 50px; } </style> <div class="box"><p>我是顶部</p></div> <button class="btn">返回顶部</button> <script> var btn = document.querySelector('.btn') btn.addEventListener('click', function() { scrollTo(0,________) }) </script>
答案：0
返回顶部需要使用scrollTo方法，scrollTo的两个参数为窗口横坐标和纵坐标位置，此处应为顶部对应的纵坐标大小。顶部为（0，0）
（2）判断当前网页是否为http协议，如果是，则在当前页面跳转到https协议的页面，补全代码。
<script> if (location.________ === 'http:') { window.open('https://newsite.com', 'self') } </script>
答案：protocol
此处需要判断网址协议，横线处应使用location对象中代表网址协议的属性。
（3）当前操作系统是否为windows，如果是windows则跳转对应下载地址，补全代码。
<button>下载VS code</button> <script> if (navigator.________ === 'Win32') { document.querySelector('button').addEventListener('click', function() { location.href= 'https://code.visualstudio.com/docs/?dv=win64user' }) } </script>
答案：platform
此处需要判断当前系统类型，横线处应使用navigator中代表当前运行操作系统的属性。
（4）div元素的字体大小为________px，补全代码。
<style> .box { font-size: 16px; } </style> <div class="box">宽度比较</div> <script> var box = document.querySelector('.box') if (screen.width < window.innerWidth) { box.style.fontSize = '12px' } </script>
答案：16
screen.width代表屏幕宽度，window.innerWidth代表浏览器窗口宽度，浏览器宽度不可能超过屏幕宽度。
九、BOM 定时器
（1）实现页面等待2.5秒后显示对话框，请补全代码。
<script> setTimeout(showAlert, _____) function showAlert() { alert('你的小可爱突然出现') } </script>
答案：2500
setTimeout设置的时间单位为毫秒，1秒 = 1000毫秒
（2）监听是否点击支付按钮，若点击支付则弹出支付成功提示，请补全代码。
<button>支付</button> <script> var btn = document.querySelector('button') var flag = false btn.onclick = function() { flag = true } ________(function() { if (flag) { alert('支付成功') } }, 1000) </script>
答案：setInterval
用户点击支付按钮的时机不确定，所以需要多次查询用户是否点击（点击后，flag为true），需要使用周期性定时器。
（3）代码如下，实现点击按钮停止定时器的功能，请补全代码。
<h1>0秒</h1> <button>停止</button> <script> var timer = setTimeout(function() { document.querySelector('h1').innerText = '5秒过去了' }, 5000); document.querySelector('button').addEventListener('click', function() { document.querySelector('h1').innerText = '提前停止' ________(timer) }) </script>
答案：clearTimeout
此处使用了setTimeout定时器，为了实现定时器的提前停止，需要使用其对应的清除定时器方法。
