## HTML onmouseup Event Attribute
The `onmouseup` event occurs when a user releases a mouse button over an element.
This event is typically used together with the [`onmousedown`](#) event.
**Note:** The order of events related to the `onmousedown` event is:
1. `onmousedown` - The user presses the mouse button.
2. `onmouseup` - The user releases the mouse button.
3. `onclick` - The mouse click is completed.
**Note:** The `onmouseup` event is often used together with the `onmousedown` event to perform an action when the mouse button is pressed and released.
### Browser Support
The numbers in the table indicate the first browser version that fully supports the event.
| Event | Chrome | Edge | Firefox | Safari | Opera |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `onmouseup` | Yes | Yes | Yes | Yes | Yes |
### Syntax
In HTML:
In JavaScript:
```javascript
object.onmouseup = function(){myScript};
In JavaScript, using the `addEventListener()` method:
```javascript
object.addEventListener("mouseup", myScript);
### Technical Details
| | |
| :--- | :--- |
| **Bubbles:** | Yes |
| **Cancelable:** | Yes |
| **Event type:** | (#) |
| **Interface:** | (#) |
| **Target:** | The element that was clicked. |
| **Default Action:** | None. |
### More Examples
#### Example 1
A simple example of the `onmouseup` event:
#myDiv {
width: 200px;
height: 100px;
background-color: lightgray;
border: 1px solid black;
text-align: center;
line-height: 100px;
cursor: pointer;
}
Click me!
function mouseDown() {
document.getElementById("demo").innerHTML = "Mouse button is down";
}
function mouseUp() {
document.getElementById("demo").innerHTML = "Mouse button is up";
}
#### Example 2
Using `addEventListener()`:
#myDiv {
width: 200px;
height: 100px;
background-color: lightgray;
border: 1px solid black;
text-align: center;
line-height: 100px;
cursor: pointer;
}
Click me!
var x = document.getElementById("myDiv");
x.addEventListener("mousedown", function() {
document.getElementById("demo").innerHTML = "Mouse button is down";
});
x.addEventListener("mouseup", function() {
document.getElementById("demo").innerHTML = "Mouse button is up";
});
### Related Events
| Event | Description | The order of events |
| :--- | :--- | :--- |
| [`onmousedown`](#) | The user presses a mouse button over an element. | 1 |
| [`onmouseup`](#) | The user releases a mouse button over an element. | 2 |
| [`onclick`](#) | The user clicks on an element. | 3 |
| [`onmouseover`](#) | The user moves the mouse pointer over an element. | |
| [`onmousemove`](#) | The user moves the mouse pointer while it is over an element. | |
| [`onmouseout`](#) | The user moves the mouse pointer out of an element. | |
YouTip