addEventListener解决多个window.onscroll共存问题
来源:互联网 发布:2016年网络流行关键词 编辑:程序博客网 时间:2024/06/05 06:07
window.onscroll=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() 方法添加的事件句柄。
浏览器支持
表格中的数字表示支持该方法的第一个浏览器的版本号。
注意: Internet Explorer 8 及更早IE版本不支持 addEventListener() 方法,,Opera 7.0 及 Opera 更早版本也不支持。 但是,对于这些不支持该函数的浏览器,你可以使用 attachEvent() 方法来添加事件句柄 (查看 "更多实例" 了解跨浏览器的解决方案)。
语法
参数值
注意: 不要使用 "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调用的的效果和标准规则里面是一样的。
- addEventListener解决多个window.onscroll共存问题
- 多个onscroll事件解决
- 多个window.onscroll的解决方法
- 多个window.onscroll的解决方法
- window.onscroll无效问题
- window.addEventListener来解决让一个js事件执行多个函数
- window.addEventListener来解决让一个js事件执行多个函数
- window.addEventListener来解决让一个js事件执行多个函数
- devices命令解决Symbian多个SDK共存问题
- window.onload多个共存 - 借鉴jQuery.noConflict的思路
- 多个jquery.datatable共存,checkbox全选异常问题的解决
- Mina中关于多个同类型Filter(如ProtocolCodecFilter)实例共存问题的解决
- Mina中关于多个同类型Filter(如ProtocolCodecFilter)实例共存问题的解决
- 解决多个版本的python共存时的问题 => 持续更新
- 解决Ubuntu Windows共存 8个小时时差问题
- 解决Ubuntu Windows共存 8个小时时差问题
- python多个版本的共存问题
- 多个apk共存安装问题
- 260. Single Number III
- 做seo是方案重要还是所谓的技术重要?
- DEDECMS转移数据时提示"dede_advancedsearch' doesn't exist"
- 图论之SPFA
- RocketMQ源码分析(一): 索引文件(IndexFile)
- addEventListener解决多个window.onscroll共存问题
- 多线程是什么?And why linux?
- 小型计算器(JAVA)
- PHP根据自己的经纬度计算5公里范围内的全部经纬度
- Office总是无响应的解决办法
- dedecms模版乱码为什么 织梦cms模版乱码怎么解决方法
- 漫画:什么是HashMap?
- istio 三日谈之二,路由规则
- NOIP2005初赛阅读程序第4题