js中添加事件监听本来是非常常见的事情,但是去除监听一般很少去干,最近项目中需要监听页面显示或者隐藏

代码如下

 document.addEventListener(visibilitychange',()=>{

  //执行部分
}) //自己傻逼的以为去除事件的话直接下面这样就可以了 document.removeEventListener('visibilitychange',()=>{
//回调函数
}) //真的一直以为事件名字对就行了,后面是回调,结果就是根本不管用
//网上看了介绍才知道,如果监听事件的函数是匿名函数,那么是没办法取消的,所以,一般监听事件,后面跟着的是一个具名函数,相当于,监听这件事,并且配上事件的处理函数,取消监听的时候,也需要配对,刚才的事件名和处理函数一起,取消掉
  正确的做法是:
  document.addEventListener('visibilitychange',handle)
  document.removeEventListener('visibilitychange',handle)   function handle(){
    //处理函数了
  }
  后面还有第三个参数,用于区分是冒泡阶段还是捕获阶段,简单理解就是冒泡是从内到外,捕获是从外到内
  

参考文章如下:https://blog.csdn.net/xiasohuai/article/details/83063293

js中 addEventListener 和removeEventListener的更多相关文章

  1. js中addEventListener第三个参数涉及到的事件捕获与冒泡

    js中,我们可以给一个dom对象添加监听事件,函数就是 addEventListener("click",function(){},true); 很容易理解,第一个参数是事件类型, ...

  2. js中addEventListener中第3个参数

    addEventListener中的第三个参 数是useCapture, 一个bool类型.当为false时为冒泡获取(由里向外),true为capture方式(由外向里). <div id=& ...

  3. js高级程序设计笔记之-addEventListener()与removeEventListener(),事件解除与绑定

    js高级程序设计笔记之-addEventListener()与removeEventListener(),事件解除与绑定 addEventListener()与removeEventListener( ...

  4. JS添加事件和解绑事件:addEventListener()与removeEventListener()

    作用: addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作. 它们都接受3个参数:事件名.事件处理的函数和布尔值. 布尔值参数是true ...

  5. JS中的event 对象详解

    JS中的event 对象详解   JS的event对象 Event属性和方法:1. type:事件的类型,如onlick中的click:2. srcElement/target:事件源,就是发生事件的 ...

  6. jquery中的each用法以及js中的each方法实现实例

    each()方法能使DOM循环结构简洁,不容易出错.each()函数封装了十分强大的遍历功能,使用也很方便,它可以遍历一维数组.多维数组.DOM, JSON 等等在javaScript开发过程中使用$ ...

  7. 看懂此文,不再困惑于 JS 中的事件设计

    看懂此文,不再困惑于 JS 中的事件设计 今天刚在关注的微信公众号看到的文章,关于JS事件的,写的很详细也很容易理解,相关的知识点都有总结到,看完就有种很舒畅的感觉,该串起来的知识点都串起来了.反正一 ...

  8. JS中的函数、Bom、DOM及JS事件

    本期博主给大家带来JS的函数.Bom.DOM操作,以及JS各种常用的数据类型的相关知识,同时,这也是JavaScript极其重要的部分,博主将详细介绍各种属性的用法和方法. 一.JS中的函数 [函数的 ...

  9. DOM 以及JS中的事件

    [DOM树节点] DOM节点分为三大节点:元素节点,文本节点,属性节点. 文本节点,属性节点为元素节点的两个子节点通过getElment系列方法,可以去到元素节点 [查看节点] 1 document. ...

随机推荐

  1. Redis 6.0 正式版终于发布了!除了多线程还有什么新功能?

    Redis 6.0.1 于 2020 年 5 月 2 日正式发布了,如 Redis 作者 antirez 所说,这是迄今为止最"企业"化的版本,也是有史以来改动最大的一个 Redi ...

  2. 数学--数论--HDU1576 A / B(逆元)

    问题描述 要求(A / B)%9973,但由于A很大,我们只被告知n(n = A%9973)(我们给定的A必能被B整除,且gcd(B,9973)= 1). 输入项 数据的第一行是一个T,表示有T组数据 ...

  3. 1-MyBatisPlus教程(一)

    1,简介 官网:http://mp.baomidou.com/ 参考教程:http://mp.baomidou.com/guide/ MyBatis-Plus(简称 MP)是一个 MyBatis 的增 ...

  4. 补一下昨天的博客 J - Sabotage 网络流

    题目链接:https://vjudge.net/contest/299467#problem/J 这个题目是一个裸的最小割问题,就不多赘述了. #include <cstdio> #inc ...

  5. 服务器3C直连网络好呢还是3C精品网络更好呢?

    3C直连网络:通过用自有AS号与中国电信CTcc,中国联通CUcc,中国移动CMcc企业网进行直接接驳,提供对大陆方向有更高要求的网络接入服务. 简称:国内3c直连. 3C精品专线网:在3C直连基础上 ...

  6. Openwrt:添加"自定义软件包.ipk"

    我们已经尝试做的一件事情,是让移植软件到OpenWrt的操作变得非常容易.如果打开OpenWrt里的一个软件包的目录(OpenWrt/Package/* 或 OpenWrt/feeds/package ...

  7. [hdu1028]整数拆分,生成函数

    题意:给一个正整数n,求n的拆分方法数(不考虑顺序) 思路:不妨考虑用1~n来构成n.用多项式表示单个数所有能构成的数,用多项式表示,就相当于卷积运算了. 1 2 3 4 5 6 7 8 9 10 1 ...

  8. flink进阶篇

    Flink 面试--进阶篇 1.Flink是如何支持批流一体的? 2.Flink是如何做到高效的数据交换的? 3.Flink是如何做容错的? 4.Flink 分布式快照的原理是什么? 5.Flink ...

  9. Spring Boot Admin实现服务健康预警

    Over View 上一篇文章主要介绍了Spring Boot Admin的概况以及我们如何在系统中引入和使用Spring Boot Admin,以此来帮助我们更加了解自己的系统,做到能快速发现.排查 ...

  10. An SWT error has occurred

    对话框标题:Problem Occurred 对话框内容:Unhandled event loop exception No more handles 对话框按钮:第一个超链接:Show Error ...