Dom 事件DOM事件中最重要的是对DOM事件原理的理解（比如冒泡和捕获），怎么去注册事件（监听用户的交互行为），作

基本概念：DOM事件级别？
DOM 事件模型，或者DOM 事件模型是什么？
DOM事件流？
描述DOM事件捕获的具体流程？
Event 对象的常见应用？
自定义事件？

DOM事件中最重要的是对DOM事件原理的理解（比如冒泡和捕获），怎么去注册事件（监听用户的交互行为），作相应的时候event对象是非常重要的一部分。

DOM0

在元素中添加onclick事件

element.onclick = function(){}

DOM2

element.attachEvent( 'click',function(){},false )  // IE

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

addEventListener 第三个参数是是否捕获（true为在捕获阶段执行，false为在冒泡阶段执行）

DOM3 添加鼠标与键盘的事件

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

DOM1中的没有与事件相关的东西，所以不存在DOM1级事件，但是存在DOM1标准。

DOM 事件模型就是冒泡（自下而上）和捕获（自上而下）

事件流就是鼠标的左键怎样传到页面，怎样进行相应。

一个完整的事件流：

第一个阶段是捕获

第二个阶段是目标阶段，事件通过捕获到达目标元素就是目标事件

第三个阶段就是从目标阶段冒泡到window对象上

捕获是从上而下

第一个真正接收的就是 window -> document ->html 标签（document.element获取） -> body -> div -> 目标元素

那么冒泡反之。

event.preventDefault()  阻止默认事件。 // a链接的默认链接跳转

event.stopPropagation() // 阻止冒泡  点击子元素冒泡父级元素时间执行

event.stopImmediatePropagation() //

一个按钮绑定了两个事件，想要在执行一事件的时候不执行二事件，那么在一事件中写 event.stopImmediatePropagation() 就可以阻止二事件的执行。

event.currentTarget

为父元素添加委托事件，event.currentTarget 当前绑定的事件。

event.target 是当前点击的元素。

自定义事件或者模拟事件

场景：为元素添加事件，在其他场景下出发事件，而不是回调出发事件。

Event ( 自定义事件名 )

var eve = new Event('self')  // 义事件

dom.addEventListener('self',function(){ 函数语句 });  // dom2级绑定时事件

dom.dispatchEvent(eve)  // 触发事件

CustomEvent ( 自定义事件名，{ 参数 } )

代码演示

捕获

 <div id="box">    点击演示捕获与冒泡  </div>

let box = document.getElementById('box')

window.addEventListener('click', function () {      console.log('window点击')    }, true)

 document.addEventListener('click', function () {      console.log('document点击')    }, true)

 document.documentElement.addEventListener('click', function () {      console.log('document.documentElement点击')    }, true)

 document.body.addEventListener('click', function () {      console.log('document.body点击')    }, true)

 box.addEventListener('click', function () {      console.log('box点击')    }, true)

冒泡就是将 addEventListener 的第三个参数修改为 false

自定义事件

new Event

 let self = new Event('mine')

box.addEventListener('mine', function () {      console.log('自定义事件')    })

setTimeout(function () {      box.dispatchEvent(self)    }, 1000)

new CustomEvent （传递的参数必须是detail包裹）

 let self = new CustomEvent('mine', { detail: { name: "customevent定义事件" } })

 box.addEventListener('mine', function (e) {      console.log('自定义事件')      console.log(self)      console.log(e.detail)    })

setTimeout(function () {      box.dispatchEvent(self)    }, 1000)

CustomEvent(in DOMString type, in boolean canBubble, in boolean cancelable, in any detail);

参数说明

第一个参数为要处理的事件名
第二个参数为表明事件是否冒泡
第三个参数为表明是否可以取消事件的默认行为
第四个参数为细节参数