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以及滑轮滑动事件的应用的更多相关文章

  1. JS移动客户端--触屏滑动事件 banner图效果

    JS移动客户端--触屏滑动事件 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的t ...

  2. 移动设备、手机浏览器Javascript滑动事件代码

    以下经过本人测试成功. 测试平台:三星S5830I 操作系统:Android 2.3.6 浏览器:UC浏览器 HTML标准:HTML5 测试了三个事件:touchstart.touchmove 和 t ...

  3. 移动端H5开发 (滑动事件)

    最近一直在做手机App H5的开发,在开发过程中,经常会遇到很多滑动事件,写个demo,分享自己的一些写法.(如写的不好,轻喷!) 直接贴代码 html css代码 <!DOCTYPE html ...

  4. 关于js的addEventListener 和一些常用事件

    element.addEventListener(<event-name>, <callback>, <use-capture>);document.addEven ...

  5. dom addeventlistener与id 绑定事件的区别

    文档中有写. //addEventListener() 方法用于向指定元素添加事件句柄. //提示: 使用 removeEventListener() 方法来移除 addEventListener() ...

  6. android 解决ListView点击与滑动事件冲突

    如果你的ListView的Item有滑动功能,但又点击Item跳转到其它activity,这样若是在Adapter里面写点击事件是会导致滑动事件获取不到焦点而失效: 解决方法:不要在adapter里面 ...

  7. webview滑动事件 与内部html左右滑动事件冲突问题的解决办法

    最近在做个混合app , 用html做页面,然后通过webview嵌套在activity中,效果是这样: 开始还是比较顺利,增加了菜单退出按钮,返回键页面回退功能,页面加载显示加载图标(在app端实现 ...

  8. Android判断Touch为滑动事件还是操作控件

    Android判断Touch为滑动事件还是操作控件 因为在项目中要判断WebView是否处于滚动状态,但它不像ListView有onScrollStateChanged方法来监听,要实现就得手动监听它 ...

  9. 关于dom节点绑定滑动事件导致浏览器上下滑动失效解决方案--黄丕巧

    1.移动端开发往往需要添加一下自定义的左右滑动事件,但是添加了左右滑动事件之后就要阻止浏览器大默认事件,否则dom节点的滑动事件和浏览器本身的滑动会出现冲突,导致滑动的时候会出现消失瞬间再出现的效果 ...

随机推荐

  1. C#以太坊基础入门

    在这一部分,我们将使用C#开发一个最简单的.Net控制台应用,来接入以太坊节点,并打印 所连接节点旳版本信息.通过这一部分的学习,你将掌握以下技能: 如何使用节点仿真器 如何在命令行访问以太坊节点 如 ...

  2. 雷林鹏分享:jQuery EasyUI 数据网格 - 扩展行显示细节

    数据网格(datagrid)可以改变它的视图(view)来显示不同的效果.使用详细视图,数据网格(datagrid)可以在数据行的左边显示展开按钮("+" 或者 "-&q ...

  3. 浅谈awk命令

    简介 awk是一个强大的文本分析工具,相对于grep.sed命令,awk在其对数据分析并生成报告时,显得尤为强大.简单来说awk就是把文件逐行的读入,然后将每行切片,再对切开的部分进行处理. awk有 ...

  4. hdu多校第3场A.Ascending Rating

    Problem A. Ascending Rating Time Limit: / MS (Java/Others) Memory Limit: / K (Java/Others) Total Sub ...

  5. MVC和MVVM对比

    被误解的 MVC MVC 的历史 MVC,全称是 Model View Controller,是模型 (model)-视图 (view)-控制器 (controller) 的缩写.它表示的是一种常见的 ...

  6. easyui datebox时间控件如何只显示年月

    easyui datebox控件,只显示年月,不显示年月日 需要的效果图如下: 具体的js代码: <script> $(function(){ intiMonthBox('costTime ...

  7. laravel5.5 调用系统自带登陆认证auth

    1执行命令 php artisan make:auth 2 编辑文件 config/auth guardes 'admin' => [ 'driver' => 'session', 'pr ...

  8. VSTO:使用C#开发Excel、Word【12】

    Excel对象模型中的事件了解excel对象模型中的事件至关重要,因为这通常是代码运行的主要方式.本章将检查Excel对象模型中的所有事件,引发事件以及可能与这些事件关联的代码类型. Excel对象模 ...

  9. 特殊场景Sql优化

    一.大表的大数据量修改 问题: 1.大量的行级锁,长时间阻塞   2.主从延时,大批数据不一致 解决方法: 分批次修改 二.大表的表结构修改 问题:长时间锁表 解决方法: 1.从库修改,主从切换,主库 ...

  10. OSI七层模型与TCP/IP五层模型(转)

    reference:https://www.cnblogs.com/qishui/p/5428938.html         博主是搞是个FPGA的,一直没有真正的研究过以太网相关的技术,现在终于能 ...