The mouseup event is associated with mouse interactions on a web page through JavaScript capabilities. This event is triggered by the mouse on a laptop or can be initiated by a single click of the mouse using the mouseEvent interface. When the button on the laptop's mouse is released, the handling of the mouse-up event commences its functionality.
The mouse event handler known as (mouseup) is triggered when a mouse button is released after being pressed. This function is akin to the mouse down event; however, it requires the button to be fully clicked and released.
Syntax
The subsequent syntax illustrates the event of releasing the mouse or mouse button, as well as the "go upside" action, utilizing the "onmouseup" function.
<div id = "demoDIV" onmouseup = "function_name()"> </div>
<script>
function function_name(){
//write code here!
}
</script>
function using the addEventListener event.
<script>
object.addEventListener("mouseup", function_name);
</script>
The syntax below employs a mouseup event alongside a JavaScript function.
<script>
Object.onmouseup = function_name;
</script>
Support browsers
The mouse event function supports many browsers. The "mouseup" function supports the following browsers.
- Crome
- Edge
- Firefox
- Opera
- Safari
Examples
The mouseup events can be utilized alongside various methods and distinct events. This functionality allows us to implement a range of actions in response to mouse movements.
Example 1: The fundamental mouseup event utilizing the HTML element alongside a JavaScript function. In this scenario, we can apply the mouseup function to the div element. Its functionality is employed within the JavaScript section, utilizing the style attributes to modify height, color, and other properties.
<!DOCTYPE html>
<html>
<head>
<title> How to use the mouseup event in javascript </title>
<style>
#demoDIV {
border: 1px solid black;
}
#datas {
color: red;
}
</style>
</head>
<body>
<h2> Basic mouseup event in javascript </h2>
<p id = "datas"> </p>
<div id = "demoDIV" onmouseup = "demoDIVFunction()">
The javascript mouseup event is used with the mouse movement event on the web page. When we release the mouse button, the event and its handler operate on the page".
</div>
<script>
function demoDIVFunction() {
document.getElementById("datas").innerHTML = "JavaScript Mouse up function activates successfully!!!";
document.getElementById("demoDIV").style.fontSize = "20px";
document.getElementById("demoDIV").style.color = "blue";
document.getElementById("demoDIV").style.width = "400px";
document.getElementById("demoDIV").style.border = "4px dotted navy";
}
</script>
</body>
</html>
Output
The subsequent output illustrates the modifications in the HTML resulting from the execution of the mouseup function.
Example 2: The fundamental mouseup event utilizing the JavaScript function and event handler. We can reference the object of the HTML element by its ID and invoke the function in JavaScript.
<!DOCTYPE html>
<html>
<head>
<title> How to use the mouseup event in javascript </title>
<style>
#demoDIV {
border: 1px solid black;
}
#datas {
color: red;
}
</style>
</head>
<body>
<div id = "demoDIV">
<h4> Basic mouseup event with an object in javascript </h4>
<p id = "datas"> </p>
The javascript mouseup event is used with the mouse movement event on the web page. When we release the mouse button, the event and its handler operate on the page".
</div>
<script>
var demoObj = document.getElementById("demoDIV");
demoObj.onmouseup = demoDIVFunction;
function demoDIVFunction() {
document.getElementById("datas").innerHTML = "JavaScript Mouse up function with object activates successfully!!!";
document.getElementById("demoDIV").style.fontSize = "20px";
document.getElementById("demoDIV").style.color = "green";
document.getElementById("demoDIV").style.width = "440px";
document.getElementById("demoDIV").style.border = "4px dotted navy";
}
</script>
</body>
</html>
Output
The subsequent output illustrates the modifications in HTML that occur after the execution of the mouseup function.
Example 3: The mouseup event is utilized in conjunction with windows through a JavaScript function along with its corresponding handler. We can apply the window object to the mouseup event by specifying the handler's name.
<!DOCTYPE html>
<html>
<head>
<title> How to use the mouseup event in javascript </title>
<style>
#demoDIV {
border: 1px solid black;
}
#datas {
color: red;
}
</style>
</head>
<body id = "demoDIV">
<div>
<h4> Basic mouseup event with an object in javascript </h4>
<p id = "datas"> </p>
The javascript mouseup event is used with the mouse movement event on the web page. When we release the mouse button, the event and its handler operate on the page".
</div>
<script>
//The onmouseup event works with the window
window.onmouseup = demoDIVFunction;
function demoDIVFunction() {
document.getElementById("datas").innerHTML = "JavaScript Mouse up function with object activates successfully!!!";
document.getElementById("demoDIV").style.fontSize = "20px";
document.getElementById("demoDIV").style.backgroundColor = "lightgrey";
document.getElementById("demoDIV").style.color = "yellow";
document.getElementById("demoDIV").style.width = "410px";
document.getElementById("datas").style.border = "2px dotted navy";
}
</script>
</body>
</html>
Output
The subsequent output illustrates the modifications in the HTML that occur after executing the mouseup function.
Example 4: The fundamental mouseup event utilizing a JavaScript function along with its handler. We can reference the HTML element by its ID and employ the function within our JavaScript code. The mouse-down event is implemented using the addEventListener method within the script tag.
<!DOCTYPE html>
<html>
<head>
<title> How to use the mouseup event in javascript </title>
<style>
#demoDIV {
border: 1px solid black;
}
#datas {
color: red;
}
</style>
</head>
<body>
<h2> How to use the mouseup event in javascript </h2>
<p id = "datas" style="color:navy !important;"> </p>
<div id = "demoDIV">
The javascript mouseup event with the addEventListner event uses with the mouse movement event on the web page. When we release the mouse button, the event and its handler operate on the page".
</div>
<script>
var demoObj = document.getElementById("demoDIV");
demoObj.addEventListener("mouseup", demoDIVFunction);
function demoDIVFunction() {
document.getElementById("datas").innerHTML = "JavaScript Mouse up function with object using addEventListner event activates successfully!!!";
document.getElementById("demoDIV").style.fontSize = "21px";
document.getElementById("demoDIV").style.color = "white";
document.getElementById("demoDIV").style.backgroundColor = "grey";
document.getElementById("demoDIV").style.border = "2px dotted blue";
}
</script>
</body>
</html>
Output
The output displayed below illustrates the modifications made to the HTML subsequent to the execution of the mouseup function.
Example 5: This example demonstrates the utilization of the mouseup event alongside the JavaScript function and its corresponding handler. We can reference the HTML body element through its id attribute. The mouse-down event is implemented using the addEventListener method within the script tag.
<!DOCTYPE html>
<html>
<head>
<title> How to use the mouseup event in javascript </title>
<style>
#demoDIV {
border: 1px solid black;
}
#datas {
color: red;
}
</style>
</head>
<body id = "demoDIV">
<h3> The mouseup event for body tag in javascript </h3>
<p id = "datas" style="color:yellow !important;"> </p>
<div>
The javascript mouseup event with the addEventListner event uses with the mouse movement event on the web page. When we release the pressed button and event handler, operate the body tag of the html page".
</div>
<script>
var demoObj = document.getElementById("demoDIV");
demoObj.addEventListener("mouseup", demoDIVFunction);
function demoDIVFunction() {
document.getElementById("datas").innerHTML = "JavaScript Mouse up function with object using addEventListner event activates successfully!!!";
document.getElementById("demoDIV").style.fontSize = "21px";
document.getElementById("demoDIV").style.color = "white";
document.getElementById("demoDIV").style.backgroundColor = "grey";
document.getElementById("demoDIV").style.border = "2px dotted blue";
}
</script>
</body>
</html>
Output
The subsequent output illustrates the modifications in the HTML following the execution of the mouseup function.