JavaScript DOM

JavaScript DOM 笔记

1 常用事件总结

1.1 鼠标事件

click 			单机
dblclick		双击
contextmenu		右击 
mouseover		鼠标悬停在元素上， 用mouseenter 代替
mouseout		鼠标离开元素，	   用mouseleave 代替
mouseenter		鼠标悬停在元素上
mouseleave 		鼠标离开元素
mousedown 		鼠标按键按下
mouseup			鼠标按键抬起
mousemove		鼠标移动

1.2 键盘事件

keydown 		键盘按键按下
keyup			键盘按键抬起
keypress		键盘按键按下，用于可输入字符按键

1. 哪些元素可监听键盘事件

① document

② 可以获取焦点的元素（表单控件，尤其是可输入的元素）

2. keydown 和 keypress 的区别

① keydown 所有的按键按下都可以触发，无法区分大小写按键。

② keypress 只有可输入字符按键按下才可以触发，可区分大小写按键。

3. 如何获取按下的是哪个按键

使用event 对象中的属性：

• event.keyCode 获取按键对应的 ascii 值
• event.which 同keyCode
• event.key 获取按键的字符值。

1.3 文档事件

load 				页面中所有的一切加载完毕就会触发，可以监听到window 或者 body 元素
DOMContentLoaded 	页面中所有的元素加载完毕就会触发，可以监听在window 或者 document 上，只能使用addEventListener 监听事件
beforeunload		当关闭页面时候触发

load 事件和 DOMContentLoaded 事件的区别：

① load 事件是页面中所有的一切加载完毕才能触发，包括元素以及外部资源。

② DOMContentLoaded 事件是页面中所有的元素加载完毕就可以触发 ，不包括外部资源。

1.4 表单事件

submit		当表单提交的时候触发，该事件监听到form 元素
reset 		当表单重置的时候触发，该事件监听到form 元素
focus 		当表单控件获得焦点的时候触发。
blur		当表单控件失去焦点的时候触发。
select 		输入框或文本域中的内容被选中
change 		对于输入框，内容该表且失去焦点才会触发，适合于select 

1.5 图片事件

load 		图片文件加载完毕
error 		图片文件加载失败

1.6 其他事件

resize 		监听到 window 上，视口大小发生改变
scroll		监听到 window 上或者具有滚动体的元素，页面或页面中的内容发生滚动就改变。 

2 Event 对象

2.1 获取 Event 对象

给事件的回调函数设置第一个形参，就可以获取event 对象。

不同类型的事件获取的 Event 对象类型也不一样。

2.2 鼠标事件对象 MouseEvent 的属性和方法

offsetX / offsetY 		获取鼠标在目标元素上的坐标位置
clientX / clientY		获取鼠标在视口上的坐标位置
pageX / pageY			获取鼠标在页面上的坐标位置
screenX / screenY 		获取鼠标在屏幕上的坐标位置
button 					获取按的是那个鼠标按键，  0:左键; 1:中间滚轮;  2:右键

2.3 键盘事件对象 KeyBorardEvent 的属性和方法

keyCode 	获取按键对应的编码值
which 		同keyCode 
key 		获取按键对应的字符串

2.4 所有类型的事件对象都有的属性和方法

type 				获取事件名
timeStamp			获取触发事件时距离打开页面时的毫秒数
target				获取目标元素
stopPropagation()   阻止事件冒泡
preventDefault()	阻止浏览器默认行为

2 .5 阻止事件冒泡

在事件的回调函数中执行event.stopPropagation(),就可以组织冒泡。

2.6 浏览器的默认行为

① 浏览器有哪些默认行为

超链接点击跳转
表单的提交和重置
右键弹出系统菜单
等....

② 组织浏览器默认行为

在事件的回调函数中调用event.preventDefault() 即可阻止默认行为。

注意： 如果使用第二种方式监听事件，在回调函数中return false 同样可以阻止默认行为。

3 事件委托

事件委托到祖先元素上，判断目标元素，如果目标元素满足条件，就执行相关操作。

事件委托的优势：

1. 对于给大量的元素监听相同的事件，使用事件委托比遍历每个监听效率更好。
2. 利用事件委托可以让新增的元素也可以响应事件。

4 DOM 对象深入分析

4.1 元素对象的原型链关系

HTMLDivElement类型   ->  HTMLELement类型  ->  Element类型   ->   EventTarget类型   ->   Object类型	->    Object.prototype

4.2 事件对象的原型链关系

MouseEvent 类型    ->	   UIEvent类型	->	 Object类型	-> 	  Object.prototype

4.3 HTMLCollection 和 NodeList 的区别

① HTMLCollection 对象

• getElementsByTagName()、getElementsByClassName()、document.all、children 等方式可以获取到HTMLCollection 类型的对象
• HTMLCollection 类型的对象中的成绩必须都是元素节点。
• 该对象没有forEach() 方法
• HTMLCollection 对象是动态的，可以实时更新集合中的元素。

② NodeList

• getElementsByName()、querySelectorAll()、childNodes 等方式方法可以获取到NodeList 类型的对象
• NodeList 类型的对象中的元素可以是任意类型的节点（元素、文本节点、注释节点、document等）
• 该方法有froEach 方法
• NodeList 对象是静态的对象