前端DOM事件整理

1. DOM事件模型 ： 事件捕获，事件冒泡

2. DOM事件流：

DOM0时代，制定了onclick写法，DOM2增加了addEventListener方法绑定事件（在IE中绑定事件用attachEvent），DOM3中增加了多种事件（鼠标，键盘等）的捕获

注：DOM1标准也是存在的，只是没有涉及事件相关的内容

DOM事件捕获流程：window -> document -> html -> body ->...(多层父级元素) -> 目标元素

注： html节点通过document.documentElement属性获取

常见例子：针对一个for循环给一个元素内多个子元素绑定事件，可以怎么优化。

 可以给父级元素绑定事件,通过currentTarget获取到对应点击的子元素节点，从而达到单独处理事件的目的。

自定义事件：

var eve = new Event('custome'),
    ev = document.getElementById('ev');

ev.addEventListener('costome', function() {
    console.log('custome');
})

ev.dispatchEvent(eve);

通过new Event对象创建自定义事件，通过addEventListener给DOM对象绑定自定义事件，dispatchEvent可以主动触发自定义事件

CustomEvent用法和Event相同，唯一区别是它在创建时可以额外传入一个object作为参数。