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级事件处理程序

DOM事件_第1张图片

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

添加事件的方法

addEventListener 

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

DOM事件_第2张图片

移除事件的方法

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),找到捕获的为一组,找到冒泡的为一组,  先走捕获这一条(从外往内),在走冒泡这一条(从内往外)

DOM事件_第3张图片

注意:

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

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

DOM事件_第4张图片

4.事件类型

DOM事件_第5张图片

(1).焦点事件

focus:获取焦点

blur:失去焦点

使用范围:input、a、select

使用比较多的就是input。

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

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

(2).鼠标事件

click,单击

mouseovermouseout,鼠标悬停,鼠标离开,使用最多

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

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

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

Mouseup :鼠标左键抬起事件,只要抬起就会触发

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

DOM事件_第6张图片

注意:click会在mousedown和mouseup之后执行,而且,要时刻注意,事件发生的事件源;

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

(3).键盘事件

keydown和keypress:键按下去

keyup:键松开

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

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

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

Keypress,只能响应字符键(字母、数字、符号),控制键和功能键是不响应的。

DOM事件_第7张图片

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

DOM事件_第8张图片

(4).表单事件

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

reset,重置事件,在点击reset按钮的时候触发的事件(实际使用比较少)

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

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

Submit事件的用法

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

事件类型是  onsubmit

DOM事件_第9张图片

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

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

事件类型  onreset

DOM事件_第10张图片

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

事件类型  oninput

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

DOM事件_第11张图片

(5).ui事件

Ui:用户界面

load、unload、beforeunload

select

scroll

resize

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

window.onload=function(){}

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

DOM事件_第12张图片

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

unbeforeload  页面卸载之前会触发。

Select事件的事件源是input框

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

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

DOM事件_第13张图片

你可能感兴趣的:(DOM事件)