Heim > Web-Frontend > js-Tutorial > So verwenden Sie DOM zum Versenden von Ereignissen

So verwenden Sie DOM zum Versenden von Ereignissen

一个新手
Freigeben: 2017-10-24 10:01:45
Original
1968 Leute haben es durchsucht

Eins,

onmouseover- und onmouseout-Ereignisse

onmouseover- und onmouseout-Ereignisse können verwendet werden, wenn sich die Maus des Benutzers über oder aus einem bewegt HTML-Element Die Funktion wird beim Aufruf des Elements ausgelöst.

Ein kleines Beispiel: Bevor die Maus oben istNach dem Bewegen nach oben


(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>
Nach dem Login kopieren

Zwei ,

onmousedown-, onmouseup- und onclick-Ereignisse

onmousedown, onmouseup und onclick bilden alle Teile des Mausklickereignisses. Zuerst wird beim Klicken auf die Maustaste das Ereignis „onmousedown“ ausgelöst, beim Loslassen der Maustaste wird das Ereignis „onmouseup“ ausgelöst und schließlich, wenn der Mausklick abgeschlossen ist, wird das Ereignis „onclick“ ausgelöst.

Beispiel:

Bevor die Maus gedrückt wirdWenn die Maus angeklickt wirdNach dem Loslassen


(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>
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonSo verwenden Sie DOM zum Versenden von Ereignissen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage