DOM事件

1.事件入门

a.认识JavaScript事件

Js是一门事件驱动的语言。任何地方其实都带着事件。如能明显感受到的：

1、鼠标点击

2、鼠标悬停

3、鼠标挪开

4、键盘敲击

5、表单的提交

6、滚动

b.事件三要素（事件源、事件、监听器）

1、任何一个事件，都必须包括三要素：

2、事件源，在哪个元素上发生的

3、事件，具体发生了什么事件，点击，悬停，键盘敲击

4、监听器，当事件发生时，我做了什么，在js中，通常用一个函数来表示

注意：

事件源一般指的是一个元素（宿主对象）

在事件里，一般的形式 是  onclick  onmouserover  其中真正的事件是  click  mouserover    on其实只是一个修饰，表示要添加事件的意思；

监听器是一个匿名函数，但是这个函数不需要我们去调用，会有js引擎去调用，但是调用是有条件的，必须要触发添加好的事件，才会去调用这个函数；

2.事件绑定

1、HTML事件处理程序

2、DOM 0级事件处理程序

3、DOM 2级事件处理程序

4、IE事件处理程序

(1).HTML事件绑定方式

(2).DOM 0级事件处理程序

(3).DOM 2级事件处理程序

添加事件的方法

addEventListener 

用法：  dom.addEventListener(事件类型,匿名函数,false); 

移除事件的方法

removeEventListener

用法：dom.removeEventListener(事件类型,已经添加过的监听器,false);

(4).IE事件处理程序 

Ie5、ie6、Ie7、ie8不支持addEventListener和removeListener这两个方法

attachEvent 添加事件

用法： dom.attachEvent(事件类型,监听器);

detachEvent 移除事件

用法：dom.detachEvent(事件类型,已经添加过的监听器);

3.事件流及事件传播

在页面中，如果对某一个元素发生了事件，那么这个元素的所有祖先级都会触发相同的事件；

事件传递：某个事件会从当前点击的这个元素和它的最祖先的元素（document）之间进行传递；

传递是有顺序的，顺序只有两种   

1.从内往外传，叫冒泡

1.从外往内传，叫捕获

哪些情况下会发生冒泡： 

DOM0级添加的方式都是冒泡的

DOM2级的方式，主要看第三个参数，false表示的是冒泡，true表示的捕获；

首先，确定传递路径（从触发事件的元素到document）,找到捕获的为一组，找到冒泡的为一组，  先走捕获这一条（从外往内），在走冒泡这一条（从内往外）

注意：

addEventListener的第三个参数决定了是冒泡还是捕获

Ie的事件处理程序决定了ie只有冒泡，没有捕获；

4.事件类型

(1).焦点事件

focus:获取焦点

blur：失去焦点

使用范围：input、a、select

使用比较多的就是input。

focus  指的是输入框获得输入光标的时候，会触发一个事件；

blur 指的是输入框失去焦点，不能输入的时候，会触发

(2).鼠标事件

click，单击

mouseover、mouseout，鼠标悬停，鼠标离开，使用最多

mousedown、mousemove、mouseup，鼠标按下去，鼠标移动，鼠标松开

点击：只要有鼠标左键按下，并且抬起来，构成一个点击事件

Mouserdown  :鼠标左键按下事件，只要按下就会触发

Mouseup ：鼠标左键抬起事件，只要抬起就会触发

一般来说，点击事件里边包含了 鼠标按下事件和鼠标抬起事件；

注意：click会在mousedown和mouseup之后执行，而且，要时刻注意，事件发生的事件源；

场景：在网页上点击一个按钮的时候，如果只是鼠标按下，但是之后鼠标离开了这个元素，再抬起鼠标，这个时候，单击事件和抬起事件都不会触发；

(3).键盘事件

keydown和keypress：键按下去

keyup：键松开

键盘事件，可以绑定到具体的某一个元素，也可以绑定到document上。

Keydown和keypress都是表示按下的，但是有细微区别：

keydown，可以响应所有键的按下

Keypress，只能响应字符键（字母、数字、符号），控制键和功能键是不响应的。

如果按住键不放的话，那么就重复的执行keydown和keypress，keyup只有在按钮抬起的那一刻才会执行

(4).表单事件

submit，提交事件，在点击submit按钮的时候触发的事件

reset，重置事件，在点击reset按钮的时候触发的事件（实际使用比较少）

change事件，是指内容改变时触发的事件，通常应用在input框和select

input事件，是指只要键盘上的键动了，就会触发；

Submit事件的用法

Submit事件的事件源是这个按钮所在的form元素；

事件类型是  onsubmit

这是表单提交时候所触发的事件，并不是按钮的点击事件；

Reset事件的事件源也是这个按钮所在的form标签

事件类型  onreset

Input事件的事件源是可以改变内容的表单元素

事件类型  oninput

input事件在输入的时候，会持续触发，基本就是敲一个按键，触发一次；

(5).ui事件

Ui:用户界面

load、unload、beforeunload

select

scroll

resize

load这个事件它的事件源是window，表示的是页面文档和各种资源都加载完毕之后，才会执行；

window.onload=function(){}

一般js的引入在body的最底部，是为了让dom元素都加载完之后，在执行js，如果把js引入在head标签内，这个时候可以用onload这个事件；

unload  页面卸载的时候会触发，但是很难捕捉到，

unbeforeload  页面卸载之前会触发。

Select事件的事件源是input框

scroll事件指的是页面中的滚动条发生滚动会持续触发的事件；事件源是window

resize事件值的是浏览器窗口的大小发生改变，会持续触发这个事件，事件源是window；