一、事件

二、事件流

以上内容见：javaScript事件（一）事件流

三、事件处理程序

四、IE事件处理程序

以上内容见javaScript事件（二）事件处理程序

五、事件对象

以上内容见javaScript事件（三）事件对象

六、事件对象的公共成员

以上内容见javaScript事件（四）event的公共成员（属性和方法）

七、鼠标事件

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事件（五）事件类型之鼠标事件的更多相关文章

  1. DuiLib事件分析（一）——鼠标事件响应

    最近在处理DuiLib中自定义列表行元素事件,因为处理方案得不到较好的效果,于是只好一层一层的去剥离DuiLib事件是怎么来的,看能否在某一层截取消息,自己重写. 我这里使用CListContaine ...

  2. Delphi ComboBox的属性和事件、及几个鼠标事件的触发

    临时做了两个小的测试程序,为了彻底弄清楚combobox的OnClick.OnChange.OnDropDown.OnCloseUp.OnSelect事件的触发及其先后顺序. 另附常用鼠标事件的触发情 ...

  3. 浅谈Qt事件的路由机制：鼠标事件

    请注意,本文是探讨文章而不是教程,是根据实验和分析得出的结果,可能是错的,因此欢迎别人来探讨和纠正. 这几天对于Qt的事件较为好奇,平时并不怎么常用,一般都是用信号,对于事件的处理,一般都是需要响应键 ...

  4. javascript入门 之 ztree (八 一系列鼠标事件)

    <!DOCTYPE html> <HTML> <HEAD> <meta http-equiv="content-type" content ...

  5. dispatchEvent 自定义触发事件，常用于自定义鼠标事件或点击事件

    自定义事件的触发又是不可避免的,由于浏览器兼容性问题,我们要分开说了,针对标准浏览器和IE6/7等考古浏览器. 1. 对于标准浏览器,其提供了可供元素触发的方法:element.dispatchEve ...

  6. javaScript事件（六）事件类型之滚轮事件

    滚轮事件其实就是一个mousewheel事件,这个事件跟踪鼠标滚轮,类似Mac的触屏版. 一.客户区坐标位置 鼠标事件都是在浏览器视口的特定位置上发生的.这个位置信息保存在事件对象的clientX和c ...

  7. javaScript事件（八）事件类型之变动事件

    DOM2级的变动(mutation)事件能在DOM中某一部分发送变化时给出提示.变动事件为XML或HTML DOM设计的,并不特定于某种语言.DOM2级定义了如下变动事件. DOMSubtreeMod ...

  8. 深入理解DOM事件类型系列第一篇——鼠标事件

    × 目录 [1]类型 [2]顺序 [3]坐标位置[4]修改键[5]相关元素[6]鼠标按键[7]滚轮事件[8]移动设备 前面的话 鼠标事件是web开发中最常用的一类事件,毕竟鼠标是最主要的定位设备.本文 ...

  9. 【javascript/css】关于鼠标事件onmousexxx和css伪类hover

    在运用鼠标移入移出事件时,一般有两种做法,一种是DOM事件的"onmouseover"和"onmouseout",还有一种是css的伪类":hover ...

随机推荐

  1. jQuery仿京东无限级菜单HoverTree

    官方网址:http://keleyi.com/jq/hovertree/ 效果图: 看了上面效果图,你或许已经明白为什么是仿京东菜单.如果还不明白,请访问http://list.jd.com/list ...

  2. 【iScroll源码学习02】分解iScroll三个核心事件点

    前言 最近两天看到很多的总结性发言,我想想今年好像我的变化挺大的,是不是该晚上来水一发呢?嗯,决定了,晚上来水一发! 上周六,我们简单模拟了下iScroll的实现,周日我们开始了学习iScroll的源 ...

  3. JavaScript学习笔记-实例详解-类（一）

    实例详解-类(一): //每个javascript函数(除了bind())都自动拥有一个prototype对象// 在未添加属性或重写prototype对象之前,它只包含唯一一个不可枚举属性const ...

  4. Java Web 三层架构详解

    java 三层架构ssh 一个spring2.5+hibernate3.2+struts2.0组合框架,使用spring的 IoC来管理应用的 所有bean,包括struts2的 action,充分发 ...

  5. 如何通过CSS3 实现响应式Web设计

    如何通过CSS3 实现响应式Web设计: 分为三个步骤:(1)允许网页宽度自动调整.首先在页面头部中,我们需要加入这样一行:<meta name="viewport" con ...

  6. CSS3绘制六边形

    因为很简单,所以先总结一下:使用CSS3绘制六边形主要使用伪类:before和:after在源元素之前和之后再绘制两个元素,并利用css3的边框样式,将这两个元素变成三角形放置在源元素的两端即可. ( ...

  7. android调试工具DDMS的使用详解

    具体可见http://developer.android.com/tools/debugging/ddms.html. DDMS为IDE和emultor.真正的android设备架起来了一座桥梁.开发 ...

  8. 深入.net（文件操作）

    自己进行数据的“持久化操作”: ----- 数据持久化技术:程序还运行过程中,所有的“中间数据”(加工或处理过程中数据)都存放在内存中,但内存的特点是掉电后数据无法保存,所以需要有种技术能够将存放在内 ...

  9. iOS开发之百度地图导航

    本篇主要讲述百度地图的导航功能: 第一步:在使用百度导航之前,我们需要在百度地图开放平台上下载导航的 SDK,共85.8M,网速不好的同学可提前准备好. 第二步:引入导航所需的系统包 将AudioTo ...

  10. 利用Scala语言开发Spark应用程序

    Spark内核是由Scala语言开发的,因此使用Scala语言开发Spark应用程序是自然而然的事情.如果你对Scala语言还不太熟悉,可 以阅读网络教程A Scala Tutorial for Ja ...