首页 > web前端 > js教程 > 正文

如何使用DOM来分配事件

一个新手
发布: 2017-10-24 10:01:45
原创
1940 人浏览过

onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

一个小例:鼠标未在上面前  移到上面后


(1)关键代码
<body>
<p onmouseover="mOver(this)" onmouseout="mOut(this)" 
style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</p>
<script>="谢谢"="把鼠标移到上面"</script>
(2)关键代码  (两种方法均可实现)
<p onmouseover="innerHTML=&#39;谢谢&#39;" onmouseout="innerHTML=&#39;把鼠标移到上面&#39;"
 style="width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</p>
登录后复制

onmousedown、onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时,会触发 onmousedown 事件,当释放鼠标按钮时,会触发 onmouseup 事件,最后,当完成鼠标点击时,会触发 onclick 事件。

例:

未按鼠标前点击鼠标时松开后


(1)关键代码
<p onmousedown="mDown(this)" onmouseup="mUp(this)"style="background-color:green;color:#ffffff;
width:90px;height:20px;padding:40px;font-size:12px;">请点击这里</p>

<script>="#1ec5e5"="请释放鼠标按钮"="green"="请按下鼠标按钮"</script>
(2)关键代码   (两种方法均可)
<p onmousedown="style.backgroundColor=&#39;#1ec5e5&#39;,innerHTML=&#39;请释放鼠标&#39;" 
onmouseup="style.backgroundColor=&#39;red&#39;,innerHTML=&#39;请按下鼠标&#39;" 
style="color:#ffffff;width:90px;height:20px;padding:40px;font-size:12px;">请点击这里</p>
登录后复制

以上是如何使用DOM来分配事件的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板