1. 事件（Event）
- 事件指的是用户和浏览器之间的交互行为。比如：点击按钮、关闭窗口、鼠标移动。。。
- 我们可以为事件来绑定回调函数来响应事件。
- 绑定事件的方式：
1. 可以在标签的事件属性中设置相应的JS代码
例子：
<button onclick="js代码。。。">按钮</button>
2. 可以通过为对象的指定事件属性设置回调函数的形式来处理事件
例子：
<button id="btn">按钮</button>
<script>
var btn = document.getElementById("btn");
btn.onclick = function(){
};
</script>
2. 事件对象
当响应函数被调用时，浏览器每次都会将一个事件对象作为实参传递进响应函数中，
这个事件对象中封装了当前事件的相关信息，比如：鼠标的坐标，键盘的按键，鼠标的按键，滚轮的方向。。-
可以在响应函数中定义一个形参，来使用事件对象，但是在IE8以下浏览器中事件对象没有做完实参传递，而是作为window对象的属性保存
- 例子：元素.事件 = function(event){ event = event || window.event; }; 元素.事件 = function(e){ e = e || event; };
3.事件的冒泡（Bubble）
事件的冒泡指的是事件向上传导，当后代元素上的事件被触发时，将会导致其祖先元素上的同类事件也会触发。
事件的冒泡大部分情况下都是有益的，如果需要取消冒泡，则需要使用事件对象来取消
-
可以将事件对象的cancelBubble设置为true，即可取消冒泡
- 例子：元素.事件 = function(event){ event = event || window.event; event.cancelBubble = true; };
4.事件的委派
指将事件统一绑定给元素的共同祖先元素，这样后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件
事件委派利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能
- target
event中的target表示触发事件的对象
如果触发事件的对象是我们期望的元素，则执行，否则不执行
例：
ul.onclick = function(event){
if(event.target.className == "link"){
alert
}
}
5.事件的绑定
addEventListener
通过这个方法也可以为元素绑定响应函数
参数：
- 时间的字符串，去掉on
- 回调函数，当事件触发时该函数会被调用
- 是否在捕获阶段触发事件，需要一个布尔值，一般都传false
可以同时为一个元素的相同事件同时绑定多个响应函数，当事件触发时，响应函数会按照函数的绑定顺序执行
btn01.addEventListener("click",function(){
alert(1);
},false);
6.事件的传播
W3C将事件传播分成了三个阶段
- 捕获阶段：从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发，如果希望在捕获阶段触发事件，可以将addEventListener（）的第三个参数设置为true
- 目标阶段： 事件捕获到目标元素，补货结束开始在目标元素上触发事件
- 冒泡阶段：事件从目标元素向它的祖先元素传递，依次触发祖先元素上的事件
事件参考https://www.w3school.com.cn/jsref/dom_obj_event.asp
onkeydown：
按键按下
一直按着不松手，事件会一直触发
连续触发时，第一次喝第二次之间会间隔稍微长一点，其他的会非常的快
这种设计是为了防止误操作
onkeydown：
按键被松开
键盘移动div练习
window.onload = function (){
var box1 = document.getElementById("box1");
document.onkeydown = function(event){
/* if(event.key == "ArrowUp"){
box1.style.top = box1.offsetTop-10 + "px";
}else if (event.key == "ArrowDown"){
box1.style.top = box1.offsetTop+10 + "px";
} */
//alert(event.key);//ArrowUp ArrowRight ArrowDown ArrowLeft
var speed = 10 ;//设置位移速度
if(event.ctrlKey){
//按下control 加速
speed = 50;
}
switch(event.key){
case "ArrowUp":
box1.style.top = box1.offsetTop-speed + "px";
break;
case "ArrowDown":
box1.style.top = box1.offsetTop+speed + "px";
break;
case "ArrowLeft":
box1.style.left = box1.offsetLeft-speed + "px";
break;
case "ArrowRight":
box1.style.left = box1.offsetLeft+speed + "px";
break;
}
};
};
/*
错误原因：offsetTop这个属性只能返回值，不能设置属性。
要是用style里的top 和left来改变div的位置
*/
