原生JS-12

1. 什么是事件：就是指用户或浏览器的某些行为，如用户点击鼠标、敲击键盘或者浏览器刷新
2. 事件处理程序：所谓事件处理程序就是指当事件被触发时，所要执行的某些程序，事件处理程序都有自己的名字，命名规则是在事件名称前加on，如click是点击事件，而它的事件处理程序被命名为onclick，注意事件处理程序的名称通常为小写字母
3. 事件处理程序的应用：就是指如何给一个事件添加事件处理程序，主要有一下几种形式
   a) HTML事件处理程序，就是指将事件处理程序卸载HTML的开始标签中，如
   
   b) DOM0级事件处理程序，就是指在节点后面直接添加事件处理程序，如
   c) DOM0级事件处理程序的删除：就是给事件处理程序赋值为null如obj.onclick = null;
   d) DOM0级事件下一个对象可以设置多个事件处理程序，但是如给该对象设置了相同的事件处理程序，如给一个div设置了多个点击事件，那么只能执行最有一个
4. 常见的事件
   a) 鼠标事件
   onclick/ondblclick（双击）/onmouseover/onmouseout/onmousemove（移动）
   b) 键盘事件：主要应用于能够获得焦点的元素
   onkeyup
   onkeydown：键盘按下去时触发事件，可以按键盘上的任意按键
   onkeypress：键盘按下去时触发事件，对于方向键、Ctrl、Shift这样的功能按键不支持
   c) 窗口事件：onscroll/onresize/onload/onunload
   d) 表单事件:
   onfocus
   onblur
   onchange
   onsubmit
5. event对象：是一个和事件相关的对象，即事件被触发时自动回生成一个event对象，该对象记录和事件相关联的信息，属性
   a) clientX：距离可视窗口左面的距离即X值
   b) clientY：距离可视窗口上面的距离即Y值
   c) pageX：效果同上，区别是pageX包含滚动条
   d) pageY：效果同上，区别是pageX包含滚动条
   e) offsetX
   f) offsetY
6. 注意event对象在使用时会有浏览器兼容的问题，有些浏览器中可以直接使用event，但是在某些浏览器中不支持，所以当不支持时可以使用如下格式：window.event，我们可以写一个兼容的写法var e = event||window.event
7. DOM2级事件处理程序
   a) 事件处理程序的添加，需要用到addEventListener();
   格式：addEventListener(“事件名称”, 事件处理程序, 事件模型)
   b) 事件处理程序的删除，需要用到removeEventListener(“事件名称”, 事件处理程序, 事件模型)，需要注意如果要删除事件，最好将匿名函数赋值给一个变量
   c) 支持添加同种事件，后添加的事件不会把前面添加的事件清除
8. 事件模型：
   a) 冒泡模型（FALSE，默认）：从当前元素到根元素
   b) 捕获模型（true）：从元素到当前元素
9. 冒泡事件的阻止，需要使用stopPropagation()，格式：event.stopPropagation()
   10.阻止元素的默认行为，需要使用preventDefault()，格式：event.preventDefault();