js滚动条事件监听addEventListener、removeEventListener不生效

//移除监听需要满足

需要移除的事件类型必须是一样的, 比如: click
需要从目标事件移除的 EventListener 函数必须和 addEventListener 中注册的是同一个, 也就是说引用地址是相同的
指定需要移除的 EventListener 函数的useCapture 和 addEventListener 中注册的相同的

写法1

//定义一个对象，对象中定义一个handleEvent函数
this.scrollShowButtonHandel = {handleEvent: function (e) {var pageHeight = $(".main-content").height() - $(window).height() - 100;if (pageHeight > 0 && e.target.scrollTop > pageHeight) {$("#btnSave").show();}else {$("#btnSave").hide();}}}// 绑定监听事件
window.addEventListener("scroll", this.scrollShowButtonHandel, true);
// 接触绑定
window.removeEventListener("scroll", this.scrollShowButtonHandel, true);

写法2

//定义一个函数
scrollShowButton: function (e) {var pageHeight = $(".main-content").height() - $(window).height() - 100;if (pageHeight > 0 && e.target.scrollTop > pageHeight) {$("#btnSave").show();}else {$("#btnSave").hide();}},window.addEventListener("scroll", this.scrollShowButton, true);
window.removeEventListener("scroll", this.scrollShowButton, true);//注意：this.scrollShowButton.bind(this)这种写法bind会创建一个新函数，函数的内存地址会变，故会导致移除绑定失败

参考：你所不知道的scroll事件：为什么scroll事件会失效？ | Ayase-252's wonderland

EventTarget.removeEventListener() 取消监听事件不起作用(失效)的原因 | 种子的信仰

EventTarget.removeEventListener - Web API 接口参考 | MDN

EventListener | MDN

Function.prototype.bind() - JavaScript | MDN

js滚动条事件监听addEventListener、removeEventListener不生效相关推荐

js: 添加事件监听addEventListener、移除事件监听removeEventListener
文档 https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener https://developer.m ...
JS的事件监听与委托机制
JS的事件监听机制小故事: 很久以前有个叫Netscape的姑娘,她制订了Javascript的一套事件驱动机制(即事件捕获) 后来又有一个叫"IE"的小子,这孩子比较傲气,他认 ...
html js按钮事件监听,JS监听事件
对象 - JS监听事件 ¶ 作者:KK 发表日期:2016.2.21 在准备讲解后面的window对象之前,这里将话题转回来事件这里平时咱们在一个元素里加个onclick属性,属性值写JS代码,这样 ...
JS事件汇总,addEventListener添加事件监听
JS事件汇总 JavaScript 事件 JS事件汇总鼠标事件键盘事件表单事件读取事件 onload与onpageshow事件区别其它事件 addEventListener()添加事件监听 ...
EventTarget.addEventListener()事件监听
文章目录 EventTarget.addEventListener()的意义和原理什么是事件监听 addEventListener()的原理 addEventListener()的语法 addEve ...
js如何监听元素事件是否被移除_JS移除事件监听的方法 .removeEventListener( )
JS用addEventListener添加事件监听方法后,可以用removeEventListener来解除监听: element.removeEventListener(event, myFunct ...
JavaScript 的addEventListener() 事件监听详解！
JavaScript 的addEventListener() 事件监听详解! addEventListener() 用于向指定元素添加事件. 可以向一个元素添加多次事件或者多次不同事件,后面的事件是 ...
Event事件-1:addEventListener事件监听 / 事件冒泡事件捕获 / 事件委托 / preventDefault 阻止默认行为 / cancelBubble、stopPropa...
addEventListener 事件监听器 target.addEventListener(type, listener[, options|useCapture]) 添加事件监听参数: ...
js 监听安卓事件_百行代码实现js事件监听实现跨页面数据传输
百行代码实现js事件监听实现跨页面数据传输使用场景类似消息队列的使用场景,支持同页面和跨页面通信,发送消息和接收消息技术原理跨页面通信: 基于事件监听,通过监听 storage事件监听回调机制 ...

js滚动条事件监听addEventListener、removeEventListener不生效

js滚动条事件监听addEventListener、removeEventListener不生效相关推荐

最新文章

热门文章