addEventListener 的使用

例如監聽頁面滾動條的位置

1、html 中定義（獲取div高度）

<div class="content" >
  <div class="approval-list" ref="scrollBox"> </div>
</div>

2、mounted() 方法

【注 1】監聽div滾動條的高度：創建一個監聽就要記得銷毀，否則多次加載導致頁面奔潰

  mounted () {
    this.$nextTick(() => {
      this.$refs.scrollBox.addEventListener('scroll', this.handleScroll)
    })
  },

【注 2】由於 mounted() 階段 dom 節點才被渲染，因此如果初始化高度、獲取高度等操作應該寫在 mounted() 方法中

 let h1 = this.$refs.scrollBox.offsetHeight  // 500 （沒有單位）
 let h2 = this.$refs.scrollBox.style.height  // 500px （以‘px’為單位）

 

3、methods() 方法

  methods: {
    // 獲取滾動條高度
    handleScroll() {
      localStorage.setItem('scrollBox', this.$refs.scrollBox.scrollTop)
    },
    // 還原滾動條高度
    getBeforeScroll() {
      let _this = this
      _this.$nextTick(function () {
        var scrollTop = Number(localStorage.getItem("scrollBox"))
        if (scrollTop) {
          this.$refs.scrollBox.scrollTop = scrollTop
        }
      });
    },
  },

4、addEventListener事件 注冊了就一定要記得銷毀，在 beforeDestroy() 中銷毀事件。

 beforeDestroy () {
    this.$refs.scrollBox.removeEventListener('scroll', 
    this.handleScroll)
  }

這是對document的監聽事件是一個全局的操作，如果沒有手動的去取消這個監聽那么它的監聽機制也就一直存在着，這樣每次進入這個頁面也就意味着都會增加一次對它的監聽。多次之后自然頁面也就會卡死了。

 

5、【注】如果addEventListener()事件 監聽方法不執行

檢查幾個問題：

1. 監聽滾動的元素結點是否給了height和overflow:scroll

2. 監聽滾動的元素結點的父元素結點是否設置了高度

例如css代碼如下：

<style scoped>
.content {
  height: 100%;
}
.approval-list {
  overflow-y: auto;
}
</style>