DOM事件类(面试过程中经常出的题目)

原创 小Q 随笔 面试 124阅读 20 天前 举报

基本概念:DOM事件的级别

比如这样问:请用dom2事件如何如何?

dom事件的模型(冒泡或者捕获)

dom事件流

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

Event事件的常见应用

dom事件级别

dom0:ele.onclick=function(){}

dom2:ele.addEventListener('click',function(){},false)

dom3:ele.addEventListener('keyup',function(){},false)

dom3就是事件类型增加了很多

事件模型

捕获 冒泡

事件流

三个阶段:

1、捕获
2、目标阶段(通过捕获到达目标元素)
3、通过目标元素上传到window对象(冒泡)

描述dom事件捕获的具体流程(从上到下的过程)

window->doc->html->body->...->目标元素
<div id="ev">123</div>
var ev=document.getElementById('ev');

window捕获

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

document捕获

document.addEventListener('click',function(){
console.log('doc');
},true)
html捕获

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

body捕获

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

ev捕获

ev.addEventListener('click',function(){
console.log('ev');
},true)

注意:
1、即使位置颠倒,执行顺序仍然是window->doc->html->body->...->目标元素
2、将true改为false就是冒泡

冒泡的具体流程(从下到上)

event对象的常见引用(事件响应)

以下5个为比较重要的
阻止默认事件
event.preventDefault()

阻止冒泡行为
event.stopPropagation()

事件响应优先级可用这个方法
event.stopImmediatePropagation()

当前所绑定的事件
event.currentTarget

当前被点击的元素
event.target

自定义事件

一:通过new Event来声明一个自定义事件
可以把eve事件当作一个click一样的普通事件

var eve=new Event('custome');

二、ev是dom节点
通过dom2这种事件注册的方式绑定事件名称

ev.addEventListener('custome',function(){
console.log('custome');
})

三、触发事件
通过ev这个dom节点,dispatchEvebt这个api来触发这个eve事件

ev.dispatchEvent(eve);

event不能绑定数据
CustomEvent可以

window.addEventlistener('click',function(){},true)
第三个值默认为false

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复