DOM事件大全

1.事件：js与html的交互就是通过事件 的，
观察者模式
2.事件流
：从页面中接收事件的顺序
IE：:事件冒泡流，事件冒泡，事件从最具体的元素接收，然后逐级向上传播，主流浏览器都支持
Netscape：事件捕获流，从最不具体的节点向下逐级传播到最具体的节点

w3c：任何发生在w3c事件模型中的事件，首是进入捕获阶段，直到达到目标元素，再进入冒泡阶段。对于正常的web开发，可以选择是在捕获阶段还是冒泡阶段绑定事件处理函数，这是通过addEventListener()方法实现的。
所以一般常用的是事件冒泡，很少使用事件捕获

事件流包括三个阶段：事件捕获阶段，处于目标阶段和事件冒泡阶段，默认在捕获阶段是不调用事件处理程序的，在冒泡阶段触发

3.事件处理程序
事件：某种动作，比如click
事件处理程序，响应某个事件的函数，比如onclick

html事件处理程序
<
button
id=
&＃8220;btn&＃8221;
οnclick=
show()>
点我呀

button
>
事件对象是event
DOM0级事件处理程序：兼容性好，缺点是会事件覆盖，是事件冒泡的
添加：
document
.
getElementById
(
&＃8216;btn&＃8217;
).
onclick
=
function
() { }
移除事件处理程序
document
.
getElementById
(
&＃8216;btn&＃8217;
).
Onclick= null
ie8下事件对象是window.event，其他是event
DOM2级事件处理程序
添加
document
.
getElementById
(
&＃8216;btn&＃8217;
).
addEventListener
(
&＃8216;click&＃8217;
,
function
() { })；
ie8：attachEvent（‘click’，function（）{ }），只有两个参数，默认将事件添加到冒泡阶段
移除
document
.
getElementById
(
&＃8216;btn&＃8217;
).
removeEventListener
(
&＃8216;click&＃8217;
,
添加时的回到函数
)；
e8：detachEvent（‘click’，function（）{ }）
如果添加时使用的是匿名函数，移除时就算和代码写的一样，也是移除不掉的，因为两个函数不是同一个引用
第三个参数是一个布尔值：true：在捕获阶段调用事件处理程序，false：在冒泡阶段调用事件处理程序（默认）
事件对象都是event
4.事件对象
：在触发DOM上的某个事件时，都会有一个event对象

5.事件类型
DOM3级事件规定了以下几类事件，ie9也支持DOM3级事件
1-UI（用户界面事件）
：当用户与页面的上的元素交互时发生，但不一定与用户操作有关的事件。
load事件：当页面加载完毕时在qindow上触发，当图像加载完毕时在ing元素上触发，等等，页面完全加载完毕（包括所有图像，js文件，css等外部文件资源）时触发
img只要设置了src就会下载
unload事件：当页面完全卸载时在window上触发，等等
当一个页面切换到另一个页面时就会触发，经常利用这个事件来清除引用，减少内存的泄露
error：当发生js错误时在window上触发，当图像无法加载时在img上触发
abort事件：当用户停止下载过程时，如果嵌入的内容没有加载完成，则在object元素上触发
select：当用户选择文本框（input或textarea）中的一或多个字符时触发
resize：当窗口或框架的大小发生改变时在window上触发
scroll：当用户滚动带滚动条的元素中的内容时，在该元素上触发

2-焦点事件：当元素获得焦点或失去焦点时触发
blur：失去焦点时触发，这个事件不会冒泡
focus：获得焦点时触发，不冒泡
focusin：在获得焦点时触发，但他冒泡，DOM3新增
focusout：在失去焦点时触发，冒泡
3-鼠标事件：当用户通过鼠标在页面上执行操作时触发
click：单击事件，用户单机鼠标按钮（一般是左键）或按下回车键时触发
dbclick：双击事件，当双击鼠标时触发（一般是左键）
mousedown：当用户在按下任意鼠标按钮时触发
mouseup：当用户释放鼠标按钮时触发
mouseenter：在鼠标光标从外部首次（是指每次进入元素，并不是只执行一次）时触发，而且这个事件不冒泡，而且在光标移到到后代元素上不会触发（从父区域进入子区域，再从子区域进入父区域是不会触发的，因为他认为子区域也是他的一部分），DOM3定义的
mouseleave：和mouseenter是一对，刚好相反
mousemove：当鼠标指针在元素内部移时重复的触发
mouseout：当鼠标指针位于一个元素上方，然后移到到另一个元素上方时触发，另一个元素可能是外部元素也可能是他的后代元素，因为他不认为后代元素所在的区域是他的一部分
mouseover：和mouseout是一对，恰好相反

除了mouseleave和mouseenter之外都会冒泡
click事件只有触发了mousedown和mouseup之后才会触发，代表click只有触发两次clic才会触发，如果取消了之前的事件将会不触发
鼠标事件都是在浏览器视口中的特定位置发生的，可以通过事件的属性获取到。
视口区（客户区）坐标位置：
clientX和clientY可以获取到位置信息。所有浏览器都支持这两个属性，是相对于浏览器的视口而不是页面而言的，不包括地址栏等
页面坐标位置：
pageX和pageY，相对于页面而言，ie8及更早版本不支持这两个属性，不过我们可以计算出来 event.clientX + （document.body.scrollLeft + document.documentElement.scrollLeft） event.clientY + （document.body.scrollTop + document.documentElement.scrollTop）
屏幕坐标位置：
相对于整个电脑屏幕，screenX和screenY

4-滚轮事件：当使用鼠标滚轮（或类似事件）时触发
mousewheel：跟踪鼠标滚轮或笔记本触摸板
5-文本事件：当在文档中输入时触发
textinput：在文本显示给用户之前更容易拦截文本，是对keypress的补充
可编辑区输入字符键才可以出发
ie9才支持，firefox不支持
6-键盘事件：当用户通过键盘在页面上执行操作时触发
keydown：用户按下键盘上的任意键时触发，而且按住不放的话，会重复触发此事件
keypress：用户按下键盘上的字符键时触发，而且按住不放的话，会重复触发此事件，按下esc也会触发
keyup：用户释放键盘上的键时触发
所有元素都支持这三个事件

keydown-》keypress-》textinput-》keyup
keyup和keydown的event有个keycoe属性，代表键盘码，与ASCII相对应
7-合成事件：当为IME（input method editor，输入法编辑器）输入字符触发
同时按下几个键才能输入一个字符
8-变动事件：当底层DOM结构发生变化时触发
DOM结构发生变化时触发

9.事件委托：
本来该自己做的事情，委托给别人做。
利用的是事件冒泡原理，使用event.target获取触发事件的目标元素。
好处：
1- 提高性能，只需要注册一次事件，也方便移除事件。解决事件处理程序过多的问题，在DOM树中尽量最高的层次上添加一个事件处理程序，只指定一个事件处理程序，就可以管理某一类型的所有事件。
2- 给动态生成的元素添加事件。可以解决动态生成的子元素绑定不上事件的问题。

<
button
id
=
&＃8220;test&＃8221;
>
点我呀

button
>

id
=
&＃8220;f&＃8221;
class
=
&＃8220;f&＃8221;
>