search

Home  >  Article  >  Web Front-end  >  How to use DOM to dispatch events

How to use DOM to dispatch events

一个新手
一个新手Original
2017-10-24 10:01:451943browse

一,

onmouseover and onmouseout events

The onmouseover and onmouseout events can be used when the user's mouse moves over or out of an HTML element The function is triggered when the element is called.

A small example: Before the mouse is on top After moving to top


##

（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>

2,

onmousedown, onmouseup and onclick events

onmousedown, onmouseup and onclick constitute all parts of the mouse click event. First when the mouse button is clicked, the onmousedown event is fired, when the mouse button is released, the onmouseup event is fired, and finally, when the mouse click is completed, the onclick event is fired.

Example:

Before the mouse is clicked

When the mouse is clickedAfter releasing the mouse


（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>

The above is the detailed content of How to use DOM to dispatch events. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Issues about v8 sorting source code in JavaScriptNext article：Issues about v8 sorting source code in JavaScript

Related articles

See more