Web前端认识day-15（事件）

7.1 事件的概念
事件源
事件名
事件注册
事件处理
以火灾为例
XX大酒店201房间发生火灾，打119电话报警，xxx消防大队出警
赶到现场通过喷水作业成功灭火
事件源：XX大酒店201房间
事件名：火灾
事件注册：规划片区，由xxx消防大队负责
事件处理：喷水
7.2 常用事件
鼠标常用事件
（1） 单价事件onclick

在这个案例中，事件源是id‘为“p1”的元素，事件名是单击
事件注册οnclick=“fun（）”，也就是说，当单击id为“p1”的
元素时，交给fun函数来处理。
（2） 双击事件：ondblclick

(3)鼠标按下/抬起（onmousedown/onmouseup）

(4)鼠标移入/离开（onmouseenter/onmouseleave）

（5）onmouseover onmouseout
与onmouseenter、onmouseleave很类似，区别后面再讲。
（5） onmousemove 鼠标移动

（6） onmousewheel鼠标滚轮

键盘事件
键盘编码表

注意，键码为13的Enter，是字母键盘上的回车键
键码为108的Enter，是右方数字小键盘上的回车键（笔记本一般没有）
（1） keypress

keyCode属性，记录了按下键的编码
keypress事件只捕获可打印字符的按键，不能捕获例如shift、ctrl、alt之类
但是可以通过shiftkey、ctrlkey等属性判断在击键的同时是否按下了shift、ctrl等辅助键
（2） keydown，keyup

		案例：图片移动

总结：
（1） 使用变量top导致上下移动失败，原因是和window.top这个全局变量冲突了换个变量名就好了
（2） 如果把top1和left移入函数中，发现只能移动5像素，原因是函数内部的局部变量在每次调用函数时都会重新创建并初始化，也就是说每一次调用left和top1的值都是零，不会保留上一次值，如果需要保留，就只能用全局变量
其他事件：
Onload：页面加载事件
Onfocus：获得焦点的事件
Onblur：失去焦点的事件
Onchange：值改变事件
7.3 事件的注册
三种方法：
（1） 使用onxxx属性。例如οnclick=“fun（）”
（2） 通过js去设置元素的onxxx属性
（3） 通过addEventListener注册

后两种方法有什么好处：
将页面的内容、样式、行为分离，内容和样式可能是美工人员去完成
行为（也就是js内容）往往是程序员的事。分离后有利于分工合作
第三种方式addEventListener（添加事件监听）它的第一个参数事件名，第二个参数是事件处理函数。既然可以添加事件监听，那么必然会有移除事件监听，用的是removeEventListener
参数与addEventListener是一样的
而且通过addEventListener和removeEventListener我们可以动态的注册不同的事件处理程序
7.4 捕获与冒泡

在这个案例中，如果单击文字，先提示“段落被单击”，然后再提示“div被单击了”，因为div是p的父容器，所有单击段落也就相当于单击了div，所有两者都会触发这个事件
但是如何去规定两个事件的处理顺序？这就是事件的冒泡与捕获。
冒泡：按照从内到外的顺序依次触发，是默认方式
捕获：与上相反

当使用mouseenter事件时，当里层的div触发进入事件时，处理完了就没了（阻断冒泡）
而使用mouseover事件时，当里层的div触发进入事件时，处理完后还会冒泡给父容器处理再次进入事件
程序员也可以根据需要自己去阻断冒泡，用stopProagation。