释放双眼，带上耳机，听听看~！
一、事件
二、事件流
以上内容见：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、事件触发的顺序
举例：通过双击按钮，看一下上面触发的事件。
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2<input id="btn" type="button" value="click"/>
3<script>
4 var btn=document.getElementById("btn");
5 btn.addEventListener("mousedown",function(event){
6 console.log("mousedown");
7 },false);
8 btn.addEventListener("mouseup",function(){
9 console.log("mouseup");
10 },false);
11 btn.addEventListener("click", function () {
12 console.log("click");
13 },false);
14 btn.addEventListener("dblclick", function () {
15 console.log("dblclick");
16 },false);
17</script>
18</body>
19
View Code
2、mouseenter和mouseover的区别
区别：
mouseover事件会冒泡，这意味着，鼠标移到其后代元素上时会触发。
mouseenter事件不冒泡，这意味着，鼠标移到其后代元素上时不会触发。
举例：
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
2<html>
3<head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 #outer{
8 position: absolute;
9 width: 200px;
10 height: 200px;
11 top:0;
12 left: 0;
13 bottom:0;
14 right: 0;
15 margin: auto;
16 background-color: pink;
17 }
18 #inner{
19 position: absolute;
20 width: 100px;
21 height:100px;
22 top:50%;
23 left:50%;
24 margin-left: -50px;
25 margin-top: -50px;;
26 background-color: orange;
27 text-align: center;
28 line-height: 100px;
29 }
30 #outer,#inner{
31 border-radius:50%;
32 }
33 </style>
34 <script src="jquery-2.1.1.min.js"></script>
35</head>
36<body>
37<body>
38<div id="outer">
39 <div id="inner">
40 </div>
41</div>
42</body>
43<script>
44var parentDiv=document.getElementById("outer");
45parentDiv.addEventListener("mouseover", function () {
46 console.log("父div的mouseover事件被触发");
47},false);
48
49//parentDiv.addEventListener("mouseenter", function () {
50// console.log("父div的mouseenter事件被触发");
51//},false);
52//parentDiv.addEventListener("mouseout", function () {
53// console.log("父div的mouseout事件被触发");
54//},false);
55//parentDiv.addEventListener("mouseleave", function () {
56// console.log("父div的mouseleave事件被触发");
57//},false);
58</script>
59</body>
60</html>
61
View Code
note:
mouseover对应mouseout,mouseenter对应mouseleave。效果可以取消上面代码的注释来看。
jquery中hover API是把mouseenter 和mouseleave组合在一起来用的。
3、鼠标左键和右键
2
3
4
5
6
7
8
2document.onmousedown=function (ev)
3{
4 var oEvent=ev||event; //IE浏览器直接使用event或者window.event得到事件本身。
5 alert(oEvent.button);// IE下鼠标的 左键是1 ， 右键是2 ff和chrome下 鼠标左键是0 右键是2
6};
7</script>
8
4、mouseover和mousemove的区别
一般情况下mouseover即可，特殊情况才用mousemove，mousemove更耗资源，比如要监控鼠标坐标的变化等。
