JavaScript事件基础知识

标题

事件的概念

事件源
事件名
事件注册
事件处理
以火灾为例：
XX大酒店201房间发生火灾了，119电话报警，南湖区消防支队出警，赶往现场通过喷水作业成功灭火。
事件源：XX大酒店201房间
事件名：火灾
事件注册：实现已经规划好片区，XX大酒店所属片区归属南湖区消防支队负责
事件处理：喷水

常用的事件

鼠标常用的事件：

（1）单击事件

在这个案例中，事件源就是id为”p1”的元素,事件名是单击，事件注册
onclick = “fun()”,也就是说当单击id为“p1”的元素时，就交给fun函数来处理

（2）双击事件

（3）鼠标按下和弹起（onmousedown / onmouseup）

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

onmouseover onmouseout 与 onmouseenter onmouseleave
很类似，区别后面讲

（5）鼠标移动 onmousemove

（6）onmousewheel 滚轮

键盘事件

（1）Keypress

KeyCode属性记录了按下键的键码
Keypress事件只能捕获可打印字符的案件，不能捕获shift ctrl alt等等
不可打印字符的按键
但是可以使用shiftkey ctrlkey等属性判断在按键的同时是否按下了shift
ctrl 等辅助键。

（2）keydown / keyup

Keydown keyup可以捕获键盘上所有的键（个别除外）

（1）使用变量top导致上下移动失败，原因是和window.top这个全局变量冲突了，换个变 量名就好了。
（2）把变量top1 和 left移入函数中，发现只能移动5px，函数内部局部变量再每次调用函 数时都会重新创建并初始化，也就是说每一次调用left和top1的值都为0.不会保留上 一次的值。想保留，就只能使用全局变量。

其他事件

Onfocus： 获得焦点的事件
Onblur： 失去焦点的事件
Onchange: 值改变事件

事件的注册

三种方法：
（1）使用onXXX属性，比如”onclick = fun()”
（2）通过js去设置元素的onXXX属性
（3）通过addEventListener 注册

后两种办法，将页面的内容，样式和行为分离。分离之后利于分工合作
第三种方式，addEventListener第一个参数事件名，第二个参数是事件处理函数。
添加事件监听也可以移除。用的removeEventListener。

捕获与冒泡

你单击文字，先提示“段落被单击”，然后再提示“div被单击”。因为div是段落的父容器，所以单击了段落也就单击了div，两个都会触发这个事件。
如果规定两个触发的顺序，事件的冒泡和捕获
冒泡：按照从内到外依次触发，默认
捕获：反之。

使用onmouseenter事件时，里层div触发进入事件，处理完了就完事了（阻断冒泡）；而你使用onmouseover事件时，里层的div触发进入事件时，处理完了还会冒泡给父容器处理进入事件。
自己去阻断冒泡，stopPropagation();