七、鼠标事件

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>

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>

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 ...

随机推荐

当子查询碰上NULL
情景: 现在有如图两个表,boy和girl,对应着Boy和Girl两个bean,有共同字段id.name,另外boy还有个外键grilfriend(指向girl的id) 现在要查询所有的Boy,如果有 ...
值得 Web 开发人员收藏的16款 HTML5 工具
HTML5 正在迅速改变创建和管理网站的方式.HTML5 在不同的领域让网页设计更强大的.快速,安全,响应式,互动和美丽,这些优点吸引更多的 Web 开发人员使用 HTML5 开发各种网站和应用程序. ...
20款免费的 PSD 网站模板【免费下载】
如果你的新项目预算很低,那么免费网站模板对你来说是一个很好的解决方案.有很多的预先设计的网站模板 PSD 素材可以使用和自由定制.在这里,你会发现可供下载的超级棒的免费网站模板.你可以使用它们来创建自 ...
JavaScript入门篇QA总结
Q1:JS可以放在哪个位置?A1:1.放在<head>标签中,用<script type="text/javascript"></script> ...
sharepoint 2013 持续爬网
能否对所有类型的内容源都使用连续爬网?不能.连续爬网仅适用于 SharePoint 型内容源.所有其他类型的内容源将继续选择增量爬网和完全爬网. 使用连续爬网是否会给存储库增加额外负载?连续爬网的资源 ...
ubuntu制作本地源
背景平时apt-get install安装软件时,下载的deb文件都会存放在/var/cache/apt/archives/下,为了今后重装或给别人用,特别是没有网络时,这些deb文件实际上是可以派 ...
如何更好的通过Inflate layout的方式来实现自定义view
本篇文章讲的是如何用现有控件产生一个组合控件的方法,十分简单实用.现在开始! 一.需求我们要实现一个有红点和文字的按钮控件,就像下面这样: 二.实现我的思路是让一个button和一个textvie ...
Android闹钟 AlarmManager的使用
Android闹钟 AlarmManager的使用 AlarmManager介绍 AlarmManager这个类提供对系统闹钟服务的访问接口. 你可以为你的应用设定一个在未来某个时间唤醒的功能. 当闹 ...
c++引用总结
一.变量的引用: 引用:就是某一变量(目标)的一个别名,对引用的操作与对变量直接操作完全一样. 引用的声明方法:类型标识符 &引用名=目标变量名: 例:char ch; cha ...
Android 手机卫士--打包生成apk维护到服务器
项目打包生成apk过程: 1.生成签名文件,并且指定所在位置 2.使用生成的签名文件,给工程打包生成一个apk 本文地址:http://www.cnblogs.com/wuyudong/p/59033 ...

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