1.基本概念:DOM事件的级别

DOM0

test
element.onclick=function(){}

2. DOM2

```
//false表示事件句柄在冒泡阶段执行
 element.addEventListener('click',function(){},false)
```

3 DOM3

```
//DOM3新增了事件类型，鼠标、键盘事件等
element.addEventListener("keyup",function(){},false)
```

2.DOM事件模型

事件模型指的就是捕获和冒泡。捕获从上往下，冒泡从下往上。

3.DOM事件流

事件流指的是浏览器在当前页面与用户做交互的过程，比如:点击鼠标左键，这个左键是怎么传到这个页面上，这就是事件流。
完整事件流分三个阶段: 1.捕获目标阶段冒泡

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

window > document > html > body >...(html结构) > 目标元素

5.Event对象的常见应用

event.preventDefault() 阻止元素发生默认的行为。

```
Go to W3Cschool.cc
 $("a").click(function(event){
    event.preventDefault(); //阻止a标签页面跳转默认行为
  });
```

2. event.stopPropagation() 阻止冒泡行为

```
parent.addEventListener("click",function(){
console.log("parent");
},false);
span.addEventListener("click",function(){
    event.stopPropagation(); 
    console.log("span");
},false)
```

3 event.stoplmmediatePropagation()

阻止冒泡和这个元素绑定的同类型事件

```
html>

    
        
    
    
        
            paragraph
        
        
    

```

- 4 event.currentTaget

currentTarget始终是监听事件者

- 5 event.target

而target是事件的真正触发者

6.自定义事件

html>


    
    
    
        
        目标元素

ITPub博客

前端面试必备技巧——DOM事件类

最新文章