事件类型--鼠标与滚轮事件

DOM3级事件中定义了以下9个鼠标事件:

  1. click:在用户单击主鼠标按钮或者按下回车键时触发。意味着onclick事件处理程序既可以通过键盘也可以i通过鼠标执行。
  2. dbclick:在用户双击主鼠标按钮时触发。(在DOM2中没有规定,在DOM3中做了规定)
  3. mousedown:在用户按下任意鼠标按钮时触发。
  4. mouseenter:在鼠标光标从元素外部首次移动到元素范围之内时触发。(在DOM2中没有规定,在DOM3中做了规定)
  5. mouseleave:在位于元素上方的鼠标光标移动到元素范围之外时触发。(在DOM2中没有规定,在DOM3中做了规定)
  6. mousemove:当鼠标指针在元素内部移动时重复的触发。
  7. mouseout:在鼠标位于一个元素上方,然后移动到另一个元素时触发,另一个元素可以位于另一个元素的外部,也可以是这个元素的子元素;不能通过键盘触发。
  8. mouseover:在鼠标位于一个元素外部,然后将其首次移动到另一个元素边界之内时触发;不能通过键盘触发
  9. mouseup:释放鼠标按钮时触发;不能通过键盘触发。
    除了mouseenter、mouseleave、dbclick是“DOM3级事件”新增之外,其它事件都是“DOM2级事件”中定义的。
    在一个元素上相继触发mousedown和mouseup事件,才会触发click事件。两次click事件相继触发才会触发dblclick事件。如果取消 了mousedown或mouseup中的一个,click事件就不会被触发。直接或间接取消了click事件,dblclick事件就不会被触发了。
    这四个事件的触发顺序如下:
    (1)mousedown
    (2)mouseup
    (3)click
    (4)mousedown
    (5)mouseup
    (6)click
    (7)dbclick
    可以使用如下代码检测浏览器是否支持“DOM2级”鼠标事件:
1 var isSupported = document.implementation.hasFeature("MouseEvents", "2.0");
2 alert(isSupported);    //true

是否支持“DOM3级”鼠标事件:

1 var isSupported = document.implementation.hasFeature("MouseEvent", "3.0");
2 alert(isSupported);    //true

注意:“DOM3级”鼠标事件的feature名为MouseEvent;而“DOM2级”为MouseEvents
滚轮事件其实就是一个mousewheel事件。

1、客户区坐标位置

通过事件对象event的clientX和clientY属性,可以访问事件发生时鼠标指针在视窗中的水平和垂直坐标

 EventUtil.addHandler(document, "click", function(event) {
     event =EventUtil.getEvent(event);
     alert("鼠标指针客户区坐标为:水平距离—" + event.clientX + ";" + "垂直距离—" + event.clientY + "");
 });

注意:这些值不包括页面滚动的距离,因此这个位置并不表示鼠标在页面上的位置

2、页面坐标位置

客户区坐标可以知道鼠标是在视口的什么位置发生的,而通过事件对象event的pageX和pageY属性,可以访问事件发生时鼠标指针在页面中的水平和垂直坐标

 EventUtil.addHandler(document, "click", function(event) {
     event = EventUtil.getEvent(event);
     alert("鼠标指针页面坐标为:水平距离—" + event.pageX + ";" + "垂直距离—" + event.pageY);
4 });

在页面没有滚动的情况下,pageX和pageY的值与clientX和clientY的值相等。
IE8及更早版本不支持事件对象上的页面坐标,不过可以使用客户区坐标和滚动信息计算出来。需要用到document.body(混杂模式)或者document.documentElement(标准模式)中的scrollLeft和scrollTop属性。

  EventUtil.addHandler(document, "click", function(event) {
      event = EventUtil.getEvent(event);
      var pageX = event.pageX;
      var pageY = event.pageY;
      if(pageX === undefined) {
          pageX = event.clientX + (document.body.scrollLeft || document.documentElememt.scrollLeft);
      };
      if(pageY === undefined) {
          pageY = event.clientY + (document.body.scrollTop || document.documentElememt.scrollTop);
     };
     alert("鼠标指针页面坐标为:水平距离—" + pageX + ";" + "垂直距离—" + pageY);
 });
3、屏幕坐标位置

通过事件对象event的screenX和screenY属性,可以访问事件发生时鼠标指针在电脑屏幕中的水平和垂直坐标

 event_util.addHandler(document, "click", function(event) {
     event = event_util.getEvent(event);
     alert("鼠标指针屏幕坐标为:水平距离—" + event.screenX + ";" + "垂直距离—" + event.screenY);
 });
4、修改键

Shift、Ctrl、Alt、Meta这些修改键经常被用来修改鼠标事件的行为,DOM为此规定了4个属性,表示这些修改键的状态:shiftKey、ctrlKey、altKey、metaKey。这些属性中包含的都是布尔值,如果值为true,表示相应的键被按下,否则为false。当某个鼠标事件发生时,通过检测这4个属性,就能确定用户是否按下某个修改键。

        var div = document.getElementById("myDiv");
        EventUtil.addHandler(div, "click", function(event){
            event = EventUtil.getEvent(event);
            var keys = new Array();
        //当属性值为true时,将对应修改键的名称田间到keys数组中
            if (event.shiftKey){
                keys.push("shift");
            }
            if (event.ctrlKey){
                keys.push("ctrl");
            }
            if (event.altKey){
                keys.push("alt");
            }
            if (event.metaKey){
                keys.push("meta");
            }
            alert("Keys: " + keys.join(","));
        }); 
5、相关元素

对mouseover事件而言,事件的主目标就是获得光标的元素,而相关元素就是失去光标的那个元素;对mouseout事件而言,事件的主目标就是失去光标的元素,而相关元素就是获得光标的那个元素。DOM通过event事件对象的relatedTarget属性提供了相关元素的信息,这个属性只对mouseover和mouseout事件才包含值;对于其他事件,其值为null。
IE8及之前版本不支持relatedTarget属性,但提供相似的属性。在mouseover事件触发时,IE的fromElement属性中保存着相关元素;在mouseout事件触发时,IE的toElement属性中保存了相关元素。
IE9支持所有的这些属性。
将跨浏览器取得相关元素的方法getRelatedTarge()添加到EventUtil对象中。

getRelatedTarget: function(event) {
    if(event.relatedTarget) {
        return event.relatedTarget;
    } else if(event.fromElement) {
        return event.fromElement;
    } else if(event.toElement) {
        return event.toElement;
    } else {
        return null;
    }
}
6、鼠标按钮

只有在主鼠标按钮被单击(或键盘回车键被按下)时才会触发click事件,所以需要检测按钮的信息,对于mousedown和mouseup事件而言,在event事件对象中存在一个button属性,表示按下或释放的按钮。DOM中的button属性可能有以下三个值:0,表示主鼠标按钮(鼠标左键);1,表示中间按钮;2,表示次鼠标按钮(鼠标右键)。IE8及之前版本中,也提供button属性,但其属性值与DOM的不太通属性值有很大差别。

  • 0:没有按下鼠标按钮;
  • 1:主鼠标按钮;
  • 2:次鼠标按钮;
  • 3:同时按下主鼠标按钮和次鼠标按钮;
  • 4:中间鼠标按钮;
  • 5:同时按下主鼠标按钮和中间鼠标按钮;
  • 6:同时按下次鼠标按钮和中间鼠标按钮;
  • 7:同时按下三个鼠标按钮
    EventUtil对象添加getButton()方法。
var EventUtil={
//省略其他代码
getButton: function(event) {
    if(document.implementation.hasFeature("MouseEvents", "2.0")) {   //确定event对象中存在的button属性中是否包含正确的值
        return event.button;
    } else {         //不包含正确的值,说明是ie,需要对相应的值进行规范化,将IE模型规范化为DOM方式
        switch(event.button) {
            case 0:
            case 1:
            case 3:
            case 5:
            case 7:
                return 0;
            case 2:
            case 6:
                return 2;
            case 4:
                return 1;
        }
    }
}
//省略其他代码
}
7、更多的事件信息

对于鼠标事件来说,detail属性中包含一个数值,表示在给定位置上发生多少次单击;在同一个位置上相继发生mousedown和mouseup事件算作一次单击。detail从1开始计数。如果鼠标在mousedown和mouseup事件之间移动了位置,则detail的值会被重置为0。

8、鼠标滚轮事件

当用户通过鼠标滚轮与页面交互、在垂直方向上滚动页面时,会触发mousewheel事件,该事件可以在任何元素上触发,最终会冒泡到document(IE8)或window(IE9、Opera、Chrome和Safari)对象。与mousewheel事件对应的event对象除了包含鼠标事件的所有标准信息之外,还包含一个特殊的wheelDelta属性;当用户向前滚动鼠标滚轮时,wheelDelta是120的倍数,当用户向后滚动鼠标滚轮时,wheelDelta是-120的倍数。
下述代码可以得到wheelDelta的值,但多数情况下,只需要知道滚动鼠标滚轮的方向,而这通过检测wheelDelta的正负号就可以确定。

EventUtil.addHandler(document, "mousewheel", function(event) {
     event = EventUtil.getEvent(event);
     alert(event.wheelDelta);
 });

注意:在Opera9.5及之前版本中,wheelDelta的正负号是颠倒的;可以使用浏览器检测技术来确定实际的值,如下:

EventUtil.addHandler(document, "mousewheel", function(event) {
    event = EventUtil.getEvent(event);
    var delta = (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta)
    alert(delta);
});

在Firefox浏览器中,支持一个名为DOMMouseScroll的事件,也是在鼠标滚轮滚动时触发,其被视为鼠标事件,包含与鼠标事件有关的所有信息;而有关鼠标滚轮的信息则保存在detail属性中,当向前滚动滚轮时,其值为-3的倍数,当向后滚动滚轮时,其值为3的倍数。
可以将DOMMouseScroll事件添加到页面中的任何元素,而且该事件会冒泡到window对象。所以可以像下面这样针对这个事件来添加事件处理程序:

 EventUtil.addHandler(document, "DOMMouseScroll", function(event) {
     event =EventUtil.getEvent(event);
     alert(event.detail);
 });

跨浏览器环境下的解决方案:

getWheelDelta: function(event) {
    if(event.wheelDelta) {
        return event.wheelDelta;
    } else {
        return -event.detail * 40;
    }
}

推荐阅读更多精彩内容

  • 事件流 IE和Netscape开发团队提出了完全相反的两种事件流的概念,事件冒泡流和事件捕获流。 事件冒泡 事件由...
    exialym阅读 383评论 0 9
  • 总结: 鼠标事件 1.click与dbclick事件$ele.click()$ele.click(handler(...
    阿r阿r阅读 1,025评论 2 10
  • Web 浏览器中可能发生的事件有很多类型。如前所述,不同的事件类型具有不同的信息,而 DOM3 级事件规定了以下几...
    More_5897阅读 141评论 1 0
  • 1. 鼠标事件 在DOM3级事件中定义了9个鼠标事件: click:在用户单击主鼠标按钮(一般是左边的按钮)或按下...
    MaterialCoder阅读 2,369评论 0 3
  • 转载。 拉链法实现HashTable-拉链法实现原理 线性探测法实现HashTable-线性探测法实现原理.jpg
    ybin阅读 389评论 0 1