Web API 第三天

事件流

目录

• • 事件流
    • 事件捕获
    • 事件冒泡
      • 阻止冒泡
    • 事件解绑
    • 两种注册事件的区别 接第二天1.1的区别
    • 事件委托
      • 案例：tab栏切换（事件委托版）
    • 阻止默认行为
• 其他事件
  • 页面加载事件
    • load事件
    • DOMContentLoaded事件
  • 页面滚动条事件
    • scroll事件
      • 获取位置
      • 滚动到指定的坐标
      • 案例：返回顶部
  • 页面尺寸事件
    • resize事件
      • 获取元素可视宽高
      • 元素尺寸于位置
  • 案例：电梯导航 （未完待续..）

两个阶段：事件捕获、事件冒泡

事件捕获

先执行父盒子事件再去执行子盒子事件 由外到里

事件冒泡

先执行子盒子事件再去执行父盒子事件 由里到外

addEventListener第三个默认为false，冒泡模式

阻止冒泡

问题：因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素
需求：若想把事件就限制在当前元素内，就需要阻止事件冒泡
前提：阻止事件冒泡需要拿到事件对象
语法：事件对象.stopPropagation()
注意：此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效

son.addEventListener('click', function (e) {
    alert('我是儿子')
    // 事件对象.stopPropagation()
    e.stopPropagation()
})

事件解绑

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

addEventListener方式，必须使用：removeEventListener(事件类型, 事件处理函数, [获取捕获或者冒泡阶段])

匿名函数无法解绑

function fn() {
    alert('点击了')
}
btn.addEventListener('click', fn)
// L2 事件移除解绑
btn.removeEventListener('click', fn)

两种注册事件的区别 接第二天1.1的区别

• 传统on注册（L0）
  • 同一个对象,后面注册的事件会覆盖前面注册(同一个事件)
  • 直接使用null覆盖偶就可以实现事件的解绑
  • 都是冒泡阶段执行的
• 事件监听注册（L2）
  • 语法: addEventListener(事件类型, 事件处理函数, 是否使用捕获)
  • 后面注册的事件不会覆盖前面注册的事件(同一个事件)
  • 可以通过第三个参数去确定是在冒泡或者捕获阶段执行
  • 必须使用removeEventListener(事件类型, 事件处理函数, 获取捕获或者冒泡阶段)
  • 匿名函数无法被解绑

事件委托

• 给多个元素注册事件，之前使用的是for循环

现在可以使用事件委托，注册一次事件，完成以上效果

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

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

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

const ul = document.querySelector('ul')
ul.addEventListener('click', function (e) {
    // alert(11)  // 点击li就会弹出
    // this.style.color = 'red'  // 点击li，所有li变红
    // console.dir(e.target) // target就是我们点击的那个对象（父元素的所有子元素，不止li）
    // e.target.style.color = 'red' // 点击父元素中的其他元素(如div)也会变色
    // 我的需求，我们只要点击li才会有效果
    // console.dir(e.target) // 显示指定JavaScript对象的属性
    
    // e.target.tagName 找到真正的触发对象
    if (e.target.tagName === 'LI') {
        e.target.style.color = 'red'
    }
})

案例：tab栏切换（事件委托版）

• e.target是我们点击的对象，而非this

  e.target.classList.add('active')
  

• 下面 大盒子模块

  const i =  +e.target.dataset.id // 字符串转数字
  // 排他思想
  document.querySelector('.tab-content .active').classList.remove('active')
  // 对应的大盒子 添加 active 两种方式
  // document.querySelector(`.tab-content .item:nth-child(${i + 1})`).classList.add('active')
  items[i].classList.add('active') // 需要const items = document.querySelectorAll('.tab-content .item')
  

阻止默认行为

在事件流的任何阶段调用preventDefault()都会取消事件，这意味着任何通常被该实现触发并作为结果的默认行为都不会发生。

其他事件

页面加载事件

load事件

加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件(与DOMContentLoaded区分)

• 为什么要学？

  • 有些时候需要等页面资源全部处理完了做一些事情
  • 老代码喜欢把 script 写在 head 中，这时候直接找 dom 元素找不到

• 事件名：load（等待加载）

• 监听页面所有资源加载完毕：

  • 给 window 添加 load 事件

    window.addEventListener('load', function () {
        const btn = document.querySelector('button')
        btn.addEventListener('click', function () {
            alert(11)
        })
    })
    

  • 给也可以如img等添加load事件

不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件

DOMContentLoaded事件

• 当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像等完全加载(与load区分)

• 事件名：DOMContentLoaded

• 监听页面DOM加载完毕：

  • 给 document 添加 DOMContentLoaded 事件

    document.addEventListener('DOMContentLoaded', function () {
        const btn = document.querySelector('button')
        btn.addEventListener('click', function () {
            alert(11)
        })
    })
    

页面滚动条事件

scroll事件

• 滚动条在滚动的时候持续触发的事件

• 为什么要学？

  很多网页需要检测用户把页面滚动到某个区域后做一些处理， 比如固定导航栏，比如返回顶部

• 事件名：scroll

• 监听整个页面滚动：

  // 页面滚动事件
  window.addEventListener('scroll', function () {
      // 执行的步骤
  }
  

  • 给 window 或 document 添加 scroll 事件

• 监听某个元素的内部滚动直接给某个元素加即可

• 使用场景：

  • 我们想要页面滚动一段距离，比如100px，就让某些元素
  • 显示隐藏，那我们怎么知道，页面滚动了100像素呢？

• 就可以使用scroll 来检测滚动的距离~~~

获取位置

• scrollLeft和scrollTop
  • 获取被卷去的大小
  • 获取元素内容往左、往上滚出去看不到的距离
  • 这两个值是可读写的（可以读取和修改，与offsetTop区分）

• 获取html：

// 获取html
- document.documentElement
// scrollTop
+ Const n = document.documentElement.scrollTop

滚动到指定的坐标

• 方法名：scrollTo()

• 语法：元素.scrollTo()

• //让页面滚动到y轴1000像素的位置
  window.scrol1To(0,1000 )
  

案例：返回顶部

• 先绑定点击事件
• 两种方法：
  • 可读写的属性scrollTop
  • scrollTo()方法

const backTop = document.querySelector('#backTop')
backTop.addEventListener('click', function () {
    // scrollTop可读写
    // document.documentElement.scrollTop = 0
    
    // window.scrollTo(x, y)
    window.scrollTo(0, 0)
})

页面尺寸事件

resize事件

// resize 浏览器窗口大小发生变化的时候触发的事件
window.addEventListener('resize', function () {
    let w = document.documentElement.clientWidth
    console.log(w)
})

获取元素可视宽高

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

• clientWidth和clientHeight
  • 内容 + padding

元素尺寸于位置

• 使用场景：

  • 前面案例滚动多少距离，都是我们自己算的，最好是页面滚动到某个元素，就可以做某些事
  • 简单说，就是通过js的方式，得到元素在页面中的位置
  • 省去计算，页面滚动到这个位置，就可以做某些操作

• 尺寸

  

  • 获取宽高

    • offsetWidth和offsetHeight
      • 获取元素的自身宽高、包含元素自身设置的宽高、border、padding、滚动条等
      • 内容 + padding + border
      • 获取出来的是数值,方便计算

    获取的是可视宽高, 如果盒子是隐藏的,获取的结果是0

  • 获取位置：

    • offsetLeft和offsetTop
      • 获取元素距离自己定位父级元素的左、上距离
      • offsetLeft和offsetTop 注意是只读属性(注意与scrollTop区分)

案例：电梯导航 （未完待续..）

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

尽量在scroll事件里面获取被卷去的距离