快捷導(dǎo)航

React.Js添加與刪除onScroll事件的方法詳解

更新時(shí)間：2017年11月03日 11:11:38 作者：xiaotuni

這篇文章主要給大家介紹了關(guān)于React.Js添加與刪除onScroll事件的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。

React簡(jiǎn)介

React是有Facebook開(kāi)發(fā)出來(lái)用于構(gòu)建前端界面的JS組件庫(kù)，由于其背后的強(qiáng)大背景，使得這款庫(kù)在技術(shù)開(kāi)發(fā)上完全沒(méi)有問(wèn)題。

React的優(yōu)勢(shì)

解決大規(guī)模項(xiàng)目開(kāi)發(fā)中數(shù)據(jù)不斷變化變得難以操作的問(wèn)題；
組件化開(kāi)發(fā)，使得開(kāi)發(fā)更加快速；
單向數(shù)據(jù)流，有利于找到問(wèn)題；
虛擬DOM，在React內(nèi)部有一套diff算法可以快速的計(jì)算出整體需要改動(dòng)的位置，從而做到快速局部刷新；舉個(gè)栗子：刪除一個(gè)列表再插入個(gè)新表，計(jì)算后會(huì)比較出不同然后插進(jìn)去；

前言

大家都可能會(huì)遇到這樣的問(wèn)題，那就是滾動(dòng)事件。比較獲取div的滾動(dòng)事件，在ReactJS想要給div添加一個(gè)滾動(dòng)事件，那基本上是添加不上的(可能是我的能力有限吧，反正我到目前為止，還沒(méi)有找到可以直接給DIV添加滾動(dòng)事件的）。

要想實(shí)現(xiàn)滾動(dòng)，那就必須得componentWillMount里注冊(cè)scroll事件， window.addEventListener(‘scroll', this.onScroll.bind(this)) ，添加事件非常容易的就添加上了。

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

添加容易，刪除難，上面那種 remove是刪除不了的。在其它頁(yè)面里，如果你滾動(dòng)也會(huì)觸發(fā) onScroll里的事件，此時(shí)就會(huì)報(bào)錯(cuò)，說(shuō)組件已經(jīng)卸載，不能進(jìn)行操作，檢查一下代碼等等吧。

我想肯定有遇到了，也有解決的辦法，果真找到了一篇文章移除 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)
}
 //添加事件監(jiān)聽(tīng)
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();
 }
 }
}
//刪除所有事件監(jiān)聽(tīng)
function removeScrollHandler(){
 window.onscroll=''
}

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章: