一個頁面繫結多個onscroll事件
阿新 • • 發佈：2019-01-14
預設一個頁面只能同時存在一個window.onscroll函式。有的時候我們會引入工具的js框架，在框架中使用onscroll統一監聽每個頁面，但是在某個頁面，我們可能還要使用onscroll來監控滾動條，完成具體某個業務邏輯，這是該怎麼做呢？
方法1：只適用有兩個滾動事件共存時適用，當有多個的時候不推薦使用這個方法，有多個會被覆蓋
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)})對於同一元素，繫結多個事件，生效問題總結如下：
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>