Day16_DOM课堂笔记

Day16 DOM 笔记

1 回顾

1. 事件触发流程
   捕获阶段
   目标阶段
   冒泡阶段

2. 常用事件总结
   2.1 鼠标事件：
       click dblclick contextmenu 
       mousedown mouseup mosurmove
       mouseenter mouseleave
   2.2 键盘事件
       keydown keyup keypress
   2.3 文档事件
       load DOMContenLoaded beforeunload

2 常用事件总结

2.1 表单事件

submit			表单提交事件，必须监听给 form 元素
reset			表单重置事件，必须监听给 form 元素
blur			失去焦点事件，一般监听给文本框或文本域
focus			获取焦点事件，一般监听给文本框或文本域
select			文本被选中事件，必须监听给文本框或文本域
change			监听到输入框元素：输入内容改变且失去焦点才能触发； 监听到单选框、复选框、下拉选项：一改变就				  触发

2.2 图片事件

load			图片加载完毕，只能监听给 img 元素
error			图解加载失败，只能监听给 img 元素

2.3 其他事件

scroll			里面的内容滚动事件, 监听給 window 或者 里面内容可以滚动的元素
resize			视口大小发生变化就触发，监听给 window

3 Event 对象

3.1 获取 Event 对象

1. 如果是第二种和第三种方式监听的事件，回调函数第一个参数就是 event 对象
2. 如果是第一种方式监听事件，在属性值的代码中可以直接使用 event

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

button				获取鼠标的按键 0：表示左键、1：滚轮键、2：右键
clientX、clientY	   获取鼠标在视口上的位置
offsetX、offsetY	   获取鼠标在目标元素上的位置
pageX、pageY		   获取鼠标在页面上的位置
screenX、screenY	   获取鼠标在屏幕上的位置

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

keyCode				获取按键对应的ascii值
key					获取按键的值
which				同 keyCode

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

type					获取事件名
timeStamp				获取触发事件的那一刻距离页面打开的那一刻的毫秒数
target					获取目标元素

stopPropagation()		阻止冒泡
preventDefault()		阻止浏览器默认行为

3.5 阻止事件冒泡

event.stopPropagation();

3.6 浏览器的默认行为

① 浏览器有哪些默认行为

1. 鼠标右键系统菜单
2. 表单的提交和重置
3. 超链接点击跳转

② 阻止浏览器默认行为

event.preventDefault();

1. 如果是第二种方式监听的事件，在回调函数中 return false 可以起到与 event.preventDefault() 同样的效果。
2. 第二种方式监听的事件，return false 只能阻止浏览器默认行为，不能阻止冒泡！

4 事件委托

实现原理：

事件委托给上层的祖先元素，事件触发之后，判断目标元素是否满足条件

// 使用事件委托监听事件
box.onclick = function(event) {
    // 判断目标元素是否是 item 元素
    if (event.target.className.indexOf('item') >= 0) {
        event.target.classList.toggle('active');
    }
}

事件委托的作用：

1. 让新增加的元素也具有事件
2. 如果需要给大量的元素监听相同的事件，事件委托比遍历效率更高。

5 DOM 对象深入分析

5.1 元素对象的原型链关系

div元素 -> HTMLDivElement.prototype -> HTMLElement.prototype -> Element.prototype -> Node.prototype -> EventTarget.prototype -> Object.prototype

5.2 事件对象的原型链关系

鼠标事件对象 -> MouseEvent.prototype -> UIEvent.prototype —> Event.prototype -> Object.prototype

5.3 HTMLCollection 和 NodeList 的区别

① HTMLCollection 对象

1. getElementsByTagName()、getElementsByClassName()、children、document.all 能够返回 HTMLCollection 对象
2. HTMLCollection 集合的成员必须都是元素对象
3. 没有 forEach 方法
4. HTMLCollection 是一个动态的集合，集合的成员能够自动实时更新

② NodeList

1. getElementsByName()、querySelectorAll()、childNode 能够返回 NodeList 对象
2. NodeList 集合的成员可以是节点就可以，包括元素。
3. 有 forEach 方法
4. NodeList 是一个静态的集合，集合无法自动更新。