vue中的addEventListener和removeEventListener用法说明

目录
  • addEventListener和removeEventListener用法说明
    • 1、添加监听事件（addEventListener）
    • 2、移出监听事件（removeEventListener）
  • 使用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属性

在mounted中添加事件

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

这样就添加成功了！

移除事件

如果要移除已添加的事件，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);
  },

另外，addEventListener还可以给一个元素添加多个事件，并且不会覆盖已存在的事件，这里就不多展开了~

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

赞 (0)

相关推荐

  • 解决removeEventListener 无法清除监听的问题

    1. 原因 许多入前端不久的人都会遇到 removeEventListener 无法清除监听的情况,这是由于 要移除事件句柄,addEventListener() 的执行函数必须使用外部函数,如上实例所示 (myFunction). 匿名函数,类似 "document.removeEventListener("event", function(){ myScript });" 该事件是无法移除的. 而在很多情况下我们需要句柄回调的传参,又需要其他传参时免不了使用句柄

  • 详解Vue之事件处理

    在Vue进行前端开发中,事件监听是必不可少的功能,本文通过简单的小例子,简述v-on的简单用法,仅供学习分享使用,如有不足之处,还请指正. 监听事件 可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码.如下所示: <button v-on:click="counter += 1">Add 1</button> <p>按钮被点击了 {{ counter }} 次.</p> 其中counter为Vue自定

  • vue监听滚动事件的方法

    vue中监听滚动事件,然后对其进行事件处理,一般有:1. 滚动到顶部吸附: 2. 根据滚动的位置激活对应的tab键(锚链接tab键) 这两种方式的处理都是可通过监听scroll来实现 mounted(){ window.addEventListener('scroll',this.handleScroll) // 监听滚动事件,然后用handleScroll这个方法进行相应的处理 } 处理方法 1. 滚动到顶部吸附 html元素 <!--如果isFixed为true的话,就添加class is_

  • vue中的addEventListener和removeEventListener用法说明

    vue中的addEventListener和removeEventListener用法说明

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

  • js中addEventListener()与removeEventListener()用法案例分析

    本文实例讲述了js中addEventListener()与removeEventListener()用法.分享给大家供大家参考,具体如下: 所有的DOM节点中都包含addEventListener()与removeEventListener()这两种方法,用于追加事件和删除追加. 接受参数:要处理的事件名.作为事件处理程序的函数和一个布尔值. (3个) 最后这个布尔值参数是true,表示在捕获阶段调用事件处理程序:如果是false,表示在冒泡阶段调用事件处理程序.默认为false; 事件传递有两

  • 详解Vue中Computed与watch的用法与区别

    目录 computed computed只接收一个getter函数 computed同时接收getter函数对象和setter函数对象 调试 Computed watchEffect 立即执行 监听基本数据类型 停止watchEffect 清理watchEffect watchPostEffect 和 watchSyncEffect watchEffect不能监听对象 watch 监听单个数据 监听多个数据(传入数组) 官方文档总结 computed watchEffect watch comp

  • Vue中的常用指令及用法总结

    首先来聊聊Vue框架,Vue是一套用于构建用户界面的渐进式的JavaScript框架,对于初学者来说是非常友好的 , Vue的虚拟Dom , 数据双向绑定 , 都使开发者可以快速上手 , 而我个人感觉 , Vue的指令使用起来非常的方便 , 今天的这篇文章们就来聊聊常用的Vue指令吧! v-for 在初学任何一门语言的时候我们或多或少都接触过 for for (let i = 0; i < arr.length; i++) { } Vue 的 v-for跟我们js里面的最根本的概念还是一样的就是

  • vue中的.sync修饰符用法及原理分析

    目录 .sync修饰符用法及原理 例如 .sync修饰符的用法总结 需求描述 解决方案 .sync修饰符用法及原理 vue中我们经常会用v-bind(缩写为:)给子组件传入参数. 或者我们会给子组件传入一个函数,子组件通过调用传入的函数来改变父组件的状态. 例如 //父组件给子组件传入一个函数  <MyFooter :age="age" @setAge="(res)=> age = res">  </MyFooter>  //子组件通过

  • 详解vue中$nextTick和$forceUpdate的用法

    详解vue中$nextTick和$forceUpdate的用法

    1.$nextTick vm.$nextTick( [callback] ) this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行,在修改数据之后立即使用它,然后等待 DOM 更新.它跟全局方法 Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例上. 应用场景: 1. 在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中. 2. 因为在created()钩子函数执行的时候DOM 其实并未

  • 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中关于click.stop的用法

    目录 关于click.stop的用法 @click.stop与@click.prevent 一.@click.stop 二.@click.prevent 关于click.stop的用法 click.stop 阻止点击事件继续传播 场景: 在table中使用,点击当前行,当前行被勾选,但是点击当前行中按钮或点击事件时,使用此方法,则在触发当前点击事件后,阻止行的选中事件 使用: html <el-table ref="tableRef" :data="tableData&

  • Vue中侦听器的基本用法示例

    目录 前言 一.侦听器的基本用法 二.侦听器的格式 三.实现刚进入页面就触发监听和深度监听 深度监听 深度监听返回侦听对象子属性的值 最后 前言 Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化.当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的. 一.侦听器的基本用法 <div id="demo">{{ fullName }}</div> var vm = new Vue({ el: '#demo', data: { fir

  • 详解Vue中localstorage和sessionstorage的使用

    1. 项目使用中暴露出来的几个问题 大家到处直接使用localstorage['aaa']='这是一段示例字符串'这些原生语法实现,这样耦合度太高了,假如有一天我们需要换实现方式,或者对存储大小做一些控制,那么需要修改的代码就会很多 项目很大,那么大家起的key的名字难免会重复,而且这样也会造成全局污染 因为localstorage的使用不规范,所以造成了存储空间的浪费和不够用 2. 解决办法 封装storage的使用方法,统一处理 规范storage的key值的命名规则 规范storage的使

随机推荐