WebsAPI（四）——事件监听
在同一个文件中，代码会预解析并且提升。
若加载多个文件时，后续的文件默认会等待上一个文件加载完并执行后，才会继续预解析并执行。
若一定要把先使用的程序文件放在后面的话，可以给它的script标签加上async属性。
（一）事件监听
1.事件监听注册事件
语法：事件源.addEventListener('事件类型',事件处理程序,是否捕获);
代码举栗：
<body>
<button>点击</button>
<div>
内容
</div>
<script>
var btn = document.querySelector('button');
var div = document.querySelector('div');
btn.addEventListener('click',function(){
div.style.width = '300px';
div.style.height = '300px';
div.style.background = 'red';
});
btn.addEventListener('click',function(){
div.style.color = 'gold';
div.style.fontSize = '50px';
})
</script>
</body>
事件监听注册事件属于叠加事件，后一个不会覆盖前面相同的事件。
传统注册事件属于覆盖事件，事件源.事件类型 = 事件处理程序。会让后面的事件覆盖前面相同的事件。
若考虑以后的事件扩展，选择事件监听；若不需要扩展，选择传统方式。
事件监听是标准的（官方认可的），但是有兼容问题。（移动端使用较多）
传统方式是非标准的，但是没有兼容问题。（PC端使用较多）
2.事件监听移除事件
传统移除事件，把原来的事件重新赋值为null
btn.onclick = null;
语法：事件源.removeEventListener('事件类型',事件处理程序的名称);
代码举栗：
<body>
<button>点击</button>
<div>
内容
</div>
<script>
var btn = document.querySelector('button');
var div = document.querySelector('div');
var fn1 = function() {
div.style.width = '300px';
div.style.height = '300px';
div.style.background = 'red';
};
var fn2 = function() {
div.style.color = 'gold';
div.style.fontSize = '50px';
}
btn.addEventListener('click',fn1); //fn1不要加小括号()
btn.addEventListener('click',fn2);
// 移除fn2
btn.removeEventListener('click',fn2);
</script>
</body>
（二）时间流
事件触发后的一个流程。有三个阶段：捕获阶段、目标阶段、冒泡阶段。（先捕获，到达目标，再冒泡）
事件监听注册 事件源.addEventListener('事件类型',事件处理程序,是否捕获);中的第三个元素：
1.事件捕获
true为捕获，从最外层document往内捕获事件，直到捕获到目标为止。
默认为false不捕获，支持事件冒泡，从点击的目标开始，向外层冒泡直到没有为止。
不管是true还是false，冒泡阶段或捕获阶段也都会进行，但是不会展示出来。传输过程一定会经历三个阶段。
2.事件冒泡
传统方式注册事件：默认启用事件冒泡
事件冒泡传输过程：从目标阶段（最先点击的元素）到最外层元素（即document）。
（三）事件对象
在事件触发后或在事件处理程序中，（函数体）所获取并操作的对象。
1.获取事件对象
语法：事件源.事件类型 = function(e){}
形参e（可以是任意字母）就是事件对象。执行函数（即事件触发后）的时候，浏览器会把事件对象交给形参e。
代码举栗：
<script>
document.onclick = function() {
//浏览器会默认给事件对象一些属性
console.log(e);
//从对象中拿东西。X坐标和Y坐标
console.log(e.clientX,e.clientY);
}
</script>
2.鼠标事件对象相关属性
1）鼠标事件类型：
- onclick
- onmouseenter
- onmouseleave
- onmousemove 鼠标移动事件
- onmousedown 鼠标按键按下事件
- onmouseup 鼠标按钮弹起事件
2）鼠标事件对象相关属性：（获取鼠标位置）
代码举栗：
<body>
<div></div>
<script>
var div = document.querySelector('div');
div.onclick = function(e) {
console.log('相对于浏览器当前可视页面的位置：', e.clientX, e.clientY);
console.log('相对于浏览器整个页面的位置：', e.pageX, e.pageY);
console.log('相对于当前元素的位置：', e.offsetX, e.offsetY);
};
</script>
</body>
3.拖拽案例
<body>
<div></div>
<script>
var login = document.querySelector('.login');
var tip = document.querySelector('.tip');
tip.onmousedown = function(e) {
var x = e.offsetX;
var y = e.offsetY;
document.onmousemove = function (e) {
login.style.left = e.clientX - x + 'px';
login.style.top = e.clientY - y + 'px';
}
};
tip.onmouseup = function() {
document.onmousemove = null; //解绑
}
</script>
</body>
4.键盘事件相关属性
1）键盘事件类型
- onkeydown 键盘按下事件
- onkeyup 键盘弹起事件
一般给document绑定键盘事件。
2）键盘事件对象：（区分键盘按下了哪个键）
- 事件对象.keyCode 获取键盘按键对应的键码值
- 事件对象.altKey 表示alt键是否按下，返回布尔值。
- 事件对象.shiftKey 表示shift键是否按下，返回布尔值。
- 事件对象.ctrlKey 表示ctrl键是否按下，返回布尔值。（true按下，false没有按下）
代码举栗：
<script>
document.onkeydown = function(e) {
// console.log(e.keyCode); //获得键码值
var num = e.keyCode;
if(e.ctrlKey && e.keyCode==67) { //ctrlKey默认为ture
alert('请登陆！');
}
};
</script>
