HTML DOM|onmouseover、onmouseout、onmousedown、onmouseup、onclick超级易懂实例讲解

HTML DOM|onmouseover、onmouseout、onmousedown、onmouseup、onclick

1.onmouseover和onmouseout

根据单词的意思就可以看出这两个属性是鼠标悬停在元素上方和鼠标离开元素的意思，实例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>悬停和点击</title><style>div{width: 300px;height: 300px;border: 5px solid red;background-image: radial-gradient(green,yellow);font-size: 50px;}</style><script>function overFun(x){x.innerHTML = "悬停";}function outFun(x){x.innerHTML = "离开";}</script>
</head>
<body><!--鼠标悬停在这个元素上会调用overFun()，离开会条用outFun()-->
<div onmouseover="overFun(this)" onmouseout="outFun(this)"></div></body>
</html>

悬停：

离开：

2.onmousedown、onmouseup、onclick

onmousedown和onmouseup分别表示在鼠标点击未松开时的事件和松开时的事件，onclick表示鼠标点击完成时的事件，实例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>鼠标点击</title><style>div{width: 300px;height: 300px;border: 5px solid red;background-image: radial-gradient(green,yellow);font-size: 50px;}</style><script>function downFun(x){x.innerHTML = "点击";}function upFun(x){x.innerHTML = "松开";}function clickFun(){document.body.style.background = "#111111";}</script>
</head>
<body><!--点击时显示点击，松开时显示松开，点击完成时将body的背景变色-->
<div onmousedown="downFun(this)" onmouseup="upFun(this)" onclick="clickFun()"></div></body>
</html>

点击：

松开并且伴随着点击完成：

人生没有白走的路，每一步都算数！

HTML DOM|onmouseover、onmouseout、onmousedown、onmouseup、onclick超级易懂实例讲解相关推荐

javascript重要事件总结(onsubmit/onclick/onload/onfocus/onblur/onmouseover/onmouseout)
javascript重要事件总结(onsubmit/onclick/onload/onfocus/onblur/onmouseover/onmouseout) onfocus/onblur:聚焦离焦事 ...
如何解决onclick与onmousedown,onmouseup的冲突，取消默认事件
onclick是点击,一个完整的点击动作由按下鼠标键onmousedown,和弹起鼠标键onmouseup完成,所以很多时候,onclick事件和onmousedown,onmouseup混用的时候会 ...
HTML用ONMOUSEOVER,ONMOUSEOUT改变背景色或背景图片的方法
1.用onmouseout onmouseover 图像间相互变换: <image src="img1" οnmοuseοver="this.src='img2' ...
HTML onmouseover, onmouseout , onmousemove 事件属性
HTML onmouseover 事件属性定义和用法 onmouseover 属性在鼠标指针移动到元素上时触发. 注释:onmouseover 属性不适用以下元素:<base>.< ...
html可变换的背景图片,HTML用ONMOUSEOVER,ONMOUSEOUT改变背景色或背景图片的方法_html/css_WEB-ITnose...
1.用onmouseout onmouseover 图像间相互变换: 2.onmouseover onmouseout 改变文字背景色: οnmοuseοut="style.backgrou ...
鼠标事件以及 onmouseover, onmouseout 鼠标移动事件动态渲染的注意点
1.onmouseover 指的是鼠标在进入某个元素的时候触发的事件 2.onmouseout 指的是鼠标在离开某个元素时触发的事件其他 onclick----------------------- ...
java onmouseover_转 CSS样式里使用JavaScript(onmouseover/onmouseout)
CSS样式里使用JavaScript(onmouseover/onmouseout)2 table { background-color:#000000; cursor:hand; } td { /* ...
dom元素滚动条高度 js_js浏览器滚动条卷去的高度scrolltop(实例讲解)
1.之前我们学习的JS盒子模型中:client系列/offset系列/scrollWidth/scrollHeight都是"只读"的属性-> 只能通过属性获取值,不能通过属性 ...
超级详细树讲解三 —— B树、B+树图解+代码
首先很高兴你看到了这篇文章,这篇文章可能会花费你很长很长的时间去看,但是这篇文章包括的内容绝对足够你对树的一个系统性的学习.为什么要写这篇文字呢?因为自己在学习树的时候,有些博客只有图解,有些博客只有 ...

HTML DOM|onmouseover、onmouseout、onmousedown、onmouseup、onclick超级易懂实例讲解

HTML DOM|onmouseover、onmouseout、onmousedown、onmouseup、onclick

1.onmouseover和onmouseout

2.onmousedown、onmouseup、onclick

HTML DOM|onmouseover、onmouseout、onmousedown、onmouseup、onclick超级易懂实例讲解相关推荐

最新文章

热门文章