## 事件對(duì)象 event1 event事件對(duì)象,表示用來獲取事件的詳細(xì)信息，比如得到鼠標(biāo)的橫坐標(biāo)：事件對(duì)象.clientX(clientX是可視區(qū)坐標(biāo))window.onclick = function(ev){var oEvent = ev || event;//event為IE8和IE8以下瀏覽器瀏覽器事件對(duì)象可以直接使用；//以上代碼可以判斷是否傳遞了事件對(duì)象參數(shù)，如果傳遞了則使用傳遞的事件對(duì)象ev，否則使用window.eventalert(oEvent.type);//click類型 }2 事件對(duì)象的兼容寫法a.IE8和IE8以下瀏覽器不能傳遞參數(shù)，只能使用window.event對(duì)象。b.谷歌瀏覽器既可以傳遞事件對(duì)象參數(shù)，也可以使用window.envent對(duì)象，十分全面。c.火狐瀏覽器只能使用傳遞的事件對(duì)象參數(shù)。因此針對(duì)不同瀏覽器，兼容性寫法如下：事件.事件類型 = function(ev){//事件類型如鼠標(biāo)點(diǎn)擊事件var oEvent = ev || event;}## 鼠標(biāo)滾輪事件1 非火狐: mousewheel這里，event.wheelDelta < 0向下滾動(dòng)2 火狐:DOMMouseScroll這里，event.detail > 0 為向下滾動(dòng)，event.detail < 0 為向上滾動(dòng)3.瀏覽器兼容性寫法如下：document.onmousewheel = wheelHander;//非火狐document.addEventListener('DOMMouseScroll',wheelHander,false);//火狐function wheelHander(e){//事件的兼容性寫法 oEvent = e || window.event;if(oEvent.wheelDelta){//非火狐if(oEvent.wheelDelta > 0){//向上滾動(dòng) }else{//向下滾動(dòng) }}else if(oEvent.detail){if(oEvent.detail > 0){//向下滾動(dòng) }else{//向上滾動(dòng) }}}3 案例:使用滾輪改變圖片的大小var img = document.getElementsByTagName('img')[0];//非火狐實(shí)現(xiàn)滾輪效果document.onmousewheel = wheelHander;//非火狐//火狐一家使用DOMMouseScroll實(shí)現(xiàn)滾輪效果document.addEventListener('DOMMouseScroll',wheelHander,false);function wheelHander(e){oEvent = e || window.event;if(oEvent.wheelDelta){//非火狐if(oEvent.wheelDelta > 0){//向上滾動(dòng)img.height++;}else{//向下滾動(dòng)img.height--;}}else if(oEvent.detail){if(oEvent.detail > 0){//向下滾動(dòng)img.height--;}else{//向上滾動(dòng)img.height++;}}}

?

---

?

獲取更多前端知識(shí)，請(qǐng)關(guān)注下方二維碼 ↓↓↓↓↓↓

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/menglong1214/p/9595009.html

總結(jié)

以上是生活随笔為你收集整理的js中的鼠标滚轮事件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。