onmouse cikick事件

最新推荐文章于 2022-08-30 15:47:42 发布

Venciki

最新推荐文章于 2022-08-30 15:47:42 发布

阅读量205

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/qq_33188421/article/details/89629202

版权

web 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

JavaScript

onmouseover事件

简单的说就是鼠标移在 div 上面会发生相应样式的变化。和 css 里面的 :hover 伪类一样。

使用：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		#div1{ height: 100px; 
		width: 200px;
		 background-color: #ccc; 
		 border: 1px solid #000; 
		 display: none;}
	</style>
</head>
<body>
	<lable onmouseover="document.getElementById('div1').style.display='block'" onmouseout="document.getElementById('div1').style.display='none'"><input type="checkbox" >不在提示</lable>
	<div id="div1">
		注意在公共场合请推出帐号注意在公共场合请推出帐号注意在公共场合请推出帐号
	</div>
</body>
</html>

可以先设定好一个 div1 的样式，然后在 JavaScript 里面写要改变的样式每个级别之间要用 . 隔开。其中 getElementById(‘div1’) 为了更好的理解这一串长字符，我们可以把 getElementById 拆开来理解 get Element By Id 。

相应的 get 是获取，Element 是元素，By 通过，Id 是 id属性选择器的名。

onmouseout事件。

和 onmouseover事件差不多，onmouseover 是当鼠标移上去发生样式的相应变化，而 onmouseout 是当鼠标移出去的时候相应的样式发生相应的改变。

使用：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		#div1{ height: 100px;
		 width: 200px; 
		 background-color:#ccc; 
		 border: 1px solid #000;
		   display: none;}
	</style>
</head>
<body>
	<lable onmouseover="document.getElementById('div1').style.display='block'" 
	onmouseout="document.getElementById('div1').style.display='none'">
	<input type="checkbox" >不在提示
	</lable>
	<div id="div1">
		注意在公共场合请退出帐号注意在公共场合请推出帐号注意在公共场合请推出帐号
	</div>
</body>
</html>

总结下这两串代码，他们就是都是在一个的 height 值为 100px 和 width 值为 200px 下的一个 div 中，而但鼠标移到这个 div 上去的时候就会发生 “消失” 和 “出现” 的变化。

click事件

通过鼠标点击一个 div element 来改变相应的 div 的相应的样式。

我们先来看这样一串代码

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title></title> 
</head>
<body>

<button onclick="getElementById('div1').innerHTML=Date()">now time is ?</button>
<p id="div1">
</p>

</body>
</html>

这段代码的意思就是点击这个 button 来改变现有的 now time is ？文本的内容，让它变为我们 JavaScript 现有的一个获取当前时间的一个函数。

onmousedown事件

onmouseup事件

和前面两者很相似。

直接上实例：

编辑您的代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></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>

这段代码的意思就是当点击那串文本内容时字体的颜色会变成红色，并且当鼠标松开时字体的颜色会变成绿色。

定义和用法

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

提示：与 onmousedown 事件相关连得事件发生次序（鼠标左侧/中间按钮）：

onmousedown
onmouseup
onclick

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

onmousedown
onmouseup
oncontextmenu

其中 oncontextmenu 是指当用户在
元素上右击鼠标时执行 JavaScript ：（也就是我们平时经常基见到的鼠标右键点击效果）

实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</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>

</body>
</html>

鼠标点击这个 div 时会出现一个 alert 提示框。

其实这些 onmouseover onmouseout onclick 。。。等发生在 html 上面的事件，我们把他们统称为 HTML 事件。（而且当我们在使用JavaScript的时候更够改变这些 html 。）当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。

HTML 事件可以是浏览器行为，也可以是用户行为。

HTML 网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。

以下是 HTML 事件的实例：

HTML 页面完成加载
HTML input 字段改变时
HTML 按钮被点击
通常，当事件发生时，你可以做些事情。

在事件触发时 JavaScript 可以执行一些代码。

HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素。

下面是常见的一些 html 事件（总结）：

事件	描述
onmouseover	在一个HTML元素上移动鼠标
onmouseout	从一个HTML元素上移开鼠标
onclick	点击HTML元素
。。。	。。。
。。。	。。。
onmousedown	鼠标按钮被按下
onmouseup	鼠标松开时

Venciki

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
onmouse cikick事件

JavaScriptonmouseover事件简单的说就是鼠标移在 div 上面会发生相应样式的变化。和 css 里面的 :hover 伪类一样。使用：<!DOCTYPE html><html><head> <title></title> <style type="text/css"> #div1{ hei...
复制链接

扫一扫