DOM事件的级别
DOM0 : element.onclick = function () {}
DOM2: element.addEventListener('click', function (){}, false)
DOM3: element.addEventListener('keyup', function (){}, false)
事件模型
捕获与冒泡
事件流
事件通过捕获到达目标元素,然后从目标元素冒泡到window对象
DOM事件捕获的具体流程
window -> document -> html (通过document.documentElement可以获取HTML节点) -> body -> .... -> 目标元素
冒泡流程
跟捕获流程相反
Event对象
event.preventDefault() 阻止默认行为
event.stopPropagation() 阻止冒泡
event.stopImmediatePropagation() 当绑定了两个事件,触发事件A时加入这个函数可以阻止事件B的触发
event.currentTarget 绑定事件的DOM
event.target 当前鼠标点击的DOM
自定义事件
var eve = new Event('custome')
ev.addEventListener('custome', function(){
console.log('custome')
})
ev.dispatchEvent(eve)
CustomEvent 跟 Event用法一样,区别在于前者可以添加参数