DOM事件

DOM事件

1. DOM事件级别

• DOM0
  element.οnclick=function(){}
• DOM2
  element.addEventListener(‘click’, function(){}, false)
• DOM3 增加了鼠标事件，键盘事件等
  element.addEventListener(‘keyup’, function(){}, false);

2. DOM事件模型

冒泡：从当前元素往上触发事件，一直到最外层。
捕获：从最外层元素触发事件一直到当前元素。

3. DOM事件流

事件流分三个阶段：捕获阶段、目标阶段、冒泡阶段。

4. 描述DOM事件捕获的具体流程

第一个接收到事件的对象是哪个：window > document > html > body。
document.documentElement 获取当前HTML文档的< html>节点。

5. Event对象的常见应用

event.preventDefault()      - 比如阻止a标签的默认跳转行为
event.stopPropagation()      - 阻止冒泡行为
event.stopImmediatePropagation()      - 一个按钮绑定两个事件，想在A事件执行的时候，不要再执行B事件的执行。可以在A事件中添加这个方法。
event.currentTarget      - 事件代理中，当前绑定的事件。
event.target      - 事件代理中，可以判断当前被点击的元素

6. 自定义事件

Event和CustomEvent都是自定义事件的，不同点就是CustomEvent可以传递参数。

var eve = new Event('custome');    // eve就是类似于click一样的事件
ev.addEventListener('custome', function(){    // ev为DOM节点
	console.log('custome');
});
ev.dispatchEvent(eve);