DOM を使用してイベントをディスパッチする方法-jsチュートリアル-php.cn

DOM を使用してイベントをディスパッチする方法

一个新手

リリース： 2017-10-24 10:01:45

オリジナル

1969 人が閲覧しました

1 つの、

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>

ログイン後にコピー

two、

onmousedown、onmouseup、onclickイベント

onmousedown、onmouseupとonクリックが構成するマウスのクリックイベントのすべての部分。まず、マウスボタンがクリックされると 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 中国語 Web サイトの他の関連記事を参照してください。