javaScript事件（五）事件类型之鼠标事件
一、事件
二、事件流
以上内容见：javaScript事件（一）事件流
三、事件处理程序
四、IE事件处理程序
五、事件对象
以上内容见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事件（五）事件类型之鼠标事件的更多相关文章
- 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 ...
随机推荐
- 20款免费的 PSD 网站模板【免费下载】
如果你的新项目预算很低,那么免费网站模板对你来说是一个很好的解决方案.有很多的预先设计的网站模板 PSD 素材可以使用和自由定制.在这里,你会发现可供下载的超级棒的免费网站模板.你可以使用它们来创建自 ...
- jQuery立体式数字动态增加（animate方法）
1.HTML结构 <div class="integral">已有<span class="ii"></span>积分< ...
- 微信网页授权(OAuth2.0) PHP 源码简单实现
提要: 1. 建议对OAuth2.0协议做一个学习. 2. 微信官方文档和微信官网工具要得到充分利用. 比较简单,直接帖源代码了.其中“xxxxxxxxxx”部分,是需要依据自己环境做替换的 /** ...
- Sql Server Always On主库与附库遇到的问题
使用Always On的时候永远要记住只有一个主数据库可写,如果写的话要不在监听节点上做写的操作,要不只在主数据库上写的操作不然只读库无法读写
- UIModalPresentationStyle和UIModalTransitionStyle
一.主要用途 弹出模态ViewController是IOS变成中很有用的一个技术,UIKit提供的一些专门用于模态显示的ViewController,如UIImagePickerController等 ...
- XCode设置（怎么让代码收缩）
有时候刚使用一台电脑 可能会没有代码收缩的功能. 在哪里设置呢?看图 打开xcode 的 偏好设置 找到textEditing 把Code folding勾选上 就可以了
- 【VLC-Android】Mac下编译vlc-android
前言 突然想整整VLC-Android,然后就下一个玩玩看,这里记录点遇到的问题. 声明 欢迎转载,但请保留文章原始出处:) 博客园:http://www.cnblogs.com 农民伯伯: htt ...
- XML,DTD,XSD,XSL的区别
XML=可扩展标记语言(eXtensible Markup Language). 可扩展标记语言XML是一种简单的数据存储语言,使用一系列简单的标记描述数据,而这些标记可用 方便的方式建立,虽然XML ...
- GridView 和DataGrid区别
转自:http://blog.csdn.net/51357/article/details/1480599 近期在维护一个vs2008开发的项目(该项目是从Vs2013拷贝升级过来的),发现不同时期按 ...
- JAVA同步容器和并发容器
同步容器类 同步容器类的创建 在早期的JDK中,有两种现成的实现,Vector和Hashtable,可以直接new对象获取: 在JDK1.2中,引入了同步封装类,可以由Collections.sync ...