首頁 > web前端 > js教程 > 如何使用DOM來分配事件

如何使用DOM來分配事件

一个新手
發布: 2017-10-24 10:01:45
原創
1968 人瀏覽過

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
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板