DOM复习event.stopImmediatePropagation()考虑事件响应优先级时,该函数用于阻止剩余的事件

DOM事件的级别

DOM0

element.onclick=function(){}

DOM1

该标准指定时没有涉及事件相关

DOM2

element.addEventListener('click',function(){},false)

DOM3

element.addEventListener('keyup',function(){},false)
//增加了事件类型，鼠标事件，键盘事件

DOM事件模型

捕获
冒泡

DOM事件流

捕获阶段

事件从Document节点自上而下向目标节点传播的阶段

目标阶段

事件通过捕获到达目标元素，真正的目标节点正在处理事件的阶段

冒泡阶段

事件从目标元素冒泡，事件从目标节点自上而下向Document节点传播的阶段

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

window --> document --> html(*) --> body --> ...--> 目标元素

*js中使用document.documentElement获取html的根（root）节点<html>

Event对象的常见使用

e.clientX/e.clientY可视区域内的窗口坐标（方向参考left和top）
e.ScreenX/e.ScreenY相对于屏幕的坐标
event.button识别鼠标点击左中右键
event.keycode键盘事件
event.鼠标事件
event.preventDefault()阻止默认行为
event.stopPropagation()阻止冒泡
event.stopImmediatePropagation()考虑事件响应优先级时,该函数用于阻止剩余的事件处理函数的执行，并防止当前事件在DOM树上冒泡。
event.currentTarget()是绑定监听事件的对象
event.target()触发事件的当前元素（早期ie中的source）

通过事件冒泡机制，给父元素添加监听事件。子元素触发事件，冒泡到父元素，父元素触发事件。 e.currentTarget 是绑定监听事件的对象

自定义事件

定义一个自定义事件var eve = new Event('Ename')
绑定ev.addEventListener('Ename',fn)
自定义触发事件ev.dispathEvent(eve)

event = new Event(typeArg, eventInit);

typeArg：指定事件类型，传递一个字符串。
eventInit: bubbles：事件是否支持冒泡，传递一个boolean类型的参数，默认值为false。 cancelable：是否可取消事件的默认行为，传递一个boolean类型的参数，默认值为false。 composed：事件是否会触发shadow DOM（阴影DOM）根节点之外的事件监听器，传递一个boolean类型的参数，默认值为false。

event = new CustomEvent(typeArg, customEventInit{ bubbles, cancelable, composed, detail });

typeArg：指定事件类型，传递一个字符串。
customEventInit：可以接受EventInit字典的参数（bubbles等）和detail。
detail：默认值为null，可以传递任意类型的参数。

const event = new CustomEvent('msg', {
  detail: 'this is detail in CustomEvent'
})
const element = document.body
element.addEventListener('msg', function(e) {
  console.log(e.detail);
}, false)
element.dispatchEvent(event)//this is detail in CustomEvent