Vue 註冊 DOM Event | 點燈坊

Vue 並沒有包括所有 DOM Event，但我們可使用 addEventListener() 與 removeEventListener() 自行註冊 DOM Event 到 Vue。

Version

Vue 2.6.11

addEventListener()

對 browser 做 resize 時，在 Vue 也能處理 resize event。

<template>
  <div>Vue</div>
</template>

<script>
let onResize = function() {
  console.log(innerWidth, innerHeight)
}

let mounted = function() {
  addEventListener('resize', this.onResize)
}

let beforeDestroy = function() {
  removeEventListener('resize', this.onResize)
}

export default {
  methods: {
    onResize
  },
  mounted,
  beforeDestroy
}
</script>

19 行

methods: {
  onResize
},

在 methods 宣告 onResize() 處理 resize event。

10 行

let mounted = function() {
  addEventListener('resize', this.onResize)
}

在 mounted hook 使用 addEventListener() 將 onResize() 註冊到 resize event。

14 行

let beforeDestroy = function() {
  removeEventListener('resize', this.onResize)
}

在 beforeDestroy hook 使用 removeEventListener() 將 onResize() 從 resize event 註銷。

第 6 行

let onResize = function() {
  console.log(innerWidth, innerHeight)
}

可在 onResize() 處理 resize event，可直接使用 innerWidth 與 innerHeight 讀取 resize 後的寬高。

Conclusion

• 儘管 Vue 沒有包含所有 DOM event，但透過此種方式我們也可在 Vue 處理