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 相关文章推荐
HTML TO JavaScript 转换
Jun 26 Javascript
用js计算页面执行时间的函数
Dec 07 Javascript
JavaScript Event学习第四章 传统的事件注册模型
Feb 07 Javascript
浅析JQuery UI Dialog的样式设置问题
Dec 18 Javascript
js document.write()使用介绍
Feb 21 Javascript
jQuery实现高亮显示的方法
Mar 10 Javascript
JavaScript中两个字符串的匹配
Jun 08 Javascript
node.js中实现kindEditor图片上传功能的方法教程
Apr 26 Javascript
vue mixins组件复用的几种方式(小结)
Sep 06 Javascript
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
Mar 01 Javascript
Vue 获取数组键名的方法
Jun 21 Javascript
Openlayers测量距离与面积的实现方法
Sep 25 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
php基于数组函数实现关联表的编辑操作示例
2017/07/04 PHP
PHP7匿名类的用法示例
2019/04/05 PHP
thinkphp5.1框架中容器(Container)和门面(Facade)的实现方法分析
2019/08/05 PHP
Javascript高级技巧分享
2014/02/25 Javascript
15款jQuery分布引导插件分享
2015/02/04 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
2015/03/03 Javascript
原生js实现模拟滚动条
2015/06/15 Javascript
基于jQuery实现搜索关键字自动匹配功能
2020/03/26 Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
2016/05/27 Javascript
Angular2内置指令NgFor和NgIf详解
2016/08/03 Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
2016/09/21 Javascript
JS调用Android、Ios原生控件
2017/01/06 Javascript
canvas轨迹回放功能实现
2017/12/20 Javascript
浅谈Vuejs中nextTick()异步更新队列源码解析
2017/12/31 Javascript
如何快速解决JS或Jquery ajax异步跨域的问题
2018/01/08 jQuery
Vue组件开发技巧总结
2018/03/04 Javascript
微信小程序实现工作时间段选择
2019/02/15 Javascript
使用Vue 实现滑动验证码功能
2019/06/27 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
2020/07/19 Javascript
[06:07]DOTA2-DPC中国联赛 正赛 Ehome vs VG 选手采访
2021/03/11 DOTA
python魔法方法-自定义序列详解
2016/07/21 Python
Win10下python 2.7.13 安装配置方法图文教程
2018/09/18 Python
python实现写数字文件名的递增保存文件方法
2018/10/25 Python
使用matplotlib绘制图例标签中带有公式的图
2019/12/13 Python
Nginx+Uwsgi+Django 项目部署到服务器的思路详解
2020/05/08 Python
基于python实现坦克大战游戏
2020/10/27 Python
Darphin迪梵官网: 来自巴黎,植物和精油调制的护肤品牌
2016/10/11 全球购物
美国领先的眼镜和太阳镜在线零售商:Glasses.com
2019/08/26 全球购物
澳大利亚宠物食品和用品商店:PETstock
2020/01/02 全球购物
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类?
2012/05/30 面试题
小学生红领巾广播稿
2014/01/21 职场文书
旅游安全协议书
2014/04/21 职场文书
市场开发计划书
2014/05/07 职场文书
感恩教师节演讲稿
2014/09/03 职场文书
Python3 类型标注支持操作
2021/06/02 Python
DE1103使用报告
2022/04/05 无线电