addEventListener以及滑輪滑動事件的應用

addEventListener用於向元素添加事件，而其適用於較新版的IE瀏覽器（如IE9），對於IE6/7/8來說，應該用attachEvent

下面的代碼即為向<img>元素添加事件

var myimage = document.getElementById("img");   
if (myimage.addEventListener) {   
    //addEventListener適用於版本較新的IE瀏覽器 ，如IE9以及火狐瀏覽器，
    myimage.addEventListener("mousewheel", MouseWheelHandler, false);
    // Firefox瀏覽器使用的滾輪事件是 DOMMouseScroll
    myimage.addEventListener("DOMMouseScroll", MouseWheelHandler, false);   
}   
//attachEvent適用於舊的 IE瀏覽器，IE 6/7/8   
else myimage.attachEvent("onmousewheel", MouseWheelHandler);  

下面說一下addEventListener的參數，其共有三個參數：

1：所添加的事件名稱（需要注意的是，對於addEventListener所添加的事件不需要加on，而對於attachEvent需要添上on）。

2：當第一個參數的事件發生后調用的函數。

3：第三個參數為布爾值類型，當第三個參數設置為true就在捕獲過程中執行處理函數，反之就在冒泡過程中執行處理函數。

對於滑輪滑動事件來說，IE等瀏覽器所使用的事件名稱是mousewheel而火狐瀏覽器使用的是DOMMouseScroll。

下面的方法用於當滑輪向上向下滑動時，分別使圖片放大以及縮小：

function MouseWheelHandler(e) {
var e = window.event;
var delta = Math.max(-1, Math.min(1, (e.wheelDelta)));
myimage.style.width = Math.max(727, myimage.width + (30 * delta)) + "px";
myimage.style.height = Math.max(500, myimage.height + (30 * delta)) + "px";
return false;
}

 

event代表事件的狀態，例如觸發event對象的元素、鼠標的位置及狀態、按下的鍵等等。event對象只在事件發生的過程中才有效。event的某些屬性只對特定的事件有意義。比如，fromElement 和 toElement 屬性只對onmouseover 和 onmouseout 事件有意義；還有上面的代碼中，wheelDelta只對mousewheel事件有意義。 

 

判斷滾輪向上或向下在瀏覽器中也要考慮兼容性，現在五大瀏覽器（IE、Opera、Safari、Firefox、Chrome）中Firefox 使用detail，其余四類使用wheelDelta；兩者只在取值上不一致，代表含義一致，detail與wheelDelta只各取兩個值，detail只取±3，wheelDelta只取±120，其中對於wheelDelta正數表示為向上，負數表示向下，而對於detail則相反。