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. c/c++头文件的摘抄

    C/C++常用头文件 以及简单应用介绍 C/C++头文件一览 C #include <assert.h> //设定插入点 #include <ctype.h> //字符处理 # ...

  2. 对MobileNet网络结构的解读

    引言 近几年来,CNN在ImageNet竞赛的表现越来越好.为了追求分类准确度,模型越来越深,复杂度越来越高,如深度残差网络(ResNet)其层数已经多达152层.但是在真实场景中如移动或者嵌入式设备 ...

  3. Python的内存管理和垃圾回收

    内存管理 与Python对象创建相关的结构体 #define _PyObject_HEAD_EXTRA \ struct _object *_ob_next; \ struct _object *_o ...

  4. turtle库应用实例2-六芒星的绘制

    六芒星的绘制 ‪‬‪‬‪‬‪‬‪‬‮‬‪‬‮‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‪‬‪‬‪‬‪‬‪‬‪‬‮‬‭‬‫‬‪‬‪‬‪‬‪‬‪‬‮‬‫‬‪‬‪‬‪‬‪‬‪‬‪‬‮‬‫‬‭‬‪‬‪‬‪‬‪‬‪‬‮‬‪ ...

  5. 从一条数据说起——InnoDB存储数据结构

    本篇博客参考掘金小册--MySQL 是怎样运行的:从根儿上理解 MySQL 先给大家讲一个故事,我刚参加工作,在一个小作坊里面当[码畜](尽管现在也是),有一天老板从我背后走过,说了一句举世震惊的话: ...

  6. Android P HIDL demo代码编写 (原创)

    之前的文章已经分析了HIDL服务的注册和调用,这篇文章来总结下一个HIDL的服务如何编写. 缩写HAL文件 首先要确认放置文件夹和接口的包名,因为这跟后面使用脚本生成一部分代码有关,一般默认的放在ha ...

  7. 基于OpenCV的KNN算法实现手写数字识别

    基于OpenCV的KNN算法实现手写数字识别 一.数据预处理 # 导入所需模块 import cv2 import numpy as np import matplotlib.pyplot as pl ...

  8. Eating Everything Efficiently(反向dp)

    传送门 取最大值即可.用拓扑,dfs都可以实现 #include <bits/stdc++.h> using namespace std; const int maxn=500009; i ...

  9. 2020 wannafly camp 补题 day1

    题目可以从牛客上找到. 最简单的一个题应该是B B. 密码学 这个应该就是倒着推,题目给了你加密的顺序,所以我们逆推这个就可以得到每一次加密前的字符串. 1H. 最大公约数 题目大意就是给你一个范围1 ...

  10. while持续输入的几种常用使用方法

    while(scanf("%d,&n")!=EOF) 如果n被成功读入,则返回值为1, 如果n未被成功读入,则返回值为0, 如果遇到错误或遇到end of file,返回值 ...