onmouseup

The onmouseup event is triggered when a mouse button is released over an element. It follows a specific order of events for the left and middle mouse buttons.

onmouseup event

The onmouseup event triggers a <script> when a mouse button is released over an element. It's often used to manage user interactions and finalize actions within UI components.

Syntax

In HTML

index.html

<element onmouseup="myScript">

In JS

script.js

object.onmouseup = function(){myScript};

In JavaScript, the `addEventListener()` function is used.

script.js

object.addEventListener("mouseup", myScript);

Example

::event-onmouseup ::

index.html

<!DOCTYPE html>
<html>
<body>
<h1>HTML DOM Events</h1>
<h2>The onmousedown Event</h2>

<p>Clock the text below!</p>
<p id="myP" onmousedown="mouseDown()" onmouseup="mouseUp()">
The mouseDown() function sets the color of this text to red.
The mouseUp() function sets the color of this text to blue.
</p>

<script>
function mouseDown() {
  document.getElementById("myP").style.color = "red";
}

function mouseUp() {
  document.getElementById("myP").style.color = "blue";
}
</script>

</body>
</html>

Values

<script>
- Indicates the <script> to execute when the event is triggered.

The onmouseup event is useful for handling actions when a mouse button is released over an element. It allows developers to manage interactions and finalize tasks in UI components. This event is essential for improving user experience and responsiveness in web applications.

onmouseover

The onmouseover event is triggered when the mouse pointer enters an element. It is frequently used in conjunction with the onmouseout event to manage interactions when the pointer enters or leaves an element.

onmousewheel

The onmousewheel event is triggered when the mouse wheel is scrolled up or down over an element. This attribute is now deprecated.