javascript 事件 -- 鼠标事件和事件流

qq_43286252

于 2019-12-10 10:24:32 发布

阅读量138

点赞数

分类专栏： javascript基础

本文链接：https://blog.csdn.net/qq_43286252/article/details/103469819

版权

javascript基础专栏收录该内容

7 篇文章 0 订阅

订阅专栏

鼠标事件和事件流

单击事件 onclick 双击事件 ondblclick 右击事件 oncontextmenu 鼠标移入事件 onmouseover 鼠标移出事件 onmouseout 鼠标移入事件 onmousemove (鼠标移进去，函数一直执行) 鼠标按键事件 onmousedown 鼠标按键释放 onmouseup

事件流

事件冒泡 从内到外 事件捕获 从外到内

代码演示：

<style>
			#div4{
				width:300px;
				height:300px;
				background:green;
				line-height: 300px;
				text-align: center;
			}
			#div5{
				width:300px;
				height:300px;
				margin-top: 30px;
				background:yellow;
				line-height: 300px;
				text-align: center;
			}
			
			#div6{
				margin-top: 30px;
				width:200px;
				height:200px;
				background:#008000;
				line-height: 300px;
				text-align: center;
			}
		</style>
	</head>
	<script>
		window.onload = function(){
			  //这是单击事件
			var div1 = document.getElementById("div1");
			div1.onclick = function(){
				alert("单击事件");
			}
			
			// 这是双击事件
			var div2 = document.getElementById("div2");
			div2.ondblclick = function(){
				alert("双击事件");
			}
			
			// 这是右击事件
			var div3 = document.getElementById("div3");
			div3.oncontextmenu = function(){
				alert("右击事件");
			}
			
			//鼠标移入/移出事件
			var div4 = document.getElementById("div4");
			div4.onmouseover = function(){  //这个事件
				alert("鼠标移入进去，函数只执行一次");
			}
			div4.onmouseout = function(){
				alert("鼠标移出");
			}
			
			var div5 = document.getElementById("div5");
			div5.onmousemove = function(){
				alert("鼠标移进去，函数一直执行");
			}
	
			var div6 = document.getElementById("div6");
			div6.onmousedown = function(){
				alert("鼠标按键---鼠标按下就执行函数");
			}
			div6.onmouseup = function(){
				alert("鼠标释放 ---- 鼠标按下去后，一松手就执行函数");
			}
		}
	</script>
	<body>
		
		鼠标类事件：
		<div id="div1">我是单击事件</div>
		
		<div id="div2">我是双击事件</div>
		
		<div id="div3">我是右击事件</div>
		
		<div id="div4">鼠标移入/移出事件</div>
		
		<div id="div5">鼠标移入</div>
		
		<div id="div6">鼠标按下/鼠标弹起来</div>
	</body>

qq_43286252

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript 事件 -- 鼠标事件和事件流

鼠标事件和事件流单击事件 onclick 双击事件 ondblclick 右击事件 oncontextmenu 鼠标移入事件 onmouseover 鼠标移出事件 onmouseout 鼠标移入事件 onmousemove (鼠标移进去，函数一直执行) 鼠标按键事件 onmousedown 鼠标按键释放 ...
复制链接

扫一扫