window.addEventListener(event, function, useCapture);

334 阅读1分钟

1、window.addEventListener(event, function, useCapture) 简介

1.event 是事件类型的字符串,例如"click”、"mouseover"或"submit"、“scroll-滚动”

2.function 是事件外理程序函数

3.useCapture 是一个可选的布尔值,表示事件是在捕获阶段还是在冒泡阶段处理,如果省略此参数,则默认为 false,即在冒泡阶段处理事件。

2、实例:监听页面的滚动——window.addEventListener('scroll',callback)

// 获取滚动条高度
const getScrollTop = () => {
  let scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
  return scrollTop
}
// 监听页面的滚动
const initScroll = () => {
  // 定义滚动类型(上/下)
  let scrollType = 0
  let initScrollTop = getScrollTop()
    
   // 监听页面的滚动
  window.addEventListener("scroll", () => {

    let currentScrollTop = getScrollTop()
    // console.log(initScrollTop, '初始滚动条高度');
    // console.log(currentScrollTop, '当前滚动条高度');

    if (currentScrollTop > initScrollTop) {
      // 往下滚动
      scrollType = 1
    } else {
      // 往上滚动
      scrollType = 0
    }
    initScrollTop = currentScrollTop
    console.log(scrollType, '滚动类型: 1-往下滚动; 0-往上滚动');

    if (scrollType == 1 && currentScrollTop >= 100) {
      showHeader.value = false
    } else {
      showHeader.value = true
    }
  }, true)


}

// onMounted 执行
onMounted(() => {
  initScroll()
})