099_鼠标事件

最新推荐文章于 2023-07-24 16:56:12 发布

自由与束缚JavaJavaScript

最新推荐文章于 2023-07-24 16:56:12 发布

阅读量1.2k

点赞数

分类专栏： JavaScript学习文章标签： javascript

本文链接：https://blog.csdn.net/aihiao/article/details/120601350

版权

JavaScript学习专栏收录该内容

105 篇文章 1 订阅

订阅专栏

1. onmouseover事件

1.1. onmouseover当鼠标移入某元素时触发, 移入和移出其子元素时也会触发。

1.2. 语法

1.2.1. html中:

<element onmouseover="SomeJavaScriptCode">

1.2.2. JavaScript中:

object.onmouseover=function(){SomeJavaScriptCode};

1.3. onmouseover属性可以适用于所有html元素, 除了: <base>, <bdo>, <br>, <frame>, <frameset>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>和<title>。

2. onmouseenter事件

2.1. onmouseenter当鼠标移入某元素时触发。

2.2. 该事件通常与onmouseleave事件一同使用, 在鼠标指针移出元素上时触发。

2.3. onmouseenter事件类似于onmouseover事件。唯一的区别是onmouseenter事件不持子元素连带触发。

2.4. 语法

2.4.1. html中:

<element onmouseenter="myScript">

2.4.2. JavaScript中:

object.onmouseenter=function(){myScript};

2.5. onmouseenter属性可以适用于所有html元素, 除了: <base>, <bdo>, <br>, <frame>, <frameset>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>和<title>。

3. onmouseout事件

3.1. onmouseout当鼠标移出某元素时触发, 移入和移出其子元素时也会触发。

3.2. 语法

3.2.1. html中:

<element onmouseout="SomeJavaScriptCode">

3.2.2. JavaScript中:

object.onmouseout=function(){SomeJavaScriptCode};

3.3. onmouseout属性可以适用于所有html元素, 除了: <base>, <bdo>, <br>, <frame>, <frameset>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>和<title>。

4. onmouseleave事件

4.1. onmouseleave当鼠标移出某元素时触发。

4.2. 该事件通常与onmouseenter事件一起使用, 该事件在鼠标移动到元素上时触发。

4.3. onmouseleave事件类似于onmouseout事件。唯一的区别是onmouseleave事件不支持子元素连带触发。

4.4. 语法

4.4.1. html中:

<element onmouseleave="myScript">

4.4.2. JavaScript中:

object.onmouseleave=function(){myScript};

4.5. onmouseleave属性可以适用于所有html元素, 除了: <base>, <bdo>, <br>, <frame>, <frameset>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>和<title>。

5. onmousemove事件

5.1. onmousemove鼠标在某元素上移动时触发, 即使在其子元素上也会触发。

5.2. 语法

5.2.1. html中:

<element onmousemove="SomeJavaScriptCode">

5.2.2. JavaScript中:

object.onmousemove=function(){SomeJavaScriptCode};

5.3. onmousemove属性可以适用于所有html元素, 除了: <base>, <bdo>, <br>, <frame>, <frameset>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>和<title>。

6. 例子

6.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>mouseover、mouseenter、mousemove、mouseout和mouseleave</title>
		
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			div {
				width: 500px;
				height: 500px;
				margin: 50px; 
				background: pink;
			}
			p {
				width: 300px;
				height: 300px;
				background: red;
			}
		</style>
	</head>
	<body>
		<div id="myDiv"><p></p></div>

		<script type="text/javascript">
			function mymouseover(e){
				console.log('~~~mymouseover~~~');
			}

			function mymouseenter(e){
				console.log('###mymouseenter###');
			}

			function mymousemove(e){
				console.log('---mymousemove---');
			}

			function mymouseout(e){
				console.log('===mymouseout===');
			}

			function mymouseleave(e){
				console.log('$$$mymouseleave$$$');
			}

			var myDiv = document.getElementById('myDiv');

			myDiv.addEventListener('mouseover', mymouseover);
			myDiv.addEventListener('mouseenter', mymouseenter);
			myDiv.addEventListener('mousemove', mymousemove);
			myDiv.addEventListener('mouseout', mymouseout);
			myDiv.addEventListener('mouseleave', mymouseleave);
		</script>
	</body>
</html>

6.2. 鼠标从空白处移入大div区域

6.3. 紧接着鼠标从大div区域移入小p区域

6.4. 紧接着鼠标从小p区域移入大div区域

6.5. 紧接着鼠标移出大div到空白处

7. onclick事件

7.1. onclick事件会在元素被点击时发生。

7.2. 语法

7.2.1. html中:

<element onclick="SomeJavaScriptCode">

7.2.2. JavaScript中:

object.onclick=function(){SomeJavaScriptCode};

7.3. onclick属性可以适用于所有html元素, 除了: <base>, <bdo>, <br>, <frame>, <frameset>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>和<title>。

8. ondblclick事件

8.1. ondblclick事件会在对象被双击时发生。只有鼠标左键可以双击。

8.2. 语法

8.2.1. html中:

<element ondblclick="SomeJavaScriptCode">

8.2.2. JavaScript中:

object.ondblclick=function(){SomeJavaScriptCode};

8.3. ondblclick属性可以适用于所有html元素, 除了: <base>, <bdo>, <br>, <frame>, <frameset>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>和<title>。

9. onmousedown事件

9.1. onmousedown事件会在鼠标按键被按下时发生。

9.2. 语法

9.2.1. html中:

<element onmousedown="SomeJavaScriptCode">

9.2.2. JavaScript中:

object.onmousedown=function(){SomeJavaScriptCode};

9.3. onmousedown属性可以适用于所有html元素, 除了: <base>, <bdo>, <br>, <frame>, <frameset>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>和<title>。

9.4. 与onmouseup事件相关连得事件发生次序(鼠标左侧按钮):

onmousedown
onmouseup
onclick

9.4. 与onmouseup事件相关连得事件发生次序(鼠标中间按钮):

onmousedown
onmouseup

9.5. 与onmouseup事件相关连得事件发生次序(鼠标右侧按钮):

onmousedown
onmouseup
oncontextmenu

10. onmouseup事件

10.1. onmouseup事件会在鼠标按键被松开时发生。

10.2. 语法

10.2.1. html中:

<element onmouseup="SomeJavaScriptCode">

10.2.2. JavaScript中:

object.onmouseup=function(){SomeJavaScriptCode};

10.3. onmouseup属性可以适用于所有html元素, 除了: <base>, <bdo>, <br>, <frame>, <frameset>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>和<title>。

10.4. 与onmouseup事件相关连得事件发生次序(鼠标左侧按钮):

onmousedown
onmouseup
onclick

10.4. 与onmouseup事件相关连得事件发生次序(鼠标中间按钮):

onmousedown
onmouseup

10.5. 与onmouseup事件相关连得事件发生次序(鼠标右侧按钮):

onmousedown
onmouseup
oncontextmenu

11. oncontextmenu事件

11.1. oncontextmenu事件在元素中用户右击鼠标时触发并打开上下文菜单。

11.2. 语法

11.2.1. html中:

<elementoncontextmenu="SomeJavaScriptCode">

11.2.2. JavaScript中:

object.oncontextmenu=function(){SomeJavaScriptCode};

11.3. oncontextmenu属性可以适用于所有html元素, 除了: <base>, <bdo>, <br>, <frame>, <frameset>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>和<title>。

12. 例子

12.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>click、dblclick、mousedown、mouseup和contextmenu</title>
		
		<style type="text/css">
			div {
				width: 300px;
				height: 300px;
				background: pink;
			}
		</style>
	</head>
	<body>
		<div id="myDiv"></div>

		<script type="text/javascript">
			function myclick(e){
				console.log('~~~myclick~~~');
			}

			function mymousedown(e){
				console.log('###mymousedown###');
			}

			function mymouseup(e){
				console.log('---mymouseup---');
			}

			function mycontextmenu(e){
				console.log('===mycontextmenu===');
			}

			function mydblclick(e){
				console.log('$$$mydblclick$$$');
			}

			var myDiv = document.getElementById('myDiv');

			myDiv.addEventListener('click', myclick);
			myDiv.addEventListener('mousedown', mymousedown);
			myDiv.addEventListener('mouseup', mymouseup);
			myDiv.addEventListener('contextmenu', mycontextmenu);
			myDiv.addEventListener('dblclick', mydblclick);
		</script>
	</body>
</html>

12.2. 鼠标左键

12.3. 鼠标中键

12.4. 鼠标右键

12.5. 鼠标左键双击

自由与束缚JavaJavaScript

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
099_鼠标事件

1. mouseenter: 当鼠标移入某元素时触发。2. mouseleave: 当鼠标移出某元素时触发。3. mouseover: 当鼠标移入某元素时触发, 移入和移出其子元素时也会触发。4. mouseout: 当鼠标移出某元素时触发, 移入和移出其子元素时也会触发。5. mouseover、mouseout和mouseenter、mouseleave最大的区别, 在于子元素连带触发。6. mousemove: 鼠标在某元素上移动时触发, 即使在其子元素上也会触发。7. 例子
复制链接

扫一扫