一個頁面繫結多個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>