React.Js添加与删除onScroll事件的方法详解


Posted in Javascript onNovember 03, 2017

React简介

React是有Facebook开发出来用于构建前端界面的JS组件库,由于其背后的强大背景,使得这款库在技术开发上完全没有问题。

React的优势

  • 解决大规模项目开发中数据不断变化变得难以操作的问题;
  • 组件化开发,使得开发更加快速;
  • 单向数据流,有利于找到问题;
  • 虚拟DOM,在React内部有一套diff算法可以快速的计算出整体需要改动的位置,从而做到快速局部刷新;举个栗子:删除一个列表再插入个新表,计算后会比较出不同然后插进去;

前言

大家都可能会遇到这样的问题,那就是滚动事件 。比较获取div的滚动事件,在ReactJS想要给div添加一个滚动事件,那基本上是添加不上的(可能是我的能力有限吧,反正我到目前为止,还没有找到可以直接给DIV添加滚动事件的)。

要想实现滚动,那就必须得componentWillMount里注册scroll事件, window.addEventListener(‘scroll', this.onScroll.bind(this)) ,添加事件非常容易的就添加上了。

在componentWillUnmount 里删除 window.removeEventListener(‘scroll', this.onScroll.bind(this)) 

添加容易,删除难,上面那种 remove是删除不了的。在其它页面里,如果你滚动也会触发 onScroll里的事件,此时就会报错,说组件已经卸载,不能进行操作,检查一下代码等等吧。

我想肯定有遇到了,也有解决的办法,果真找到了一篇文章移除 scroll 办法的。

代码如下:

componentDidMount() {
 regScroll(this.handler.bind(this));
 //window.addEventListener('scroll', this.handler.bind(this),false)
}

componentWillUnmount() {
 window.onscroll = '';
 //window.removeEventListener('scroll', this.handler.bind(this),false)
}
 //添加事件监听
function regScroll(myHandler) {
 if (window.onscroll === null) {
 window.onscroll = myHandler
 } else if (typeof window.onscroll === 'function') {
 var oldHandler = window.onscroll;
 window.onscroll = function () {
 myHandler();
 oldHandler();
 }
 }
}
//删除所有事件监听
function removeScrollHandler(){
 window.onscroll=''
}

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
prototype 学习笔记整理
Jul 17 Javascript
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
Feb 03 Javascript
javascript动态控制服务器控件实例
Sep 05 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
Apr 08 Javascript
Javascript中内建函数reduce的应用详解
Oct 20 Javascript
js编写选项卡效果
May 23 Javascript
js中时间格式化的几种方法
Jul 22 Javascript
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 jQuery
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
重置Redux的状态数据的方法实现
Nov 18 Javascript
VUE-ElementUI 自定义Loading图操作
Nov 11 Javascript
如何在JavaScript中使用localStorage详情
Feb 04 Javascript
基于jQuery解决ios10以上版本缩放问题
Nov 03 #jQuery
nginx配置React静态页面的方法教程
Nov 03 #Javascript
angular中ui calendar的一些使用心得(推荐)
Nov 03 #Javascript
mui上拉加载更多下拉刷新数据的封装过程
Nov 03 #Javascript
基于ES6作用域和解构赋值详解
Nov 03 #Javascript
AngularJS中controller控制器继承的使用方法
Nov 03 #Javascript
vue解决跨域路由冲突问题思路解析
Nov 03 #Javascript
You might like
二次元帅气男生排行榜,只想悄悄收藏系列
2020/03/04 日漫
Zend引擎的发展 [15]
2006/10/09 PHP
dedecms模板标签代码官方参考
2007/03/17 PHP
PHP封装的字符串加密解密函数
2015/12/18 PHP
24条货真价实的PHP代码优化技巧
2016/07/28 PHP
运用Windows XP附带的Msicuu.exe、Msizap.exe来彻底卸载顽固程序
2007/04/21 Javascript
firefox事件处理之自动查找event的函数(用于onclick=foo())
2010/08/05 Javascript
脚本合并提升javascript性能示例
2014/02/24 Javascript
jQuery中:button选择器用法实例
2015/01/04 Javascript
JavaScript性能优化之小知识总结
2015/11/20 Javascript
省市选择的简单实现(基于zepto.js)
2016/06/21 Javascript
纯前端JavaScript实现Excel IO案例分享
2016/08/26 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
2016/11/18 Javascript
jQuery获取this当前对象子元素对象的方法
2016/11/29 Javascript
Bootstrap table使用方法记录
2017/08/23 Javascript
js登录滑动验证的实现(不滑动无法登陆)
2018/01/03 Javascript
vue click.stop阻止点击事件继续传播的方法
2018/09/04 Javascript
详解基于React.js和Node.js的SSR实现方案
2019/03/21 Javascript
vue中使用微信公众号js-sdk踩坑记录
2019/03/29 Javascript
微信小程序背景音乐开发详解
2019/12/12 Javascript
JS原形与原型链深入详解
2020/05/09 Javascript
使用Python的Flask框架实现视频的流媒体传输
2015/03/31 Python
python实现canny边缘检测
2020/09/14 Python
Appium+Python实现简单的自动化登录测试的实现
2021/01/26 Python
为中国消费者甄选天下优品:网易严选
2016/08/11 全球购物
英国家庭珠宝商:T. H. Baker
2018/02/08 全球购物
师范生教师实习自我鉴定
2013/09/27 职场文书
大学生新闻专业个人自我评价
2013/11/12 职场文书
三万活动总结
2014/04/28 职场文书
软件项目实施计划书
2014/05/02 职场文书
态度决定一切演讲稿
2014/05/20 职场文书
学校查摆问题整改措施
2014/09/28 职场文书
2014年社区综治工作总结
2014/11/17 职场文书
python读取mnist数据集方法案例详解
2021/09/04 Python
企业开发CSS命名BEM代码规范实践
2022/02/12 HTML / CSS
i5-10400f处理相当于i7多少水平
2022/04/19 数码科技