vue项目中销毁window.addEventListener事件监听解析

目录
  • 销毁window.addEventListener事件监听
  • window.addEventListener监听scroll事件
    • 解决办法
    • 使用throttle出现的新问题
    • 最后代码

销毁window.addEventListener事件监听

今天在做项目的过程中，组件中调用iframe时，由于在组件的created方法中写了监听，用于接收iframe发来的信息，但是在组件销毁的时候并没有去掉监听，导致组件创建几次，监听方法就会执行几次，特此记录

created() {
    window.addEventListener('message', this.receiveMessage, false)
  },
beforeDestroy() { // 在组件生命周期结束的时候销毁。
    window.removeEventListener('message', this.receiveMessage, false)
  },

window.addEventListener监听scroll事件

今天想在vue的项目里面用下拉加载，然后就直接写了:

mounted () {
    window.addEventListener( 'scroll', this.scrollHander)
},
methods: {
    scrollHander () {  }
}

但是我发现我切换路由以后依旧其他页面也触发了scrollHandler函数，然后我想到使用了vue-router做的spa项目，window对象不变的，所以需要在每次使用后销毁。

解决办法

我回去看了下vue文档的生命周期，看到了destroyed，然后直接在这个周期内销毁就可以了。

mounted () {
    window.addEventListener('scroll', this.scrollHander)
},
destroyed () {
    window.removeEventListener('scroll', this.scrollHander)
}

使用throttle出现的新问题

下拉加载一般需要配合throttle限流函数(原理可以看这里)来避免频繁触发，所以优化代码成这样：

mounted () {
    let  _this = this
    window.addEventListener('scroll', throttle(() => {
        _this.scrollHander()
    },200 ))
},

然后发现没法用removeEventListener了，因为这个函数第二个参数不接受匿名函数。

最后代码

用一个变量中转下

mounted () {
    let  _this = this
    this.throttleLoad = throttle(() =>{
        _this.scrollHander()
    },200)
    window.addEventListener('scroll', this.throttleLoad)
},
destroyed () {
    window.removeEventListener('scroll',this.throttleLoad) 
},
methods: { 
    scrollHander () { }
}

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决vue 给window添加和移除resize事件遇到的坑

    在vue项目中需要监听window窗口变化来时时计算图片的高度,于是就加了一个监听事件:确实监听到了,但是在离开当前页面进入其他页面改变窗口大小时发现window还是处于监听状态,即移除监听事件并没有生效. //之前的写法,这样写移除监听事件无效 mounted(){ window.addEventListener('resize',()=>{ '改变窗口大小时需要做的处理' }); }, beforeDestroy() { window.removeEventListener("resi

  • Vuejs使用addEventListener的事件如何触发执行函数的this

    Vuejs使用addEventListener的事件如何触发执行函数的this

    目录 使用addEventListener事件触发执行函数的this 如下面的例子 addEventListener中事件函数的this指向问题 看代码 代码2 使用addEventListener事件触发执行函数的this 在普通的dom操作中,若是使用addEventListener 如下面的例子 <!-- index.html --> <!DOCTYPE html> <html lang="en"> <head> <meta

  • vue中的addEventListener和removeEventListener用法说明

    vue中的addEventListener和removeEventListener用法说明

    目录 addEventListener和removeEventListener用法说明 1.添加监听事件(addEventListener) 2.移出监听事件(removeEventListener) 使用addEventListener添加事件.removeEventListener移除事件 添加事件 移除事件 addEventListener和removeEventListener用法说明 1.添加监听事件(addEventListener) 语法:element.addEventListe

  • vue中window.addEventListener(‘scroll‘, xx)失效的解决

    目录 window.addEventListener(‘scroll‘, xx)失效解决 window.addEventListener scroll在移动端无效问题 window.addEventListener(‘scroll‘, xx)失效解决 多次尝试都无法获取到滚动事件,后来加上true之后就可以了 window.addEventListener('scroll', this.clintHeight, true) window.addEventListener scroll在移动端无效

  • vue项目中销毁window.addEventListener事件监听解析

    目录 销毁window.addEventListener事件监听 window.addEventListener监听scroll事件 解决办法 使用throttle出现的新问题 最后代码 销毁window.addEventListener事件监听 今天在做项目的过程中,组件中调用iframe时,由于在组件的created方法中写了监听,用于接收iframe发来的信息,但是在组件销毁的时候并没有去掉监听,导致组件创建几次,监听方法就会执行几次,特此记录 created() {     window

  • vue 实现移动端键盘搜索事件监听

    1.首先注意,input的type="serch" <input @keypress="searchGoods" type="serch" placeholder="搜索商品"> 2.监听keypress事件 (1)KeyDown.KeyUp 事件 这些事件是当一个对象具有焦点时按下 ( KeyDown ) 或松开 ( KeyUp ) 一个键时发生的.(要解释 ANSI 字符,应使用 KeyPress 事件.) (

  • 解决vue项目中type=”file“ change事件只执行一次的问题

    问题描述 在最近的项目开发中遇到了这样的一个问题,当我上传了一个文件时,我将获取到的文件名清空后,却无法再次上传相同的文件 <template> <div class="hello"> <input type="button" value="上传文件" name="" id="" @click="updata"> <input type=&quo

  • 详谈Java中的事件监听机制

    鼠标事件监听机制的三个方面: 1.事件源对象: 事件源对象就是能够产生动作的对象.在Java语言中所有的容器组件和元素组件都是事件监听中的事件源对象.Java中根据事件的动作来区分不同的事件源对象,动作发生在哪个组件上,那么该组件就是事件源对象 2.事件监听方法: addMouseListener(MouseListener ml) ;该方法主要用来捕获鼠标的释放,按下,点击,进入和离开的动作:捕获到相应的动作后,交由事件处理类(实现MouseListener接口)进行处理. addAction

  • JS 事件绑定、事件监听、事件委托详细介绍

    在JavaScript的学习中,我们经常会遇到JavaScript的事件机制,例如,事件绑定.事件监听.事件委托(事件代理)等.这些名词是什么意思呢,有什么作用呢? 事件绑定 要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数.所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称. 在JavaScript中,有三种常用的绑定事件的方法: 在DOM元素中直接绑定: 在JavaScript代码中绑定: 绑定事件监听函数. 在DOM中直接绑定事件

  • 如何在Vue项目中添加接口监听遮罩

    一.业务背景 使用遮罩层来屏蔽用户的非正常操作,是前端经常使用的方式.但是在一些项目中,并没有对遮罩层进行统一管理,这就会造成如下的问题: (1)所有的业务组件都要引入遮罩层组件,也就是每个.vue业务组件,都在template中引入了Mask组件.组件在项目的各个角落都存在,不利于管理,代码极度冗余. (2)Mask组件都分散到业务的各个角落,所以控制是否显示遮罩层的变量也散在业务组件中.比如使用maskShow来控制是否展示遮罩层时,一个较为复杂的项目中会产生200+的maskShow变量.

  • Vue项目中数据的深度监听或对象属性的监听实例

    众所周知,vue项目中对数据的监听,提供了一个很好的钩子watch,watch可以极其方便的监听我们常用数据类型值的变化,但通常当我们想监听一个对象中,某个属性值的变化时,很难达到我们预期的效果.根据vue的文档,不难发现,使用数据的深度监听来达到这一效果.具体实现如下: watch: { evlist: { handler(val, oldVal) { this.isTeam = val.projectParty; this.pjtid = val.pjtid; this.isFinish =

  • 详解vue中v-on事件监听指令的基本用法

    一.本节说明 我们在开发过程中经常需要监听用户的输入,比如:用户的点击事件.拖拽事件.键盘事件等等.这就需要用到我们下面要学习的内容v-on指令. 我们通过一个简单的计数器的例子,来讲解v-on指令的使用. 二. 怎么做 定义数据counter,用于表示计数器数字,初始值设置为0 v-on:click 表示当发生点击事件的时候,触发等号里面的表达式或者函数 表达式counter++和counter--分别实现计数器数值的加1和减1操作 语法糖:我们可以将v-on:click简写为@click 三

  • vue事件监听函数on中的this指针域使用

    目录 事件监听函数on中this指针域 vue中的this问题 在回调函数之前重新将this赋值 使用箭头函数 事件监听函数on中this指针域 使用eventBus在两个组件A,B之间通讯: //定义全局eventBus用于事件传递 var bus = new Vue(); //A组件 var A = Vue.component({     ...          data:{         dataA:1,     },     //在钩子函数中将监听_event事件     creat

  • 在vue项目中利用popstate处理页面返回的操作介绍

    需求背景:项目中需要做一个返回确认,避免用户误触返回键而退出当前页面. 原理:利用history和浏览器刷新popstate状态 实现: 1.在mounted() 阶段判断并添加popstate事件监听,History.pushState()(参数:一个状态对象,一个标题(现在被忽略了),以及一个可选的URL地址), 注意:IOS版的微信,是会立即触发popstate事件,所以需要pageshow做下处理,(当一条会话历史记录被执行的时候将会触发页面显示(pageshow)事件.(这包括了后退/

随机推荐