码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-04-09 18:39:59      阅读:178      评论:0      收藏:0      [点我收藏+]

标签:hand   判断   max   执行   min   名称   图片放大   布尔   math   

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

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

标签:hand   判断   max   执行   min   名称   图片放大   布尔   math   

原文地址:https://www.cnblogs.com/123456www/p/10678628.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!