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

如何使用DOM來分配事件

一个新手原創: 2017-10-24 10:01:451976瀏覽

一，

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中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：JavaScript中關於 v8 排序原始碼的問題下一篇：JavaScript中關於 v8 排序原始碼的問題

看更多