window.addEventListener('resize')和window.onresize
时间: 2023-12-05 13:36:43 浏览: 45
window.addEventListener('resize')和window.onresize都是用来监听窗口大小变化的事件,但是它们有一些区别。
window.addEventListener('resize')可以添加多个事件监听器,而window.onresize只能添加一个事件监听器。
window.addEventListener('resize')可以通过removeEventListener()方法来移除事件监听器,而window.onresize无法移除事件监听器。
window.addEventListener('resize')可以在任何时候添加事件监听器,而window.onresize只能在页面加载完成后添加事件监听器。
相关问题
window.onresize和resize
`window.onresize` 和 `resize` 事件都是在窗口大小改变时触发的事件,但是它们有一些区别。
`window.onresize` 是 `window` 对象的一个属性,它表示在窗口大小改变时需要执行的处理函数。可以使用 `window.onresize` 属性来添加或删除事件处理函数,例如:
```javascript
window.onresize = function() {
// 窗口大小改变时执行的代码
}
```
`resize` 事件是 `Window` 对象的一个事件,它表示窗口大小改变时触发的事件。可以使用 `window.addEventListener` 方法来添加或删除 `resize` 事件的处理函数,例如:
```javascript
window.addEventListener('resize', function() {
// 窗口大小改变时执行的代码
})
```
相比之下,使用 `addEventListener` 方法添加事件处理函数可以多次添加不同的处理函数,而使用 `onresize` 属性只能设置一个处理函数,并且最后设置的函数会覆盖之前设置的函数。
window.onresize
Vue 中可以使用 $nextTick() 函数来在窗口大小改变时执行代码。例如:
```
mounted() {
window.addEventListener('resize', this.handleResize);
},
methods: {
handleResize() {
this.$nextTick(() => {
// 在这里执行代码
});
}
}
```
也可以使用vue-resize这个库来监听窗口变化。
```
import Vue from 'vue'
import VueResize from 'vue-resize'
Vue.use(VueResize)
```
然后可以在template中绑定事件
```
<vue-resize @resize="onResize"></vue-resize>
```
在methods中定义onResize就可以了
```
methods: {
onResize(event) {
console.log(event)
}
}
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)