js事件详解二：鼠标和滚轮事件

Lucky_Boy 发布于2019-08-21 10:37 / 1662人阅读

摘要：在级事件中定义了个鼠标事件，分别是。取消鼠标事件的默认行为还会影响其他事件，因为鼠标事件与其他事件是密不可分的关系。同样的，和支持这个事件。兼容各个浏览器的事件监听对象该对象封装了和级事件的常用事件函数。

概述

鼠标事件是web开发中最常用的一类事件，毕竟鼠标还是最主要的定位设备。在DOM3级事件中定义了9个鼠标事件，分别是：click,dbclick,mousedown,mouseenter,mouseleave,mousemove,mouseout,mouseover。这九个鼠标事件的具体含义相信大家从字面上看就能大概的了解了。页面上所有的元素都支持鼠标事件，除了mouseenter和mouseleave，所有的鼠标事件都会冒泡，也可以被取消，而取消鼠标事件将会影响浏览器的默认行为。取消鼠标事件的默认行为还会影响其他事件，因为鼠标事件与其他事件是密不可分的关系。

下面简单介绍下各个事件的含义：

click：在用户单击主鼠标按钮（一般是左边的按钮）或者按下回车键时触发。这一点对确保易访问性很重要，意味着onclick事件处理程序既可以通过键盘也可以通过鼠标执行。
dbclick：在用户双击主鼠标按钮（一般是左边的按钮）时触发。从技术上说，这个事件并不是DOM2级事件规范中规定的，但鉴于它得到了广泛支持，所以DOM3级事件将其纳入了标准。
mousedown：用户按下了任意鼠标按钮时触发。不能通过键盘触发这个事件。
mouseenter：在鼠标光标从元素外部首次移动到元素范围之内时触发。这个事件不冒泡，而且在光标移动到后代元素上不会触发。IE,Firefox9+和opera支持这个事件。
mouseleave：在位于元素上方的鼠标光标移动到元素范围之外时触发。这个事件也不冒泡，而且在光标移动到后代元素上不会触发。同样的，IE,Firefox9+和opera支持这个事件。
mousemove：当鼠标指针在元素内部移动时重复的触发。不能通过键盘触发这个事件。
mouseout：在鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发。又移入的另一个元素可能位于前一个元素的外部，也可能是这个元素的子元素。不能通过键盘触发这个事件。
mouseover：在鼠标指针位于一个元素外部，然后用户将其首次移入另一个元素边界之内时触发。不能通过键盘触发这个事件。
mouseup：在用户释放鼠标按钮时触发。不能通过键盘触发这个事件。

兼容各个浏览器的事件监听对象：

var EventUntil={
        addHandler:function(element,type,handler){
            if(element.addEventListener){
                element.addEventListener(type,handler,false);
            }else if(element.attachEvent){
                element.attachEvent("on"+type,handler);
            }else{
                element["on"+type]=handler;
            }
        },
        removeHandler:function(element,type,handler){
            if(element.removeEventListener){
                element.removeEventListener(type,handler,false);
            }else if(element.detachEvent){
                element.detachEvent("on"+type,handler);
            }else{
                element["on"+type]=null;
            }
        },
        getEvent:function(event){
            return event?event:window.event;
        },
        getTarget:function(event){
            return event.target||event.srcElement;
        },
        preventDefault:function(event){
            if (event.preventDefault) {
                event.preventDefault();
            }else{
                event.returnValue=false;
            }
        },
        stopPropagation:function(event){
            if(event.stopPropagation){
                event.stopPropagation();
            }else{
                event.cancelBubble=true;
            }
        }
    }

该对象封装了ie和dom级事件的常用事件函数。大家可以参考着使用。

私有云专线服务鼠标滚轮事件 js 滚轮向上事件 js事件详解 js写鼠标抬起事件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85890.html

一文读懂鼠标滚轮事件（wheelEvent）

摘要：下面正式推荐大神的博文前段时间使用做滚动条控件，添加滚轮事件时，查阅了一些资料，发现大都是文档描述或简单示例，对于开发者还是不够。一测试目标探索事件中常用属性的有效性，垂直步进算法滑动幅度以及与电脑个性化设置的关联。最近在用VUE写一个后台管理系统，顶部标签页涉及鼠标滚轮事件，由于每个浏览器对滚轮事件的处理方式不一样，个人对这个又不懂，折腾了很久，参考了大神的代码，也把百度翻烂了，找...

doodlewind 2019-08-23 14:06 评论0 收藏0
Dom 事件详解

摘要：级事件规定事件流包括三个阶段事件捕获目标事件事件冒泡。返回布尔值，指示事件是否可拥可取消的默认动作。返回其事件监听器触发该事件的元素。返回当前对象表示的事件的名称。不再派发事件常用于阻止事件冒泡。事件是 JavaScript 与 HTML 交互的基础。要实现用户与页面的交互，先要对目标元素绑定特定的事件、设置事件处理函数，然后用户触发事件，事件处理函数执行，产生交互效果。 DOM 事...

xiaokai 2019-08-30 15:56 评论0 收藏0
Dom 事件详解

摘要：级事件规定事件流包括三个阶段事件捕获目标事件事件冒泡。返回布尔值，指示事件是否可拥可取消的默认动作。返回其事件监听器触发该事件的元素。返回当前对象表示的事件的名称。不再派发事件常用于阻止事件冒泡。事件是 JavaScript 与 HTML 交互的基础。要实现用户与页面的交互，先要对目标元素绑定特定的事件、设置事件处理函数，然后用户触发事件，事件处理函数执行，产生交互效果。 DOM 事...

CodeSheep 2019-08-02 14:27 评论0 收藏0
Dom 事件详解

摘要：级事件规定事件流包括三个阶段事件捕获目标事件事件冒泡。返回布尔值，指示事件是否可拥可取消的默认动作。返回其事件监听器触发该事件的元素。返回当前对象表示的事件的名称。不再派发事件常用于阻止事件冒泡。事件是 JavaScript 与 HTML 交互的基础。要实现用户与页面的交互，先要对目标元素绑定特定的事件、设置事件处理函数，然后用户触发事件，事件处理函数执行，产生交互效果。 DOM 事...

DevTalking 2019-08-26 13:34 评论0 收藏0