iis服务器助手广告
返回顶部
首页 > 资讯 > 前端开发 > 其他 >vue怎么添加和移除事件
  • 199
分享到

vue怎么添加和移除事件

vue移除事件 2023-05-14 21:05:39 199人浏览 安东尼
摘要

本教程操作环境:windows10系统、Vue 3版、Dell G3电脑。vue怎么添加和移除事件?vue事件添加和移除.removeEventListener() 方法要求我们向其传递与传递给 .addEventListener() 的函

vue怎么添加和移除事件

教程操作环境:windows10系统、Vue 3版、Dell G3电脑。

vue怎么添加和移除事件?

vue事件添加和移除

.removeEventListener() 方法要求我们向其传递与传递给 .addEventListener() 的函数 完全相同的监听器函数。

完全相同 意味着:

  • 具有相同的目标
  • 具有相同的类型
  • 并传递完全相同的监听器

定义和用法

removeEventListener() 方法用于移除由 addEventListener() 方法添加的事件句柄。

注意: 如果要移除事件句柄,addEventListener() 的执行函数必须使用外部函数,如上实例所示 (myFunction)。

匿名函数,类似 "document.removeEventListener("event", function(){ myScript });" 该事件是无法移除的。

例如:

 { name: 'Richard' } === { name: 'Richard' }复制代码

的答案会是false,因为他们属于不同的实体。

那么,什么样的可以成功移除呢?

function myEventListeningFunction() {
    console.log('howdy');
}
 
// 为 点击 事件添加一个监听器,来运行 `myEventListeningFunction` 函数
document.addEventListener('click', myEventListeningFunction);
 
// 立即移除 应该运行`myEventListeningFunction`函数的 点击 事件监听器
document.removeEventListener('click', myEventListeningFunction);复制代码

这个可以√,因为他们都指向myEventListeningFunction()这同一个方法。

而如果是

// 为 点击 事件添加一个监听器,来运行 `myEventListeningFunction` 函数
document.addEventListener('click', function myEventListeningFunction() {
    console.log('howdy');
});
 
// 立即移除 应该运行`myEventListeningFunction`函数的 点击 事件监听器
document.removeEventListener('click', function myEventListeningFunction() {
    console.log('howdy');
});复制代码

则不会成功移除×,因为他们的监听器函数并不是指向同一个。

事件传递有两种方式:冒泡与捕获。

事件传递定义了元素事件触发的顺序。 如果将 <p> 元素插入到 <div> 元素中,用户点击 <p> 元素, 哪个元素的 “click” 事件先被触发呢?

在 冒泡 中,内部元素的事件会先被触发,然后再触发外部元素,即: <p> 元素的点击事件先触发,然后会触发 <div> 元素的点击事件。

在 捕获 中,外部元素的事件会先被触发,然后才会触发内部元素的事件,即: <div> 元素的点击事件先触发 ,然后再触发 <p> 元素的点击事件。

addEventListener() 方法可以指定 “useCapture” 参数来设置传递类型:

addEventListener(event, function, useCapture);

默认值为 false, 即冒泡传递,当值为 true 时, 事件使用捕获传递

removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:

element.removeEventListener("mousemove", myFunction);

浏览器兼容处理

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    // 所有主流浏览器,除了 IE 8 及更早版本
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // IE 8 及更早版本
    x.attachEvent("onclick", myFunction);
}

IE 8 及更早 IE 版本,Opera 7.0及其更早版本不支持 addEventListener()removeEventListener() 方法。但是,对于这类浏览器版本可以使用 detachEvent() 方法来移除事件句柄:

element.attachEvent(event, function);
element.detachEvent(event, function);

vue的事件节流和移除

通常写法:

created() {
  window.addEventListener("scroll", this.throttle());
},
destroyed() {
  window.removeEventListener("scroll", this.throttle());
}
// methods
throttle() {
    let lastTime = new Date();
    let timer = null;
    return () => {
      let startTime = new Date();
      let remaining = 200 - (startTime - lastTime);
      clearTimeout(timer);
      if (startTime - lastTime > 200) {
        lastTime = startTime;
        this.scroll.call(this);
      } else {
        // 最后一次也执行
        timer = setTimeout(() => {
          this.scroll.call(this);
        }, remaining);
      }
    };
  }

1d501e370ff0427b412ff2a06e10622.jpg

都是错误的,呵呵。

问题的原因和“data为什么是函数”是一样的。节流函数throttle每次返回的函数是不一样的,所以,remove的函数和add的函数式不一样的。处理的方法就是对 节流 函数进行改造。(当然你也可以不节流就没有事了)
created() {
   this.lastTime = new Date();
   this.timer = null;
   window.addEventListener("scroll", this.throttle);
},
destroyed() {
   window.removeEventListener("scroll", this.throttle);
}
// methods
throttle() {
  let startTime = new Date();
  let remaining = 200 - (startTime - this.lastTime);
  clearTimeout(this.timer);
  if (startTime - this.lastTime > 200) {
    this.lastTime = startTime;
    this.scroll.call(this);
  } else {
    // 最后一次也执行
    this.timer = setTimeout(() => {
      this.scroll.call(this);
    }, remaining);
  }
}

事件操作和节流融合一起,所以要理解节流的实现原理。。

以上就是vue怎么添加和移除事件的详细内容,更多请关注编程网其它相关文章!

--结束END--

本文标题: vue怎么添加和移除事件

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

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

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue怎么添加和移除事件
    本教程操作环境:Windows10系统、Vue 3版、Dell G3电脑。vue怎么添加和移除事件?vue事件添加和移除.removeEventListener() 方法要求我们向其传递与传递给 .addEventListener() 的函...
    99+
    2023-05-14
    vue移除事件
  • vue如何添加和移除事件
    这篇文章主要介绍“vue如何添加和移除事件”,在日常操作中,相信很多人在vue如何添加和移除事件问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue如何添加和移除事件”的疑惑有所帮助!接下来,请跟着小编一起来...
    99+
    2023-07-04
  • Vue中怎么使用addEventListener添加事件和removeEventListener移除事件
    今天小编给大家分享一下Vue中怎么使用addEventListener添加事件和removeEventListener移除事件的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读...
    99+
    2023-07-04
  • javascript怎么添加事件和删除事件
    这篇文章主要讲解了“javascript怎么添加事件和删除事件”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“javascript怎么添加事件和删除事件”吧!...
    99+
    2024-04-02
  • jquery怎么添加类和移除类
    本教程操作环境:windows7系统、jquery3.6.1版本、Dell G3电脑。jquery添加类和移除类的方法方法描述addClass()向匹配的元素添加指定的类名。removeClass()从所有匹配的元素中删除全部或者指定的类。...
    99+
    2022-11-22
    javascript jquery
  • jquery中怎么添加和移除类样式
    在jQuery中,可以使用`addClass()`方法来添加类样式,使用`removeClass()`方法来移除类样式。下面是一个示...
    99+
    2023-08-15
    jquery
  • Vue中怎么根据条件添加click事件
    这篇文章将为大家详细讲解有关Vue中怎么根据条件添加click事件,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。需求:根据特定条件,增加或者去掉click事...
    99+
    2024-04-02
  • jquery如何添加和移除元素
    这篇文章主要介绍“jquery如何添加和移除元素”,在日常操作中,相信很多人在jquery如何添加和移除元素问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”jquery如何添加...
    99+
    2024-04-02
  • jquery如何添加类和移除类
    这篇文章主要讲解了“jquery如何添加类和移除类”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“jquery如何添加类和移除类”吧!jquery中可用addClass()和removeCla...
    99+
    2023-07-04
  • vue如何给div添加事件
    在vue中给div添加事件的方法:1.新建vue.js项目;2.添加div标签;3.使用click属性添加事件,并绑定v-on指令;4.使用methods方法触发事件;具体步骤如下:首先,在vue-cli中创建一个vue.js项目;vue ...
    99+
    2024-04-02
  • Git中怎么添加和删除文件
    本篇内容介绍了“Git中怎么添加和删除文件”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!添加文件添加文件的方式非常简单,只需使用 Git 的...
    99+
    2023-07-05
  • vue怎么根据条件判断属性的添加和去除
    这期内容当中小编将会给大家带来有关vue怎么根据条件判断属性的添加和去除,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。根据条件判断属性的添加和去除写一个列表,然后想要在查询数据的过程中添加loading样...
    99+
    2023-06-28
  • vue-table实现添加和删除
    本文实例为大家分享了vue-table实现添加和删除的具体代码,供大家参考,具体内容如下 一.代码 <!DOCTYPE html> <html> <...
    99+
    2024-04-02
  • Flex4中怎么添加事件
    这篇文章给大家介绍Flex4中怎么添加事件,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。Flex4教程中添加事件的3种方法1,直接写在click属性里2,在click属性里写事件的处理函数3,用addEventList...
    99+
    2023-06-17
  • 怎么移除css的hover事件
    本教程操作环境:Windows10系统、CSS3版、DELL G3电脑怎么移除css的hover事件?jquery中取消和绑定hover事件的正确方式在网页设计中,我们经常使用jquery去响应鼠标的hover事件,和mouseover和m...
    99+
    2023-05-14
    css hover
  • vue自定义组件怎么添加使用原生事件
    今天小编给大家分享一下vue自定义组件怎么添加使用原生事件的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。自定义组件如何添加使...
    99+
    2023-06-30
  • 怎么用ADO.NET RowUpdated添加删除事件处理程序
    这篇文章主要讲解了“怎么用ADO.NET RowUpdated添加删除事件处理程序”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么用ADO.NET RowUpdated添加删除事...
    99+
    2023-06-17
  • 怎么在Canvas中添加事件
    本篇文章给大家分享的是有关怎么在Canvas中添加事件,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。isPointInPath的作用:顾名思义,我们很直观的可以知道该方法用以判...
    99+
    2023-06-09
  • jquery怎么给类添加事件
    这篇文章主要介绍了jquery怎么给类添加事件的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇jquery怎么给类添加事件文章都会有所收获,下面我们一起来看看吧。   jque...
    99+
    2024-04-02
  • Cassandra集群中怎么添加或移除节点
    在Cassandra集群中添加或移除节点可以通过以下步骤完成: 添加节点: 首先,在新节点上安装Cassandra软件并配置好节点...
    99+
    2024-03-11
    Cassandra
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作