浅析js中事件冒泡与事件捕获

目录

• 01-事件冒泡
  
• 1.1-事件冒泡介绍
  
• 1.2-事件冒泡利用（事件委托）
  
• 1.3-事件冒泡影响 与 阻止事件冒泡
  
• 02-事件捕获
  
• 1.1-事件捕获介绍
  
• 1.2-事件三个阶段
  

01-事件冒泡

1.1-事件冒泡介绍

本小节知识点：介绍什么是事件冒泡

• 事件冒泡：如果一个元素的事件被触发，那么他的所有父级元素的同名事件也会被依次触发
  

元素->父元素->body->html->document->window

事件冒泡一直存在，只不过以前我们没有给父级元素加同名事件

1.2-事件冒泡利用（事件委托）

本小节知识点：介绍事件冒泡的好处

​ 事件冒泡好处：如果想给父元素的多个子元素添加事件，我们可以只需要给父元素添加事件即可，然后

通过获取事件源(e.target)就可以得知是哪一个子元素触发了这个事件

    
    
    
    
    



    

        
百里守约1
        
百里守约2
        
百里守约3
    

    

1.3-事件冒泡影响 与 阻止事件冒泡

• 本小节知识点：介绍事件冒泡的影响
  

事件冒泡会导致需求冲突：例如我想要添加一个功能，弹出登录窗之后点击body空白区域让登陆窗消失
此时a标签弹出登录窗的点击事件会触发body的点击事件，导致登陆窗一出来就消失

解决方案：阻止事件冒泡（下一小节知识点）

• 本小节知识点：阻止事件冒泡

阻止事件冒泡：让同名事件不要在父元素中冒泡（触发）

 * 说人话：点击一个元素只会触发当前元素的事件，不会触发父元素的同名事件

语法： 事件对象.stopPropagation() IE8及之前不支持

事件对象.cancelBubble = true IE8之前支持

注意：如果想要阻止事件冒泡，一定要在触发事件的函数中接收事件对象

    
    
    
    
    



    点我显示登录框

    

        X
        用户名: 

        密码: 

        登录
    

    

02-事件捕获

1.1-事件捕获介绍

本小节知识点：事件捕获

• 1.事件冒泡：从触发事件元素，一级一级往上找父元素触发同名事件，如果有就触发
• 2.事件捕获：从最顶级的父元素一级一级往下找子元素触发同名事件，直到触发事件的元素为止

事件捕获与事件冒泡触发事件的顺序完全相反

• 3.事件捕获，只能通过addEventListener并且参数写true才是事件捕获
  

其他都是冒泡（不是通过addEventListener添加、addEventListener参数为false）

• 4.事件对象.stopPropagation() 除了可以阻止冒泡还可以阻止捕获
• 5.IE8及以前没有捕获！
  

1.2-事件三个阶段

本小节知识点：介绍事件的三个阶段

• 1.事件一共有三个阶段：事件的执行顺序
  

1–捕获阶段 ：
2–目标阶段 ：
3–冒泡阶段 ：

• 2.事件对象.eventPhase 可以获得触发这个事件时，到底是哪个阶段
• 3.先从最顶级往下一级一级捕获，然后到目标的捕获，目标的冒泡，再一级一级往上冒泡

    
    
    
    



    
我是小马哥

    


```

到此这篇关于浅析js中事件冒泡与事件捕获的文章就介绍到这了,更多相关js事件冒泡与事件捕获内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！