DOM 事件

DOM 事件的级别

• DOM0 element.onclick = function() {}
• DOM2 element.addEventListener('click', function() {},false)
• DOM3 element.addEventListener('keyup', function() {}, flase)

DOM 事件模型

• 捕获：从上到下
• 冒泡：从当前元素往上

DOM 事件流：

浏览器在当前页面与用户做交互的过程，比如说点击了鼠标左键，这个事件是怎么传到页面上，这个就是事件流。它是怎么响应的？分3个阶段：

1. 捕获
2. 目标阶段（事件通过捕获到达目标元素）
3. 从目标元素再上传到window 对象就是冒泡过程

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

 

Event 对象的常见应用

• event.preventDefault(): 阻止默认事件
• event.stopPropagation(): 阻止冒泡
• event.stopImmediatePropagation(): 一个按钮绑定了两个click 事件1，2，想通过优先级的方式比如说第一个响应函数是A，第二个响应函数是B，依次注册了A,B 两个事件，按优先级的方式想在A点击的时候不要执行B，在A 的响应事件中加上这个就可以阻止B事件的触发
• event.currentTarget: 当前所绑定的事件
• event.target: 当前被点击的元素

自定义事件

var eve = new Event('custom')
ev.addEventListener('custom', function() {
   console.log('custom') 
})
ev.dispatchEvent(eve)

CustomEvent: 也是自定义事件的一个方法，如果想给事件加一些事件Event 是做不到的，这个时候就需要 CustomEvent

总结：Event 和 CustomEvent 都是做自定义事件的，他们两个唯一的区别是：CustomEvent 除了可以指定事件名还可以加一个object 做参数（指定事件名+参数），event 不能加参数，两个用法一样