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. CF1324D Pair of Topics

    好像题解里都是树状数组(起码我翻到的是 说一种cdq分治的(这应该算是cdq分治了 用cdq比较简单,所以可以作为一个练手题 cdq分治其实是一种模糊的思想,处理\([l,r]\)区间内,有多少\(( ...

  2. Java 面向对象和封装

    目录 面向对象思想的概述 类和对象的关系 什么是类 什么是对象 类和对象的关系 局部变量和成员变量的区别 this关键字 构造方法 一个标准的类 面向对象思想的概述 面向过程:当需要实现一个功能的时候 ...

  3. mybatis添加信息自动生成主键

    一.使用Oracle数据库 举例:添加员工的时候自动生成主键 1.在dao接口中声明方法 2.在mapper中实现该方法 需要先在数据表中创建序列 3.测试 注意:在调用过save方法之后,emp对象 ...

  4. LTE无线网络优化简介

    LTE无线网络优化特点 覆盖和质量的估计参数不同 TD-LTE使用RSPP.RSRQ.SINR进行覆盖和质量的评估. 影响覆盖问题的因素不同 工作频段的不同,导致覆盖范围的差异显著:需要考虑天线模式对 ...

  5. 【mybatis】IF判断的坑

    http://cheng-xinwei.iteye.com/blog/2008200 最近在项目使用mybatis中碰到个问题 <if test="type=='y'"> ...

  6. Django 设置admin后台表和App(应用)为中文名

    设置表名为中文 1.设置Models.py文件 class Post(models.Model): name = models.CharField() --省略其他字段信息 class Meta: v ...

  7. Boosting算法总结(ada boosting、GBDT、XGBoost)

    把之前学习xgb过程中查找的资料整理分享出来,方便有需要的朋友查看,求大家点赞支持,哈哈哈 作者:tangg, qq:577305810 一.Boosting算法 boosting算法有许多种具体算法 ...

  8. nodejs开发准备工作(1)

    nvm工具(node版本管理工具) (1) 下载nvm: https://github.com/coreybutler/nvm-windows/releases: (2) 推荐下载压缩包,解压安装就好 ...

  9. 用VirtualBox代替VMWare安装Ubuntu系统图文教程总结

    文章目录 为什么使用VirtualBox,而不是VMWare? 图文教程 安装VirtualBox 下载Ubuntu镜像 新建虚拟机 安装Ubuntu系统 总结 为什么使用VirtualBox,而不是 ...

  10. 计算机组成及系统结构-第十章 输入输出(I/O)系统

    输入输出(I/O)系统 一.概述 1.输入输出设备的编址 2.设备控制器(I/O接口)的基本功能 3.I/O设备数据传送控制方式 二.程序中断输入输出方式 1.中断的定义 2.中断的作用 3.中断的产 ...