解決多個window.onscroll覆蓋的問題

項目中有好幾處都有用到監聽頁面滾動window.onscroll這個函數，結果出現了后者覆蓋前者的問題。

 

最后是通過addEventListener解決了這種共存問題。

      

 ⚠️該處代碼this_ 🉑️ 換成this，截圖之前忘記去掉了～

 

🌈this 知識點補充

this對象是在運行時基於函數的執行環境綁定的：在全局函數中，this指向的是window；當函數被作為某個對象的方法調用時，this就等於那個對象）。

es6箭頭函數中，出現的作用除了讓函數的書寫變得很簡潔，可讀性很好外，解決了this執行環境所造成的一些問題。

比如：解決了匿名函數this指向的問題（匿名函數的執行環境具有全局性），包括setTimeout和setInterval中使用this所造成的問題。

 

 

🌈 addEventListener() 方法用於向指定元素添加事件句柄。

提示： 使用 removeEventListener() 方法來移除 addEventListener() 方法添加的事件句柄。

用法： element.addEventListener(event, function, useCapture)

 

 

 

優勢：  1、允許給一個事件注冊多個 listener。

      2、對任何 DOM 元素都是有效的，而不僅僅只對 HTML 元素有效。

             3、當使用 addEventListener() 為一個元素注冊事件的時候，句柄里的 this 值是該元素的引用。

                      其與傳遞給句柄的 event 參數的 currentTarget 屬性的值一樣。

                      如果一個事件的屬性( 例如. onClick)是指定在一個HTML的元素上的，那么使用this的效果，和使用addEventListener來綁定事件的效果是一樣的；

                      this的出現代表了元素的引用。

 

 

 

 

🌈 除了用addEventListener可以解決多個window.onscroll覆蓋的問題，還有別的方法。

   

   （其他方法轉自http://blog.csdn.net/lz305263/article/details/50429774）

 

方法1：

 

window.οnscrοll=function(){
    alert('first scroll');
}
var oldMethod = window.onscroll;
if(typeof oldMethod == 'function'){
    window.onscroll = function(){
        oldMethod.call(this);
        alert('second method');
    }
}

 

方法2：

function addEvent(obj,type,fn){
    if(obj.attachEvent){
        obj.attachEvent('on'+type,function(){
            fn.call(obj);
        })
    }else{
        obj.addEventListener(type,fn,false);
    }
}
addEvent(window,'scroll',function(){
    alert('first method')
});
addEvent(window,'scroll',function(){
    alert('second method')
});

 

方法3：使用jquery

 

$(document).ready(function(){
    $(window).scroll(function(){alert(0)});
    $(window).scroll(function(){alert(1)});
})