DOM事件

Date：Mar 11, 2018 Author：Helene

本文章采用 知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议 进行许可。转载请注明来自Helene的博客

DOM事件（标准）的级别

DOM事件级别

DOM0 element.onclick = function(){}

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

DOM3 element.addEventLisrener('keyup',function(){},false) ===>还是addEventLisrener但是事件类型增加了很多，比如鼠标事件/键盘事件

DOM事件模型

事件冒泡-----即事件最开始由最具体的元素（文档中嵌套层次最深的节点）接收，然后逐级向上传播至最不具体的那个节点

事件捕获-----不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件

DOM事件流

一个完整的事件流分为3个阶段

第一阶段：捕获

第二阶段：目标阶段

第三个阶段：从目标元素上传到window对象，也就是冒泡的过程

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

如何获取body节点 : document.body

如何获取html节点 : document.documentElement

具体流程：
window > document > html > body > ... 目标元素

DOM事件捕获流程演示代码

<div id="ev">
    目标元素
</div>
<script>
    var ev = document.getElementById('ev')

    window.addEventListener('click',function () {
        console.log("window captrue")
    },true)

    document.addEventListener('click',function () {
        console.log("document captrue")
    },true)

    document.documentElement.addEventListener('click',function () {
        console.log("html captrue")
    },true)

    document.body.addEventListener('click',function () {
        console.log("body captrue")
    },true)

    ev.addEventListener('click',function () {
        console.log("ev captrue")
    },true)
</script>

冒泡具体流程与捕获具体流程相反

目标元素 ...> body > html > document > window

Event对象的常见应用

event.preventDefault()
阻止默认事件，比如a标签加上这个事件就可以阻止默认跳转的行为

event.stopPropagation()
阻止冒泡行为，比如父级元素和子元素各绑定一个事件，想要单击子元素执行事件，如果不阻止冒泡，
当单击子元素的时候，按照冒泡的原理，父元素也会响应

event.stopImmediatePropagation()
比如一个按钮绑定了两个click事件1和2，想要通过优先级的方式第一个响应的函数是a，第二个响应的函数是b，依次注册了a,b两个事件，
想要在执行a之后就不要在执行b了，就可以在a的函数中写上这个方法就可以阻止函数b

event.currentTarget
比如事件委托或者使用jquery时候，一个for循环给一个dom注册了很多事件，问怎么优化，这个其实就是想让你使用事件代理，就是把子元素
的事件代理都转移到父级元素上，绑定一次事件就可以了，做响应的时候就要区分当前是哪个元素被点击，如一个父元素底下有十个子元素，
然后不想通过for循环给10个子元素都绑定click事件，那么就需要放在父级元素上绑定一次click事件就可以了，在这个响应函数中，要判断这10个子元素是哪个
被点击了，这个时候就要使用event.target，表示当前被点击的元素，在早期的IE版本中不支持这个属性。event.currentTarget就指定父级元素

event.target

自定义事件

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

ev.dispatchEvent(eve)

(ev是一个dom节点)
（customEvent和Event一样，只是多了一项可以自定义参数的功能）

自定义事件演示代码

<div id="ev">
    自定义事件
</div>
<script>
    var ev = document.getElementById('ev')
    var eve = new Event('test')
    ev.addEventListener('test',function () {
        console.log('test dispatch')
    })
    setTimeout(function () {
        ev.dispatchEvent(eve)//当1s之后执行自定义事件
    },1000)
</script>