關於React.Js添加與刪除onScroll事件詳解

React是有Facebook開發出來用於建立前端介面的JS元件庫，由於其背後的強大背景，使得這款庫在技術開發上完全沒有問題。本文主要為大家介紹了關於React.Js添加與刪除onScroll事件的相關資料，文中透過範例程式碼介紹的非常詳細，對大家的學習或工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。

React的優勢

• 解決大規模專案開發中資料不斷變化變得難以操作的問題；

• 元件化開發，使得開發更加快速；

• 單向資料流，有利於找到問題；

• 虛擬DOM，在React內部有一套diff演算法可以快速的計算出整體需要改動的位置，從而做到快速局部刷新；舉個栗子：刪除一個列表再插入個新表，計算後會比較出不同然後插進去；

前言

大家都可能會遇到這樣的問題，那就是滾動事件。比較獲取p的滾動事件，在ReactJS想要給p添加一個滾動事件，那基本上是添加不上的(可能是我的能力有限吧，反正我到目前為止，還沒有找到可以直接給p添加滾動事件的）。

想要實現滾動，那就必須得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=''
}

相關推薦：

html5中在元素捲軸在捲動時觸發的事件onscroll

JavaScript觸發onScroll事件的函數節流詳解

關於onScroll事件在IE6下每次滾動觸發三次bug說明_javascript技巧

#

以上是關於React.Js添加與刪除onScroll事件詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！