Day3 WebAPIs:事件流

3.事件流

事件流指的是事件完整执行过程中的流动路径

3.1 事件流与两个阶段说明

事件捕获和事件冒泡（冒泡用的居多）

3.2 事件捕获（了解）

DOM.addEventListener(事件类型，事件处理函数，是否使用捕获机制)

3.3 事件冒泡（重点）

• 当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中一次被触发。这一过程被称为事件冒泡。

• 简单理解：当一个元素触发事件后，依次向上调用所有父级元素的同名事件

3.4 阻止冒泡

• 问题：因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素

• 需求：若想把事件就限制在当前元素内，就需要阻止事件冒泡

• 前提：组织事件冒泡需要拿到事件对象

• 语法：事件对象.stopPropagation()

小知识点：阻止默认行为 e.preventDefault()

3.5 解绑事件

• on事件方式，直接使用null覆盖就可以实现事件的解绑

• 语法：

注意：匿名函数无法被解绑

• 鼠标经过事件的区别

mouseover和mouseout会有冒泡效果

mouseenter 和mouseleave没有冒泡效果（推荐）

3.6 事件委托

事件委托是利用事件流的特征解决一些开发需求的知识技巧

• 优点：减少注册次数，可以提高程序性能

• 原理：事件委托利用的是事件冒泡的特点

  • 给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件

  • 如何找到真正出发的元素：事件对象.target.tagName

​

    
    
    

​

    

        
第1个孩子
        
第2个孩子
        
第3个孩子
        
第4个孩子
        
第5个孩子
        
我不需要变色
    
    

​

​

3.7 其他事件

3.7.1 页面加载事件

• 事件名：load

监听页面所有资源加载完毕：给window添加load事件

window.addEventListener('load',function(){

//执行代码

})

​

    
    
    
    

​

    点击

​

• 事件名：DOMContentLoaded

监听页面DOM加载完毕：给document添加DOMConentloaded事件

3.7.2元素滚动事件

滚动条在滚动的时候触发的事件

• 事件名：scroll

window.addEventListerner('scroll',function(){ })

• scrollTop和scrollLeft（属性）

window.addEventListener('scroll',function(){
    const n=document.documentElement.scrollTop
    console.log(n)
})

检测页面滚动的头部距离（被卷去的头部）用这个属性：document.documentElement.scrollTop

（了解）

3.7.3 页面尺寸事件

获取元素可见部分宽高（不包含边框，margin,滚动条等）

clientWidth和clientHeight

​

    
    
    
    

​

    

    

​

3.8 元素尺寸与位置

• 获取宽高

获取元素自身的宽高、包含元素自身设置的宽高、padding、border

offsetWidth和offsetHight

总结：得到元素内容+padding+border的宽高

• 获取位置

1.获取元素距离自己定位父级元素的左、上距离

offsetLefth和offsetTop注意是只读属性

总结：以带有定位的父级位置为准，如果没有则以 文档左上角 为准

2.element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置

总结：

属性	作用	说明
scrollLeft和scrollTop	被卷去的头部和左侧	配合页面滚动来用，可读写
clientWidth和clientHeight	获得元素宽度和高度	不包含border,margin,滚动条 用于js获取元素大小，只读属性
offsetWidth和offsetHeight	获得元素宽度和高度	包含border,padding,滚动条等，只读
offsetLeft和offsetTop	获取元素距离自己定位父元素的左、上距离	获取元素位置的时候使用，只读属性