javascript鼠标中键滚动事件介绍

javascript鼠标中键滚动事件介绍:
在实际应用中,鼠标的一些事件非常常用,例如,onclick事件、onmouseover事件等,这里就不介绍了,具体可以参阅javascript的onclick事件javascript的onmouseover事件一章节。 还有一种事件比较少用,那就是鼠标中键滚轮滚动事件,下面就通过代码实例简单介绍一下中键滚轮事件。
IE浏览器和谷歌浏览器支持mousewheel事件,也就是鼠标中键滚动事件,但是遗憾的是火狐浏览器并不支持此事件,而是支持DOMMouseScroll事件,下面就这两个做一下简单的分析对别:
一.mousewheel事件:
event.wheelDelta返回值是120的倍数,如果属性值为正数则是向上滚动,如果是负数则是向下滚动。
滚动幅度的大小等于event.wheelDelta/120。
二.DOMMouseScroll事件:
event.detail返回值都是3的倍数,和event.wheelDelta相反,如果属性值为负数,则是向上滚动,如果是正数则是向下滚动。
特别注意:
DOMMouseScroll不支持前面加"on"事件注册方式,例如obj.onclick=funcion(){}。
下面对上面做一下兼容性处理,以达到在任何浏览器中都可以顺利运行。
代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
#thediv{
  width:100px;
  height:100px;
  background-color:red
}
</style>
<script type="text/javascript">
var addEvent=(function(){
  var _eventCompat=function(event){
    var type=event.type;
    if(type==‘DOMMouseScroll‘||type==‘mousewheel‘){
      event.delta=(event.wheelDelta)?event.wheelDelta/120:-(event.detail||0)/3;
    }

    if(event.srcElement&&!event.target){
      event.target=event.srcElement;
    }

    if(!event.preventDefault&&event.returnValue!==undefined){
      event.preventDefault=function(){
        event.returnValue=false;
      };
    }
    return event;
  };

  if(window.addEventListener){
    return function(el, type, fn, capture){
      if(type==="mousewheel"&&document.mozHidden!==undefined){
        type="DOMMouseScroll";
      }
      el.addEventListener(type,function(event){
        fn.call(this, _eventCompat(event));
      },capture||false);
    }
  }
  else if(window.attachEvent){
    return function(el, type, fn, capture){
      el.attachEvent("on" + type, function(event){
        event = event || window.event;
        fn.call(el, _eventCompat(event));
      });
    }
  }
  return function(){};
})();
window.onload=function(){
  var height=100;
  var width=100;
  var thediv=document.getElementById("thediv");
  function size(event){
    width=width+event.delta;
    height=height+event.delta;
    thediv.style.width=width+"px";
    thediv.style.height=height+"px";
  }
  addEvent(thediv,"mousewheel",size,false);
}
</script>
</head>
<body>
<div id="thediv"></div>
</body>
</html>

以上代码,当鼠标放在div中时候,滚动鼠标中键能够缩放div的大小,下面介绍一下实现过程:
一.实现原理:
代码看上去稍显复杂,其实特别的简单,就是根据在不同浏览器中,相关事件的特点,进行了一些兼容性处理,这是必然的操作,这里就不多介绍了,大家直接看代码注释可以了解相关细节。
二.代码注释:
1.var addEvent=(function(){})(),声明一个变量,它的值就是匿名函数的返回值,这个返回值就是一个函数对象。
2.var _eventCompat=function(event){})(),声明一个变量,它的值是一个匿名函数,此匿名函数能够封装一个事件对象,对时间对象的属性做一些兼容性处理,此函数的参数就是事件对象。
3.var type=event.type,将事件类型类型赋值给变量type。
4.if(type==‘DOMMouseScroll‘||type==‘mousewheel‘),如果事件类型是‘DOMMouseScroll‘或者‘mousewheel‘。
5.event.delta=(event.wheelDelta)?event.wheelDelta/120:-(event.detail||0)/3,delta是一个事件对象的自定义属性,如果支持event.wheelDelta属性(谷歌和IE浏览器)则使用event.wheelDelta/120,这会得到滚动的幅度,event.wheelDelta的返回值都是120的倍数,如果在火狐浏览器下,则使用(event.detail||0)/3,event.detail的返回值是3的倍数。
6.if(event.srcElement&&!event.target) ,如果事件对象支持srcElement属性且不支持target属性,这说明是IE8和IE8以下浏览器。
7.event.target=event.srcElement,将target属性值修改为event.srcElement。
8.if(window.addEventListener) ,如果支持addEventListener函数,也就是谷歌、火狐或者IE8以上浏览器。
9.return function(el, type, fn, capture){},返回一个函数对象,此函数具有四个参数,第一个参数是要注册事件处理函数的对象,第二个是事件类型,第三个是事件处理函数,第四个是一个布尔值,用来说明是捕获类型还是冒泡类型。
10.if(type==="mousewheel"&&document.mozHidden!==undefined){type="DOMMouseScroll"} 如果是火狐浏览器,则将type值设置为DOMMouseScroll。document.mozHidden在火狐浏览器中是个布尔值,在谷歌和IE浏览器中返回值是undefined。
11.el.addEventListener(type,function(ev){},capture||false)注册事件处理函数。
12.fn.call(this, _eventCompat(ev));,将函数fn的调用对象设置为el,参数为一个封装好的事件对象,参数ev是原始的事件对象。
相关阅读:
1.srcElement属性可以参阅javascript的event.srcElement事件属性一章节。 
2.target属性可以参阅javascript的event.target事件属性一章节。 
3.preventDefault()函数可以参阅javascript的preventDefault()方法一章节。 
4.addEventListener()函数可以参阅addEventListener()和attachEvent()函数的用法一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=10488

更多内容可以参阅:http://www.softwhy.com/javascript/

时间: 2024-10-06 07:48:40

javascript鼠标中键滚动事件介绍的相关文章

javascript/jquery键盘事件介绍

一.首先需要知道的是:1.keydown()keydown事件会在键盘按下时触发.2.keyup()keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件3.keypress()keypress事件会在敲击按键时触发,我们可以理解为按下并抬起同一个按键 二.获得键盘上对应的ascII码: $(document).keydown(function(event){ alert(event.keyCode); }); $tips: 上面例子中,event.keyCode就可以帮助我们获取到我们

javascript滚动栏响应鼠标滑轮的实现上下滚动事件

实现鼠标滚动滚轮事件: <script type="text/javascript"><pre name="code" class="javascript"> var scrollFunc=function(e){ e=e || window.event; if(e.wheelDelta){//IE/Opera/Chrome if(e.wheelDelta==120) { //向上滚动事件 alert(e.wheelDet

javascript滚动条响应鼠标滑轮的实现上下滚动事件

实现鼠标滚动滚轮事件: <script type="text/javascript"> var scrollFunc=function(e){ e=e || window.event; if(e.wheelDelta){//IE/Opera/Chrome if(e.wheelDelta==120) { //向上滚动事件 alert(e.wheelDeta +"向上"); }else { //向上滚动事件 alert(e.wheelDeta +"

深入理解javascript中的事件循环event-loop

前面的话 本文将详细介绍javascript中的事件循环event-loop 线程 javascript是单线程的语言,也就是说,同一个时间只能做一件事.而这个单线程的特性,与它的用途有关,作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM.这决定了它只能是单线程,否则会带来很复杂的同步问题.比如,假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线程为准? 为了利用多核CPU的计算能力,HTML

javascript无缝滚动

无缝滚动好像是互联网广告最大的一个载体,可以用“无处不在”来形容它.不过它比起早期的闪光字体,浮动广告算进步了.由于需求巨大,做前台迟早会遇到它.我先给出结构层部分,再慢慢讲解其实现原理. <dl id="marquee">   <dt>     <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s017.jpg" alt="无缝滚动&quo

JavaScript权威设计--事件处理介绍(简要学习笔记十七)

1.事件相关概念 事件类型:一个用来说明发生什么类型事件的字符串 事件目标:是发生的事件或与之相关的对象. 事件处理程序(事件监听程序):是处理货响应事件的函数. 事件对象:是与特定事件相关并且包含有关该事件详细信息的对象. 事件传播:是浏览器决定哪个对象触发其事件处理程序的过程. 事件捕获:在容器元素上注册的特定处理程序有机会再事件传播打破真实目标之前拦截它. 阻止标签默认事件的发生 2.Window事件 focus,blur不冒泡.focusin,focusout冒泡. load当文档和其他

了解javascript中的事件(一)

零.寒暄 由于刚入职,近期事情繁多,今天好不容易中期答辩完事,晚上有一些时间,来给大家分享一篇博文. 这段时间每天写js接触事件比较多,自己会使用,但是用的时候比较混乱,现在系统的整理下,好了,闲话不多说,谈正事! 一.事件概念 什么是事件?说白了,事件是文档或浏览器中发生的特定交互瞬间!比如鼠标点击,滑过等等. 二.事件流 事件流就是描述了页面中接受事件的顺序.在浏览器发展的初期,两大浏览器厂商IE和Netscape互掐,出现了一个坑爹的情况,那就是他们对事件流的解释出现了两中截然相反的定义.

vue监听滚动事件,实现滚动监听

在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="https://unpkg

ios中iframe的scroll滚动事件替代方法

在公众号的开发中,遇到ios中iframe的scroll滚动事件失效,在此做下记录. 因为接口获取的数据必须放在iframe中展示,滚动到底部按钮变亮,如图: 代码如下: <!DOCTYPE html> <html> <head> <title>贷款合同</title> <% include ../include/header.html %> </head> <body style="background: