DOM事件大全

1.事件：js与html的交互就是通过事件 的， 观察者模式

2.事件流 ：从页面中接收事件的顺序

IE：:事件冒泡流，事件冒泡，事件从最具体的元素接收，然后逐级向上传播，主流浏览器都支持

Netscape：事件捕获流，从最不具体的节点向下逐级传播到最具体的节点

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

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

3.事件处理程序

事件：某种动作，比如click

事件处理程序，响应某个事件的函数，比如onclick

html事件处理程序

< button id= "btn" οnclick= show()> 点我呀 </ button >

事件对象是event

DOM0级事件处理程序：兼容性好，缺点是会事件覆盖，是事件冒泡的

添加：

document . getElementById ( 'btn' ). onclick = function () { }

移除事件处理程序

document . getElementById ( 'btn' ). onclick = null

ie8下事件对象是window.event，其他是event

DOM2级事件处理程序

添加

document . getElementById ( 'btn' ). addEventListener ( 'click' , function () { })；

ie8：attachEvent（‘click’，function（）{ }），只有两个参数，默认将事件添加到冒泡阶段

移除

document . getElementById ( 'btn' ). removeEventListener ( 'click' , 添加时的回到函数 )；

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 = "test" > 点我呀 </ button >

<div id = "f" class = "f" ></div>

var test = document . getElementById ( 'test' );

var f = document . getElementById ( 'f' );

var i = 0 ;

test. onclick = function () {

var p = document . createElement ( 'p' );

p. innerHTML = i++;

f. appendChild (p);

}

f. onclick = function ( e ) {

console . log ( e .target.innerHTML);

}

10.模拟事件

var e = document.createEvent（自定义事件名称）

node.dispatchEvent(e);

 new CustomEvent(事件名，数据)：兼容性不好

11.其他： form有submit事件，表单的提交最好使用submit事件，不使用onclick事件，因为不同的浏览器之间可能存在不同的时差，submit事件和click之间的顺序不同的浏览器之间是不同的

表单还有focus事件，blur事件，change事件

select的change事件是只有改变了选择项就会发生，而其他表单是在值被修改且失去焦点的时候才会发生

序列化表单：

formData：

var data = new formData();

data.append(名，值)

或

new formData（form表单）

也可搭配使用