js的鼠标事件

1
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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			div{
				width: 300px;
				height: 300px;
				background-color: skyblue;
			}
		</style>
	</head>
	<body>
		<input type="button" value="单击事件" id="i1"/>
		<input type="button" value="双击事件" id="i2"/>
		<input type="button" value="按钮按下事件" id="i3"/>
		<input type="button" value="鼠标右键" id="i4"/>
		<input type="button" value="鼠标按钮抬起事件" id="i5"/>
		<div id="div1">模拟鼠标进出以及鼠标移动事件</div>
	</body>
</html>
<script type="text/javascript">
	/*
	 * js是一个以事件为驱动的脚本语言 在开发过程中想要实现交互就要借助事件完成
	 * 注意!!!!!!!!!!!!!!!!!
	 * 系统为每一个事件创建一个事件对象event 事件对象中存储着所有与用户交互的
相关信息 可以通过event对象获取对应的某些数据 从而进行逻辑操作
	 * 
	 */
	//单击事件
	i1.onclick=function(){
		//重点!!!每个事件都有事件对象event
		//兼容浏览器的写法 (主要为了兼容火狐浏览器 火狐会把事件对象传递给参数)
		var ev=event||e;
		console.log(ev);
		console.log("单击事件");
	}
	//双击事件
	i2.ondblclick=function(){
		console.log(event);
		console.log("双击事件");
	}
	//鼠标按钮按下事件
	i3.onmousedown=function(){
		console.log("鼠标按钮按下");
	}
	//鼠标按钮抬起事件
	i5.onmouseup=function(){
		console.log("鼠标按钮抬起");
	}
	//鼠标右键
	i4.oncontextmenu=function(){
		console.log("鼠标右键");
	}
	//鼠标区域事件
//	div1.onmouseenter=function(){
//		console.log("鼠标进入")
//	}
	div1.onmousemove=function(){
		console.log("鼠标移动")
	}
//	div1.onmouseleave=function(){
//		console.log("鼠标离开")
//	}
	//enter和leave 不存在事件冒泡
	//over和out 存在事件冒泡
	div1.onmouseover=function(){
		console.log("over鼠标进入")
	}
	div1.onmouseout=function(){
		console.log("out鼠标离开")
	}
	//滚轮滚动事件
	div1.onmousewheel=function(){
		console.log("滚轮滚动");
	}
	//鼠标事件    鼠标按下事件
	div1.onmousedown=function(){
		console.log(event.button);
		if(event.button==0){
			console.log("左键");
		}
		if(event.button==1){
			console.log("滚轮键");
		}
		if(event.button==2){
			console.log("右键");
		}
	}
</script>

前端三剑客
#JS
js的鼠标事件
http://ultracode.cn/2020/11/30/JS/js的鼠标事件/
作者
Win
发布于
2020年11月30日
许可协议