HTML DOM 事件 —— 鼠标事件 JS鼠标事件

这篇具有很好参考价值的文章主要介绍了HTML DOM 事件 —— 鼠标事件 JS鼠标事件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

鼠标事件

onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
oncontextmenu 在用户点击鼠标右键打开上下文菜单时触发.。
onmousedown 鼠标按钮被按下。
onmouseup 鼠标按键被松开。
onmouseenter 当鼠标指针移动到元素上时触发。
onmouseleave 当鼠标指针移出元素时触发。
onmouseover 鼠标移到某元素之上。
onmouseout 鼠标从某元素移开。
onmousemove 鼠标被移动。

这些鼠标事件可以使用于除了
<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 和 <title>其它所有HTML 元素

onclick 鼠标点击(单击)事件

定义和用法::onclick 事件会在元素被点击时发生

代码块:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML DOM 鼠标点击事件</title>
		<script>
			// 无参方法
			function myFunction() {
				document.getElementById("demo0").innerHTML = "Hello World";
			}
			// 带参数的方法
			function myNameFunction(name) {
				document.getElementById("demo1").innerHTML = "Hello " + name;
			}
		</script>
	</head>
	<body>
		<p>单击按钮触发函数。无参数格式</p>
		<button onclick="myFunction()">点我</button>
		<p id="demo0"></p>
		<hr />
		<p>单击按钮触发函数。有参数格式</p>
		<button onclick="myNameFunction('张三')">点我</button>
		<p id="demo1"></p>
	</body>
</html>

ondblclick 鼠标双击事件

定义和用法:ondblclick 事件会在对象被双击时发生

代码块:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML DOM 鼠标点击事件</title>
		<script>
			// 无参方法
			function myFunction() {
				document.getElementById("demo0").innerHTML = "Hello World";
			}
			// 带参数的方法
			function myNameFunction(name) {
				document.getElementById("demo1").innerHTML = "Hello " + name;
			}
		</script>
	</head>
	<body>
		<p>双击按钮触发函数。无参数格式</p>
		<button ondblclick="myFunction()">双击</button>
		<p id="demo0"></p>
		<hr />
		<p>双击按钮触发函数。有参数格式</p>
		<button ondblclick="myNameFunction('张三')">双击</button>
		<p id="demo1"></p>
	</body>
</html>

oncontextmenu 鼠标右键点击事件

定义和使用:oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单。
注意:所有浏览器都支持 oncontextmenu 事件, contextmenu 元素只有 Firefox 浏览器支持。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>鼠标右击事件</title>
		<style>
			div {
				background: yellow;
				border: 1px solid black;
				padding: 10px;
			}
		</style>
	</head>
	<body>
		<div oncontextmenu="myFunction()" contextmenu="mymenu">
			<p>在文本框内右击鼠标查看上下文菜单!</p>
			<menu type="context" id="mymenu">
				<menuitem label="Refresh" onclick="window.location.reload();" icon="ico_reload.png">
				</menuitem>
				<menu label="Share on...">
					<menuitem label="Twitter" icon="ico_twitter.png"
						onclick="window.open('//twitter.com/intent/tweet?text=' + window.location.href);">
					</menuitem>
					<menuitem label="Facebook" icon="ico_facebook.png"
						onclick="window.open('//facebook.com/sharer/sharer.php?u=' + window.location.href);">
					</menuitem>
				</menu>
				<menuitem label="向该网页发送邮件" onclick="window.location='mailto:?body='+window.location.href;">
				</menuitem>
			</menu>
		</div>
		<script>
			function myFunction() {
				alert("你在 div 元素总点击鼠标了右键。");
			}
		</script>
		<p><strong>注意:</strong> 只有 Firefox 中支持 contextmenu <strong>属性</strong> !</p>

	</body>
</html>

onmousedown 和 onmouseup 鼠标按键按下和松开事件

定义和用法:onmousedown 事件会在鼠标按键被按下时发生;onmouseup 事件会在鼠标按键被松开时发生
提示: 与 onmousedown 事件相关连得事件发生次序( 鼠标左侧/中间 按钮):
1、onmousedown // 鼠标按下事件
2、onmouseup // 鼠标按键松开事件
3、onclick // 鼠标点击事件
与 onmousedown 事件相关连得事件发生次序 (鼠标右侧按钮):
1、onmousedown
2、onmouseup
3、oncontextmenu // 鼠标右击事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>onmousedown  And onmouseup </title>
		<script>
			function myFunction(elmnt, clr) {
				elmnt.style.color = clr;
			}
		</script>
	</head>
	<body>
		<p onmousedown="myFunction(this,'red')" onmouseup="myFunction(this,'green')">
			单击文本改变颜色。触发一个带参数函数,当鼠标按钮被按下,,当释放鼠标按钮,再一次触发其他参数函数
		</p>
	</body>
</html>

onmouseenter 和 onmouseleave 鼠标指针移入和移出事件

定义和用法:onmouseenter 事件在鼠标指针移动到元素上时触发;onmouseleave 事件在鼠标移出元素时触发。
提示: onmouseenter事件通常与 onmouseleave 事件一同使用, 在鼠标指针移出元素上时触发。
提示: onmouseenter、onmouseleave 事件类似于 onmouseover、onmouseout 事件。 唯一的区别是 onmouseenter 事件不支持冒泡。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>onmouseenter And onmouseleave</title>
	</head>
	<style type="text/css">
		.box{
			width: 32px;
			height: 32px;
			background-color: aqua;
		}
	</style>
	<body>
		<div class="box" onmouseenter="bigBox(this)" onmouseleave="normalBox(this)"></div>
		<p>
			onmouseenter: bigBox() 函数在用户将鼠标指针移动到该DOM时触发。</p>
		<p>
			onmouseleave: normalBox() 函数在用户将鼠标指针移出DOM时触发。</p>
		<script>
			function bigBox(x) {
				x.style.height = "64px";
				x.style.width = "64px";
			}
			function normalBox(x) {
				x.style.height = "32px";
				x.style.width = "32px";
			}
		</script>
	</body>
</html>

onmouseover 和 onmouseout 鼠标指针移入和移出事件

定义和用法:onmouseover 事件会在鼠标指针移动到指定的元素上时发生;
onmouseout 事件会在鼠标指针移出指定的对象时发生。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>onmouseover And onmouseout</title>
	</head>
	<style type="text/css">
		.box{
			width: 32px;
			height: 32px;
			background-color: aqua;
		}
	</style>
	<body>
		<div class="box" onmouseover="bigBox(this)" onmouseout="normalBox(this)"></div>
		<p>
			onmouseover: bigBox() 函数在用户将鼠标指针移动到该DOM时触发。</p>
		<p>
			onmouseout: normalBox() 函数在用户将鼠标指针移出DOM时触发。</p>
		<script>
			function bigBox(x) {
				x.style.height = "64px";
				x.style.width = "64px";
			}
			function normalBox(x) {
				x.style.height = "32px";
				x.style.width = "32px";
			}
		</script>
	</body>
</html>

onmousemove 鼠标指针移动事件

定义和用法:onmousemove 事件会在鼠标指针移到指定的对象时发生。文章来源地址https://www.toymoban.com/news/detail-480938.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>onmousemove</title>
		<script>
			function moveCoordinate() {
				document.getElementById('moveX').innerHTML = event.offsetX;
				document.getElementById('moveY').innerHTML = event.offsetY;
			}
		</script>
	</head>
	<body style="width: 100%;height: 100%;">
		<div style="width: 800px;height: 600px;background-color: aqua;" onmousemove="moveCoordinate()">
		</div>
		<p>X:<span id="moveX">0</span></p>
		<p>Y:<span id="moveY">0</span></p>
	</body>
</html>

到了这里,关于HTML DOM 事件 —— 鼠标事件 JS鼠标事件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包