七、鼠标事件

DOM3级事件中定义了9个鼠标事件。

mousedown:鼠标按钮被按下（左键或者右键）时触发。不能通过键盘触发。
mouseup:鼠标按钮被释放弹起时触发。不能通过键盘触发。
click:单击鼠标左键或者按下回车键时触发。这点对确保易访问性很重要，意味着onclick事件处理程序既可以通过键盘也可以通过鼠标执行。
dblclick:双击鼠标左键时触发。
mouseover:鼠标移入目标元素上方。鼠标移到其后代元素上时会触发。
mouseout:鼠标移出目标元素上方。
mouseenter:鼠标移入元素范围内触发，该事件不冒泡，即鼠标移到其后代元素上时不会触发。
mouseleave:鼠标移出元素范围时触发，该事件不冒泡，即鼠标移到其后代元素时不会触发。
mousemove:鼠标在元素内部移到时不断触发。不能通过键盘触发。

note:

在一个元素上相继触发mousedown和mouseup事件，才会触发click事件。两次click事件相继触发才会触发dblclick事件。

如果取消了mousedown或mouseup中的一个，click事件就不会被触发。直接或间接取消了click事件，dblclick事件就不会被触发了。

1、事件触发的顺序

举例：通过双击按钮，看一下上面触发的事件。

<body>

<input id="btn" type="button" value="click"/>

<script>

    var btn=document.getElementById("btn");

    btn.addEventListener("mousedown",function(event){

        console.log("mousedown");

    },false);

    btn.addEventListener("mouseup",function(){

        console.log("mouseup");

    },false);

    btn.addEventListener("click", function () {

        console.log("click");

    },false);

    btn.addEventListener("dblclick", function () {

        console.log("dblclick");

    },false);

</script>

</body>

javaScript事件（五）事件类型之鼠标事件

2、mouseenter和mouseover的区别

区别：

mouseover事件会冒泡，这意味着，鼠标移到其后代元素上时会触发。

mouseenter事件不冒泡，这意味着，鼠标移到其后代元素上时不会触发。

举例：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        #outer{

            position: absolute;

            width: 200px;

            height: 200px;

            top:0;

            left: 0;

            bottom:0;

            right: 0;

            margin: auto;

            background-color: pink;

        }

        #inner{

            position: absolute;

            width: 100px;

            height:100px;

            top:50%;

            left:50%;

            margin-left: -50px;

            margin-top: -50px;;

            background-color: orange;

            text-align: center;

            line-height: 100px;

        }

        #outer,#inner{

            border-radius:50%;

        }

    </style>

    <script src="jquery-2.1.1.min.js"></script>

</head>

<body>

<body>

<div id="outer">

        <div id="inner">

        </div>

</div>

</body>

<script>

var parentDiv=document.getElementById("outer");

parentDiv.addEventListener("mouseover", function () {

     console.log("父div的mouseover事件被触发");

},false);

//parentDiv.addEventListener("mouseenter", function () {

//    console.log("父div的mouseenter事件被触发");

//},false);

//parentDiv.addEventListener("mouseout", function () {

//    console.log("父div的mouseout事件被触发");

//},false);

//parentDiv.addEventListener("mouseleave", function () {

//    console.log("父div的mouseleave事件被触发");

//},false);

</script>

</body>

</html>

javaScript事件（五）事件类型之鼠标事件

note:

mouseover对应mouseout,mouseenter对应mouseleave。效果可以取消上面代码的注释来看。

jquery中hover API是把mouseenter 和mouseleave组合在一起来用的。

3、鼠标左键和右键

<script type="text/javascript">

document.onmousedown=function (ev)

{

    var oEvent=ev||event; //IE浏览器直接使用event或者window.event得到事件本身。

    alert(oEvent.button);// IE下鼠标的 左键是1 ，  右键是2   ff和chrome下 鼠标左键是0  右键是2

};

</script>

4、mouseover和mousemove的区别

一般情况下mouseover即可，特殊情况才用mousemove，mousemove更耗资源，比如要监控鼠标坐标的变化等。

待续。。。

本文作者starof,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：http://www.cnblogs.com/starof/p/4106904.html有问题欢迎与我讨论，共同进步。

javaScript事件（五）事件类型之鼠标事件的更多相关文章

DuiLib事件分析（一）——鼠标事件响应
最近在处理DuiLib中自定义列表行元素事件,因为处理方案得不到较好的效果,于是只好一层一层的去剥离DuiLib事件是怎么来的,看能否在某一层截取消息,自己重写. 我这里使用CListContaine ...
Delphi ComboBox的属性和事件、及几个鼠标事件的触发
临时做了两个小的测试程序,为了彻底弄清楚combobox的OnClick.OnChange.OnDropDown.OnCloseUp.OnSelect事件的触发及其先后顺序. 另附常用鼠标事件的触发情 ...
浅谈Qt事件的路由机制：鼠标事件
请注意,本文是探讨文章而不是教程,是根据实验和分析得出的结果,可能是错的,因此欢迎别人来探讨和纠正. 这几天对于Qt的事件较为好奇,平时并不怎么常用,一般都是用信号,对于事件的处理,一般都是需要响应键 ...
javascript入门之 ztree (八一系列鼠标事件)
<!DOCTYPE html> <HTML> <HEAD> <meta http-equiv="content-type" content ...
dispatchEvent 自定义触发事件，常用于自定义鼠标事件或点击事件
自定义事件的触发又是不可避免的,由于浏览器兼容性问题,我们要分开说了,针对标准浏览器和IE6/7等考古浏览器. 1. 对于标准浏览器,其提供了可供元素触发的方法:element.dispatchEve ...
javaScript事件（六）事件类型之滚轮事件
滚轮事件其实就是一个mousewheel事件,这个事件跟踪鼠标滚轮,类似Mac的触屏版. 一.客户区坐标位置鼠标事件都是在浏览器视口的特定位置上发生的.这个位置信息保存在事件对象的clientX和c ...
javaScript事件（八）事件类型之变动事件
DOM2级的变动(mutation)事件能在DOM中某一部分发送变化时给出提示.变动事件为XML或HTML DOM设计的,并不特定于某种语言.DOM2级定义了如下变动事件. DOMSubtreeMod ...
深入理解DOM事件类型系列第一篇——鼠标事件
× 目录 [1]类型 [2]顺序 [3]坐标位置[4]修改键[5]相关元素[6]鼠标按键[7]滚轮事件[8]移动设备前面的话鼠标事件是web开发中最常用的一类事件,毕竟鼠标是最主要的定位设备.本文 ...
【javascript/css】关于鼠标事件onmousexxx和css伪类hover
在运用鼠标移入移出事件时,一般有两种做法,一种是DOM事件的"onmouseover"和"onmouseout",还有一种是css的伪类":hover ...

随机推荐

winform开发总结1&gt&semi;winform程序使用线程的必要性，以及正确的使用方式
winform程序中使用线程的必要性: 单线程操作在执行耗时任务时会造成界面假死,带来非常差劲的用户体验,有时候甚至会影响到正常的业务执行,使用多线程做相关操作实属不得已之举. 那么在编写程序之前必须 ...
Spring Web MVC 多viewResolver视图解析器解决方案
viewResolver的定义如下: public interface ViewResolver { View resolveViewName(String viewName, Locale loca ...
tomcat 7/8 启动非常慢的解决方法
在日志中发现启动慢的地方: 2016-11-14 09:31:30.522 [localhost-startStop-1] INFO o.s.c.s.DefaultLifecycleProcessor ...
启动Automatic Updates出现0x80004015错误的解决办法
前几天我的本本加入到AD里面了,并且换了个用户名,结果昨天就发现升级出毛病了,Automatic Updates服务无法启动,启动时候出现0x80004015错误:Automatic Updates ...
山东意外险风险信息推送V7非车
<?xml version="1.0" encoding="GBK"?><Packet type="REQUEST" ve ...
JVM笔记6：JVM类加载机制
虚拟机把描述类的数据从Class文件加载到内存,并对数据进行校验.转换解析.初始化,最终形成可以被虚拟机直接使用的Java类型,这就是虚拟机的类加载机制从类被加载到虚拟机内存中开始,到卸载出内存为止 ...
lsattr chattr 文件安全设置
[root@test_android_client_download xianlaigames]# lsattr -------------e- ./jilinmj.apk[root@test_and ...
NoSql的三大基石：CAP理论&amp&semi;BASE&amp&semi;最终一致性
关系型数据库的局限 NoSql出现在关系型数据库之后,主要是为了解决关系型数据库的短板,我们先来看看随着软件行业的发展,关系型数据库面临了哪些挑战: 1.高并发一个最典型的就是电商网站,例如双11, ...
linux命令：linux文件处理命令
命令格式 : 命令 [-选项] [参数] 例:ls -la /etc 说明:1)个别命令使用不遵循此格式,[]代表可选 2)当有多个选项时,可以写在一起 3)-a等于 --all,调用简化选项用 ...
C&num;双面打印解决方法(打印word\excel\图片)
最近需要按顺序打印word.excel.图片,其中有的需要单面打印,有的双面.网上查了很多方法.主要集中在几个方式解决 1.word的print和excel的printout里设置单双面 2.prin ...