原生JS-12

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

原生JS-12

推荐阅读更多精彩内容