ホームページ  >  記事  >  ウェブフロントエンド  >  DOM を使用してイベントをディスパッチする方法

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

一个新手
一个新手オリジナル
2017-10-24 10:01:451873ブラウズ

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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。