解决多个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)});
})

 

 

 

 

 

转载于:https://www.cnblogs.com/catherLee/p/11412831.html