返回顶部
首页 > 资讯 > 精选 >vue中的addEventListener和removeEventListener怎么使用
  • 162
分享到

vue中的addEventListener和removeEventListener怎么使用

2023-07-02 13:07:09 162人浏览 独家记忆
摘要

本篇内容介绍了“Vue中的addEventListener和removeEventListener怎么使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能

本篇内容介绍了“Vue中的addEventListener和removeEventListener怎么使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

addEventListener和removeEventListener用法说明

1、添加监听事件(addEventListener)

语法:element.addEventListener(event, function, useCapture)

  • event:指定事件名(注意: 不要使用 "on" 前缀。 例如,使用 "click" ,而不是使用 "onclick")

  • function:指定要事件触发时执行的函数(事件对象会作为第一个参数传入函数)

  • useCapture:指定事件是否在捕获或冒泡阶段执行,默认false(true - 事件句柄在捕获阶段执行,false-事件句柄在冒泡阶段执行)

mounted() {    window.addEventListener("resize", this.setNavLeft);},methods: {    listenerFunction(e) {      document.addEventListener("scroll", this.handleScroll, true);    },}

2、移出监听事件(removeEventListener)

语法:element.removeEventListener(event, function, useCapture)

注意:在vue中销毁事件监听,一定要在destroyed生命周期中执行,在 beforeDestroy到destroyed之间,执行组件事件拆卸,在beforeDestroy中执行事件销毁是成功不了的

destroyed() {    document.removeEventListener("scroll", this.handleScroll, true);    window.removeEventListener("resize", this.setNavLeft);  },

使用addEventListener添加事件、removeEventListener移除事件

最近在项目中需要用到addEventListener监听滚动条滚动的高度,所以就研究了一下在vue中是怎么进行事件监听的。

添加事件

给要添加事件的元素加上ref属性

vue中的addEventListener和removeEventListener怎么使用

在mounted中添加事件

    mounted() {      this.$refs.box.addEventListener('scroll',()=>{        console.log('scroll',this.$refs.box.scrollTop)      });    }

这样就添加成功了!

vue中的addEventListener和removeEventListener怎么使用

移除事件

如果要移除已添加的事件,removeEventListener中传入的方法必须和addEventListener中传入的是同一个方法才能成功移除,所以在添加时就不能用匿名函数啦。需改成如下写法

    mounted() {      this.$refs.box.addEventListener('scroll',this.scrollEvent);    },    methods:{      scrollEvent(){        console.log('scroll',this.$refs.box.scrollTop)      }    }

这里要注意 传入的方法 this.scrollEvent 后面不能加括号,否则无法成功添加

组件销毁前移除事件

    beforeDestroy() {      this.$refs.box.removeEventListener('scroll',this.scrollEvent);    }

如果是keep-alive组件,可以用下面这种方式

  activated() {    this.$refs.box.addEventListener('scroll', this.scrollEvent);  },  deactivated(){    this.$refs.box.removeEventListener('scroll',this.scrollEvent);  },

“vue中的addEventListener和removeEventListener怎么使用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站,小编将为大家输出更多高质量的实用文章!

--结束END--

本文标题: vue中的addEventListener和removeEventListener怎么使用

本文链接: https://www.lsjlt.com/news/342294.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • vue中的addEventListener和removeEventListener怎么使用
    本篇内容介绍了“vue中的addEventListener和removeEventListener怎么使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能...
    99+
    2023-07-02
  • vue中的addEventListener和removeEventListener用法说明
    目录addEventListener和removeEventListener用法说明1、添加监听事件(addEventListener)2、移出监听事件(removeEventLis...
    99+
    2024-04-02
  • Vue中怎么使用addEventListener添加事件和removeEventListener移除事件
    今天小编给大家分享一下Vue中怎么使用addEventListener添加事件和removeEventListener移除事件的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读...
    99+
    2023-07-04
  • Vue的addEventListener()监听事件怎么使用
    本篇内容介绍了“Vue的addEventListener()监听事件怎么使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!一、语法eleme...
    99+
    2023-07-04
  • JavaScript中addEventListener的作用是什么
    addEventListener是JavaScript中用于给HTML元素添加事件监听器的方法。它的作用是在指定的事件发生时,执行指...
    99+
    2023-09-22
    JavaScript
  • Vue中的provide和inject怎么使用
    今天小编给大家分享一下Vue中的provide和inject怎么使用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。在vue2...
    99+
    2023-07-06
  • 详解如何在React中优雅的使用addEventListener
    目录使用 addEventListener 代替第三方库的事件方法一:state 变化,卸载/绑定事件方法二:使用闭包的方式卸载事件方法三:使用 ref 保存状态优化 state 手...
    99+
    2023-01-31
    React使用addEventListener React addEventListener
  • vue中$refs和$el怎么使用
    这篇文章主要介绍“vue中$refs和$el怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vue中$refs和$el怎么使用”文章能帮助大家解决问题。用法:1、“$refs”用于给元素或子组...
    99+
    2023-06-29
  • Vue中怎么使用eslint和editorconfig
    这篇文章主要介绍“Vue中怎么使用eslint和editorconfig”,在日常操作中,相信很多人在Vue中怎么使用eslint和editorconfig问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vue...
    99+
    2023-06-30
  • vue中axios和ajax怎么使用
    这篇文章主要讲解了“vue中axios和ajax怎么使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue中axios和ajax怎么使用”吧!vue中axios和ajax区别是:1.axi...
    99+
    2023-07-04
  • Vue中的Vue.set和this.$set怎么使用
    这篇文章主要介绍“Vue中的Vue.set和this.$set怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Vue中的Vue.set和this.$set怎么使用”文章能帮助大家解决问题。一、...
    99+
    2023-06-29
  • vue中的指令和插值怎么使用
    这篇文章主要介绍“vue中的指令和插值怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vue中的指令和插值怎么使用”文章能帮助大家解决问题。一、安装vue直接使用script标签引入<s...
    99+
    2023-07-04
  • 怎么在vue中使用 Watch和Computed
    本篇文章给大家分享的是有关怎么在vue中使用 Watch和Computed,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。01. 监听器watch(1)作用watch:用于监听d...
    99+
    2023-06-15
  • vue中怎么配置和使用mockjs
    这篇文章主要讲解了“vue中怎么配置和使用mockjs”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue中怎么配置和使用mockjs”吧!mockjs配置和使用方式需求在前后端分离的开发中...
    99+
    2023-06-29
  • vue中vue-router怎么使用
    这篇文章主要介绍“vue中vue-router怎么使用”,在日常操作中,相信很多人在vue中vue-router怎么使用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue中vue-router怎么使用”的疑...
    99+
    2023-06-30
  • vue中的math.sqrt怎么使用
    这篇文章主要讲解了“vue中的math.sqrt怎么使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue中的math.sqrt怎么使用”吧!在vue中,“math.sqrt”方法用于返回...
    99+
    2023-06-29
  • Vue中的$forceUpdate()怎么使用
    这篇文章主要讲解了“Vue中的$forceUpdate()怎么使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Vue中的$forceUpdate()怎么使用”吧!$forceUp...
    99+
    2023-06-29
  • Vue中的eventBus怎么使用
    本篇内容主要讲解“Vue中的eventBus怎么使用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue中的eventBus怎么使用”吧!1. 简介Vue 组件中常见的有:父子组件通信、兄弟组件...
    99+
    2023-06-29
  • vue中的store怎么使用
    本篇内容主要讲解“vue中的store怎么使用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue中的store怎么使用”吧!在vue中,store用于管理状态、共享数据以及在各个组件之间管理外...
    99+
    2023-06-29
  • vue中的window.onresize怎么使用
    本篇内容主要讲解“vue中的window.onresize怎么使用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue中的window.onresize怎么使用”吧!window.onresiz...
    99+
    2023-06-30
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作