之前學習了onmouSEOver，onmousedown等鼠標事件，今天來看看鼠標的滾輪事件，瀏覽器兼容一直是讓人比較惡心的事情，今天就讓我們將惡心進行到底，看看這個惡心的鼠標滾輪事件！
鼠標滾輪事件在IE和谷歌瀏覽器Chrome下是通過onmousewheel這個事件實現的，但是火狐FF下卻不識別onmousewheel，在FF下需要用DOMMouseScroll，并且必須用“事件監聽”方式添加事件才有效；
而大家都知道“事件監聽”方式綁定事件：
IE下是通過attachEvent實現事件監聽
而Chrome和FF下通過addEventListener 來實現事件監聽
這個場面是夠惡心了：
事件監聽 滾輪事件
谷歌 addEventListener onmousewheel
IE attachEvent onmousewheel
FF addEventListener DOMMouseScroll
為了瀏覽器兼容，我們自己封裝一個“綁定事件的函數”
function addEvent(obj,xEvent,fn) { if(obj.attachEvent){ obj.attachEvent('on'+xEvent,fn); }else{ obj.addEventListener(xEvent,fn,false); }}window.onload = function () { //接著利用我們自己封裝的函數給div綁定事件， var oDiv = document.getElementById('div1'); addEvent(oDiv,'mousewheel',onMouseWheel); addEvent(oDiv,'DOMMouseScroll',onMouseWheel); // 當滾輪事件發生時，執行onMouseWheel這個函數 function onMouseWheel() { alert('haha'); }}有時候當鼠標滾輪滾動的時候我們需要知道滾輪是向上滾的還是向下滾的。
在IE和Chrome下通過event.wheelDelta的返回值可以知道滾輪是向上滾的還是向下滾的
當返回值為正值的時候，說明是向上滾
當返回值是負值的時候，說明是向下滾
但是event.wheelDelta在火狐下并不起作用，在火狐下需要通過event.detail來知道滾輪是向上滾的還是向下滾，火狐下還有一點不同：
當返回值為正值的時候，說明是向下滾
當返回值是負值的時候，說明是向上滾
接下來，實現當滾輪向下滾動時div的高度增大，向上滾時div高度減小
需要定義一個標志位，標志滾輪是向上滾還是向下滾
需要做瀏覽器兼容
還要阻止瀏覽器默認行為
window.onload = function () { var oDiv = document.getElementById('div1'); function onMouseWheel(ev) {/*當鼠標滾輪事件發生時，執行一些操作*/ var ev = ev || window.event; var down = true; // 定義一個標志，當滾輪向下滾時，執行一些操作 down = ev.wheelDelta?ev.wheelDelta<0:ev.detail>0; if(down){ oDiv.style.height = oDiv.offsetHeight+10+'px'; }else{ oDiv.style.height = oDiv.offsetHeight-10+'px'; } if(ev.PReventDefault){/*FF 和 Chrome*/ ev.preventDefault();// 阻止默認事件 } return false; } addEvent(oDiv,'mousewheel',onMouseWheel); addEvent(oDiv,'DOMMouseScroll',onMouseWheel); } function addEvent(obj,xEvent,fn) { if(obj.attachEvent){ obj.attachEvent('on'+xEvent,fn); }else{ obj.addEventListener(xEvent,fn,false); } }新聞熱點
疑難解答
