DOM · 前端笔记

[TOC] # DOM ## 级别 ### DOM0 ~~~ element.onclick = function{} ~~~ ### DOM2 ~~~ element.addEventListener('click', function(){}, false) ~~~ ### DOM3 ~~~ element.addEventListener('keyup', function(){}, false) ~~~ <br><br> ## 事件模型 ### 冒泡型事件流事件的传播是从最特定的事件目标到最不特定的事件目标。即从DOM树的叶子到根。**【推荐】** ![](https://box.kancloud.cn/1e2c978adabe8e092b7c1dbec64fa142_435x368.png) ### 捕获型事件流事件的传播是从最不特定的事件目标到最特定的事件目标。即从DOM树的根到叶子。 ![](https://box.kancloud.cn/96f1b1f56bb418a0d1f22bca21ee31f4_394x324.png) **注意：** * 所有现代浏览器都支持事件冒泡，但在具体实现中略有差别： * IE5.5及更早版本中事件冒泡会跳过<html>元素(从body直接跳到document)。 * IE9、Firefox、Chrome、和Safari则将事件一直冒泡到window对象。 * IE9、Firefox、Chrome、Opera、和Safari都支持事件捕获。尽管DOM标准要求事件应该从document对象开始传播，但这些浏览器都是从window对象开始捕获事件的。 * 由于老版本浏览器不支持，很少有人使用事件捕获。建议使用事件冒泡。 <br><br> ## 事件流 DOM标准采用捕获+冒泡。两种事件流都会触发DOM的所有对象，从document对象开始，也在document对象结束。 ![](https://box.kancloud.cn/100194f6e5adb11ee38787ca8fce78b4_506x307.png) DOM标准规定事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。 * 捕获阶段：实际目标（`<div>`）在捕获阶段不会接收事件。 * 处于目标阶段：事件在`<div>`上发生并处理。但是事件处理会被看成是冒泡阶段的一部分。 * 冒泡阶段：与捕获阶段相反 **注意：** * 尽管“DOM2级事件”标准规范明确规定事件捕获阶段不会涉及事件目标，但是在IE9、Safari、Chrome、Firefox和Opera9.5及更高版本都会在捕获阶段触发事件对象上的事件。结果，就是有两次机会在目标对象上面操作事件。 * 并非所有的事件都会经过冒泡阶段。所有的事件都要经过捕获阶段和处于目标阶段，但是有些事件会跳过冒泡阶段：如，focus事件和blur事件。 ## 事件捕获的具体流程 `window` -> `document` -> `html` -> `body` -> ... -> 目标元素 <br><br> ## Event对象的常见应用 ### event.preventDefault() 阻止默认行为 ### event.stopPropagation() 阻止冒泡 ### event.stopImmediatePropagation() 如果有多个相同类型事件的事件监听函数绑定到同一个元素，当该类型的事件触发时，它们会按照被添加的顺序执行。如果其中某个监听函数执行了 event.stopImmediatePropagation() 方法，则当前元素剩下的监听函数将不会被执行。 ### event.currentTarget 返回绑定事件的元素 ### event.target 返回触发事件的元素 ### return false 当你每次调用”return false“的时候，它实际上做了3件事情： * event.preventDefault(); * event.stopPropagation(); * 停止回调函数执行并立即返回。 <br><br> ## 自定义事件 ~~~ var element = document.querySelector('.inner') var event = new Event('custom') element.addEventListener('custom', function (){ console.log(1) }, false) element.dispatchEvent(event) ~~~