一个页面绑定多个onscroll事件

痛定思痛。 2021-06-24 16:09 634阅读 0赞

默认一个页面只能同时存在一个window.onscroll函数。有的时候我们会引入工具的js框架，在框架中使用onscroll统一监听每个页面，但是在某个页面，我们可能还要使用onscroll来监控滚动条，完成具体某个业务逻辑，这是该怎么做呢？

方法1：只适用有两个滚动事件共存时适用，当有多个的时候不推荐使用这个方法，有多个会被覆盖

方法2：

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

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

对于同一元素，绑定多个事件，生效问题总结如下：

1）使用onclick方式，只能最后一个事件生效；

2）使用jquery、或者addEventListener，可以使多个事件生效；

<!doctype html>
    <html>
    <head>
    <title>throttle测试</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    
    
    <script type="text/javascript">
    
    
    $(document).ready(function(){
    	//一般情况下，如果给一个dom对象绑定同一个事件，只有最后一个会生效
    	document.getElementById('clickme').onclick = function (e) {
    		console.log("123");
    	};
    	document.getElementById('clickme').onclick = function (e) {
    	  console.log("234");
    	};
    	
    	//使用addEventListener/attachEvent绑定，可以是多个事件顺序生效
    	document.getElementById('clickme').addEventListener('click',function (e) {
    		console.log("123");
    	});
    	document.getElementById('clickme').addEventListener('click',function (e) {
    		console.log("321");
    	});
    	
    	//使用jquery绑定，可以是多个事件顺序生效
    	$("#clickme").click(function() {
    		console.log(111);
    	});
    	$("#clickme").click(function() {
    		console.log(222);
    	});
    
    });
    </script>
    </head>
    <body>
    
    <div id="clickme">CLICK ME</div>
    
    </body>
    
    </html>