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则相反。
addEventListener以及滑轮滑动事件的应用的更多相关文章
- JS移动客户端--触屏滑动事件 banner图效果
JS移动客户端--触屏滑动事件 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的t ...
- 移动设备、手机浏览器Javascript滑动事件代码
以下经过本人测试成功. 测试平台:三星S5830I 操作系统:Android 2.3.6 浏览器:UC浏览器 HTML标准:HTML5 测试了三个事件:touchstart.touchmove 和 t ...
- 移动端H5开发 (滑动事件)
最近一直在做手机App H5的开发,在开发过程中,经常会遇到很多滑动事件,写个demo,分享自己的一些写法.(如写的不好,轻喷!) 直接贴代码 html css代码 <!DOCTYPE html ...
- 关于js的addEventListener 和一些常用事件
element.addEventListener(<event-name>, <callback>, <use-capture>);document.addEven ...
- dom addeventlistener与id 绑定事件的区别
文档中有写. //addEventListener() 方法用于向指定元素添加事件句柄. //提示: 使用 removeEventListener() 方法来移除 addEventListener() ...
- android 解决ListView点击与滑动事件冲突
如果你的ListView的Item有滑动功能,但又点击Item跳转到其它activity,这样若是在Adapter里面写点击事件是会导致滑动事件获取不到焦点而失效: 解决方法:不要在adapter里面 ...
- webview滑动事件 与内部html左右滑动事件冲突问题的解决办法
最近在做个混合app , 用html做页面,然后通过webview嵌套在activity中,效果是这样: 开始还是比较顺利,增加了菜单退出按钮,返回键页面回退功能,页面加载显示加载图标(在app端实现 ...
- Android判断Touch为滑动事件还是操作控件
Android判断Touch为滑动事件还是操作控件 因为在项目中要判断WebView是否处于滚动状态,但它不像ListView有onScrollStateChanged方法来监听,要实现就得手动监听它 ...
- 关于dom节点绑定滑动事件导致浏览器上下滑动失效解决方案--黄丕巧
1.移动端开发往往需要添加一下自定义的左右滑动事件,但是添加了左右滑动事件之后就要阻止浏览器大默认事件,否则dom节点的滑动事件和浏览器本身的滑动会出现冲突,导致滑动的时候会出现消失瞬间再出现的效果 ...
随机推荐
- C#以太坊基础入门
在这一部分,我们将使用C#开发一个最简单的.Net控制台应用,来接入以太坊节点,并打印 所连接节点旳版本信息.通过这一部分的学习,你将掌握以下技能: 如何使用节点仿真器 如何在命令行访问以太坊节点 如 ...
- 雷林鹏分享:jQuery EasyUI 数据网格 - 扩展行显示细节
数据网格(datagrid)可以改变它的视图(view)来显示不同的效果.使用详细视图,数据网格(datagrid)可以在数据行的左边显示展开按钮("+" 或者 "-&q ...
- 浅谈awk命令
简介 awk是一个强大的文本分析工具,相对于grep.sed命令,awk在其对数据分析并生成报告时,显得尤为强大.简单来说awk就是把文件逐行的读入,然后将每行切片,再对切开的部分进行处理. awk有 ...
- hdu多校第3场A.Ascending Rating
Problem A. Ascending Rating Time Limit: / MS (Java/Others) Memory Limit: / K (Java/Others) Total Sub ...
- MVC和MVVM对比
被误解的 MVC MVC 的历史 MVC,全称是 Model View Controller,是模型 (model)-视图 (view)-控制器 (controller) 的缩写.它表示的是一种常见的 ...
- easyui datebox时间控件如何只显示年月
easyui datebox控件,只显示年月,不显示年月日 需要的效果图如下: 具体的js代码: <script> $(function(){ intiMonthBox('costTime ...
- laravel5.5 调用系统自带登陆认证auth
1执行命令 php artisan make:auth 2 编辑文件 config/auth guardes 'admin' => [ 'driver' => 'session', 'pr ...
- VSTO:使用C#开发Excel、Word【12】
Excel对象模型中的事件了解excel对象模型中的事件至关重要,因为这通常是代码运行的主要方式.本章将检查Excel对象模型中的所有事件,引发事件以及可能与这些事件关联的代码类型. Excel对象模 ...
- 特殊场景Sql优化
一.大表的大数据量修改 问题: 1.大量的行级锁,长时间阻塞 2.主从延时,大批数据不一致 解决方法: 分批次修改 二.大表的表结构修改 问题:长时间锁表 解决方法: 1.从库修改,主从切换,主库 ...
- OSI七层模型与TCP/IP五层模型(转)
reference:https://www.cnblogs.com/qishui/p/5428938.html 博主是搞是个FPGA的,一直没有真正的研究过以太网相关的技术,现在终于能 ...