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>