DOM事件类

1、DOM事件的级别

(DOM1标准没有相关事件)

DOM0级事件  element.onclick=funtion(){}

DOM2级事件  element.addEventListener('click',function(){}, false)  默认值为 false, 即冒泡传递,当值为 true 时, 事件使用捕获传递 

DOM3级事件  element.addEventListener('keyup',function(){}, true)  多增加了很多键盘事件

 

2、DOM事件模型

捕获事件模型

冒泡事件模型

 

3、DOM事件流

捕获(自上而下 window到目标事件)-->目标阶段-->冒泡(自下而上 目标事件到window对象)

window-->document-->html(document.documentElement)-->body--> ....-->目标对象

 

 

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

 

5、Event对象的常见应用

event.preventDefault() 阻止默认事件

event.stopPropagation() 阻止冒泡(点击子元素 不希望父元素跟着响应)

event.stopImmediatePropagation() 

event.currentTarget(当一个元素有很多子元素 需要有点击事件 直接在父级元素上绑定事件即可 当前锁绑定的事件对象)

event.target

 

 

6、自定义事件

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

ev.dispatchEvent(eve); // 触发

 

posted @ 2021-04-05 22:54  水晴  阅读(46)  评论(0)    收藏  举报