DOM事件

DOM事件级别

    DOM0:ele.onclick=function(){}
    DOM2:ele.addEventListener("click",function(){},false)
    DOM3:ele.addEventListener("keyup",function(){},false)// 增加事件类型

DOM事件模型

• 冒泡：从事件元素向上
• 捕获：从上到下 ele.addEventListener(“click”,function(){},true)

DOM事件流

• 捕获
• 目标阶段
• 冒泡

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

• 第一个接收 是window
• document
• html标签（document.documentElement）
• body
• 目标元素

<style>
    #div {
        width: 200px;
        height: 200px;
        background-color: red;
    }
</style>
<div id="div">目标元素</div>
<script>

    var ele = document.getElementById('div')
    window.addEventListener('click', function () {
        console.log('window capture')
    }, true)

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

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

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

    ele.addEventListener('click',function(){
        console.log('ele capture')
    },true)





</script>

event对象的常见应用

• 阻止默认事件
• 阻止冒泡
• event.stopImmediatePropagation() 禁止绑定到同一元素上的 其他事件
• event.currentTarget() 当前绑定事件的元素
• event.target() 可用于事件代理中获取当前发生事件的元素

自定义事件

var ev = document.querySelector('#div')
var eve=  new Event('custome');
ev.addEventListener('custome',function(){
    console.log("custome")
})
ev.dispatchEvent(eve)