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 相关文章推荐
jqgrid 表格数据导出实例
Nov 21 Javascript
prototype.js常用函数详解
Jun 18 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
Apr 17 Javascript
简单实现JavaScript弹幕效果
Aug 27 Javascript
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
Sep 10 Javascript
使用nvm管理不同版本的node与npm的方法
Oct 31 Javascript
微信小程序实现滚动消息通知
Feb 02 Javascript
JS同步、异步、延迟加载的方法
May 05 Javascript
JS实现的新闻列表自动滚动效果示例
Jan 30 Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
Apr 01 Javascript
详解Typescript里的This的使用方法
Jan 08 Javascript
JavaScript控制台的更多功能
Apr 28 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
56.com视频采集接口程序(PHP)
2007/09/22 PHP
基于php在各种web服务器的运行模式详解
2013/06/03 PHP
php实现批量下载百度云盘文件例子分享
2014/04/10 PHP
一个简洁实用的PHP缓存类完整实例
2014/07/26 PHP
thinkPHP框架可添加js事件的分页类customPage.class.php完整实例
2017/03/16 PHP
PHP实现函数内修改外部变量值的方法示例
2018/12/28 PHP
Mootools 1.2教程 Tooltips
2009/09/15 Javascript
jquery nth-child()选择器的简单应用
2010/07/10 Javascript
jQuery UI AutoComplete 使用说明
2011/06/20 Javascript
单击浏览器右上角的X关闭窗口弹出提示的小例子
2013/06/12 Javascript
自动刷新网页,自动刷新当前页面,JS调用
2013/06/24 Javascript
js中widow.open()方法使用详解
2013/07/30 Javascript
jquery实现背景墙聚光灯效果示例分享
2014/03/02 Javascript
JavaScript实现按Ctrl键打开新页面
2014/09/04 Javascript
javascript比较两个日期相差天数的方法
2015/07/23 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
2017/02/27 Javascript
NodeJS创建最简单的HTTP服务器
2017/05/15 NodeJs
Vue-cli proxyTable 解决开发环境的跨域问题详解
2017/05/18 Javascript
JavaScript 中调用 Kotlin 方法实例详解
2017/06/09 Javascript
bootstrap基本配置_动力节点Java学院整理
2017/07/14 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
2017/09/28 Javascript
Python中的引用和拷贝浅析
2014/11/22 Python
利用一个简单的例子窥探CPython内核的运行机制
2015/03/30 Python
Python中的index()方法使用教程
2015/05/18 Python
Opencv+Python实现图像运动模糊和高斯模糊的示例
2019/04/11 Python
新西兰航空中国官网:Air New Zealand China
2018/07/24 全球购物
任课老师推荐信范文
2013/11/24 职场文书
木工主管岗位职责
2013/12/08 职场文书
优秀毕业生自我鉴定
2014/02/11 职场文书
大学毕业生个人自荐书
2014/07/02 职场文书
撤诉状格式范本
2015/05/19 职场文书
民事答辩状范本
2015/05/21 职场文书
60条职场经典语录,总有一条能触动你的心
2019/08/21 职场文书
Memcached介绍及php-memcache扩展安装
2021/04/01 PHP
让文件路径提取变得更简单的Python Path库
2021/05/27 Python
Python创建SQL数据库流程逐步讲解
2022/09/23 Python