HTML onmouseup Event Attribute

Description

The HTML onmouseup event attribute is used to specify a JavaScript function that will be executed when a mouse button is released over an element. It is the opposite of the onmousedown event attribute, which is fired when a mouse button is pressed down on an element.

The onmouseup event can be used to trigger a variety of actions, such as changing the appearance of an element, displaying a message, or submitting a form. For example, you could use it to change the color of a button when it is released, or to display a confirmation message before submitting a form.

To use the onmouseup event attribute, simply add it to the element you want to listen for the event on. The value of the attribute should be the name of the JavaScript function you want to execute when the event is fired.

Here is an example of how to use the onmouseup event attribute:

<button onclick="myFunction()">Click Me!</button>

<script>
function myFunction() {
  alert("You released the mouse button!");
}
</script>

When the user clicks the button and then releases the mouse button, the myFunction() function will be executed, displaying an alert message.

The onmouseup event attribute can be used on any HTML element, except for the <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, and <style> elements.

Here are some other examples of how the onmouseup event attribute can be used:

To change the color of a link when it is released.
To display a drop-down menu when the user releases the mouse button over a certain area of the page.
To submit a form when the user releases the mouse button over the submit button.
To play a sound when the user releases the mouse button over a certain element.
To start a timer when the user releases the mouse button over a certain element.

Syntax

<element onmouseup="script">

Values

scriptThe name of the script to use when the event has been triggered.

Example

HTML

<!DOCTYPE html> 

  <html> 

    <head>

      <title>onmousedown and onmouseup event</title> 

      <style> 

        div {

        width: 100px;

        height: 50px;

        border: 1px solid black;

        color: black;

        text-align: center;

      }

      </style> 

    </head> 

    <body> 

    <p>Click on an element to demonstrate the script:</p> 

    <div id="code" onmousedown="mouseDown()" onmouseup="mouseUp()">&spades; &clubs; &hearts; &diams;<br>&diams; &hearts; &clubs; &spades; 

    </div> 

<script> 

function mouseDown() {

  document.getElementById("code").style.backgroundColor="orange";  

} 

function mouseUp() {

  document.getElementById("code").style.backgroundColor="purple";  

} 

</script> 

  </body> 

</html>