addEventListener解决多个window.onscroll共存问题

方法1：只适用有两个滚动事件共存时适用，当有多个的时候不推荐使用这个方法，有多个会被覆盖
window.οnscrοll=function(){ //默认一个页面只能同时存在一个window.onscroll函数
    console.log(11);
}
var oldMethod = window.onscroll;   //当使用多个时建议使用这个方法或下面的方法
if(typeof oldMethod == 'function'){
    window.onscroll = function(){
        oldMethod.call(this);
        console.log(22);
    }

}

方法2：

function addEvent(obj,type,fn){
    if(obj.attachEvent){ //ie
        obj.attachEvent('on'+type,function(){
            fn.call(obj);
        })
    }else{
        obj.addEventListener(type,fn,false);
    }
}
addEvent(window,'scroll',function(){
    console.log(21)
});
addEvent(window,'scroll',function(){
    console.log(22)
});

方法3：jQuery已经帮我们写好了一切

$(window).scroll(()=>{console.log(31)})

$(window).scroll(()=>{console.log(32)})

其实说到底都是用的同一个方法，事件监听，所以以后写事件都推荐使用事件监听的写法，避免同一个元素有多个同一个事件时其他的方法不生效！

上文转自http://blog.csdn.net/lz305263/article/details/50429774   无颜君

定义和用法

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

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

浏览器支持

表格中的数字表示支持该方法的第一个浏览器的版本号。

方法
addEventListener()	1.0	9.0	1.0	1.0	7.0

注意： Internet Explorer 8 及更早IE版本不支持 addEventListener() 方法，，Opera 7.0 及 Opera 更早版本也不支持。 但是，对于这些不支持该函数的浏览器，你可以使用 attachEvent() 方法来添加事件句柄 (查看 "更多实例" 了解跨浏览器的解决方案)。

---

语法

element.addEventListener( event,  function,  useCapture)

参数值

参数	描述
event	必须。字符串，指定事件名。 注意: 不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。  提示： 所有 HTML DOM 事件，可以查看我们完整的 HTML DOM Event 对象参考手册。
function	必须。指定要事件触发时执行的函数。  当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。
useCapture	可选。布尔值，指定事件是否在捕获或冒泡阶段执行。 可能值: true - 事件句柄在捕获阶段执行 false- false- 默认。事件句柄在冒泡阶段执行

为什么要使用 addEventListener?

addEventListener 是 W3C DOM 规范中提供的注册事件监听器的方法。它的优点包括：

• 它允许给一个事件注册多个 listener。当存在其他的库时，使用 DHTML 库或者 Mozilla extensions 不会出现问题。
• 它提供了一种更精细的手段控制 listener 的触发阶段。（即可以选择捕获或者冒泡）。
• 它对任何 DOM 元素都是有效的，而不仅仅只对 HTML 元素有效。

除了这种方法以外，后文会简单阐述一些注册 listener 的旧方法 。

在事件分派时添加事件处理器

当一个 EventListener 在 EventTarget 正在处理事件的时候被注册到 EventTarget 上，它不会被立即触发，但可能在事件流后面的事件触发阶段被触发，例如可能在捕获阶段添加，然后在冒泡阶段被触发。

多个相同的事件处理器

同一个 EventTarget 注册了多个相同的 EventListener，那么重复的实例会被抛弃。所以这么做不会使得 EventListener 被调用两次，也不需要用 removeEventListener 手动清除多余的EventListener ，因为重复的都被自动抛弃了。

处理过程中 this 的值的问题

通常来说this的值是触发事件的元素的引用，这种特性在多个相似的元素使用同一个通用事件监听器时非常让人满意。

当使用 addEventListener() 为一个元素注册事件的时候，句柄里的 this 值是该元素的引用。其与传递给句柄的 event 参数的 currentTarget 属性的值一样。

如果一个事件的属性( 例如. onClick)是指定在一个HTML的元素上的，那么使用this的效果，和使用addEventListener来绑定事件的效果是一样的； this的出现代表了元素的引用。注意到在一个函数里this调用的的效果和标准规则里面是一样的。