DOM事件

根据慕课视频总结的笔记

DOM事件的级别

   // DOM0  
    elemen.onclick=function(){}
   // DOM2 element.addEventListener('click',function(){},false)  
   //其实制定了是捕获还是冒泡
   //DOM3  element.addEventListener('keyup',function(){},false)
   //相对DOM2增加了很多事件类型，比如鼠标事件，键盘事件

DOM事件模型
就包括捕获true和冒泡false

DOM事件流
事件流就是浏览器就当前页面与用户做交互，
完整事件流：
第一阶段捕获——》第二阶段目标阶段——》第三阶段冒泡阶段
事件通过捕获到达目标元素，然后在从目标元素上传到window对象
描述DOM事件捕获的具体流程
捕获是从上到下的过程
window——》document——》html（如何取html标签？document.documentElement）——》body——》。。。——》目标元素

冒泡就是相反的路线

Event对象的常见应用

event.preventDefault()
//阻止默认事件,比如设了一个a标签，绑定了一个click事件，加上这个事件就阻止链接默认跳转的行为
event.stopPropagation()
//阻止冒泡，比如父级元素，子元素都绑定了事件，如果想要单击子元素做一件事，单击父元素再做一件事，我们就给子元素阻止冒泡，
event.stoplmmediatePropagation
//比如一个按钮绑定A和B两个事件，我想按优先级来，比如执行了A就不要执行B，我们就在A中加上这个事件，就能阻止B（事件响应优先级）
event.currentTarget
//
event.target
//最后两个是常考的，一个for循环给一个DOM节点注册了很多事件，如何优化？——》使用事件代理，把子元素的事件全部转到父元素，绑定一次事件即可。就得区分哪一个被点击——》target就是当前被点击的元素（子元素），currentTarget是当前所绑定的事件（父级元素）

自定义事件（模拟事件）

var eve=new Event('custome')  //new一个Event
ev.addEventListener('custome',funnction(){
  console.log('custome')  //通过DOM2事件注册的方式来绑定这个自定义事件，ev是个dom对象
})
ev.dispatchEvent(eve）//触发事件

Event只能指定事件名
CustomEvent 不仅能指定事件名，还可以跟个object做指定参数（自定义的）
如下