addEventListener以及滑轮滑动事件的应用

Posted 2020-08-10 宥宁

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则相反。