next → ← prev

How to use the mouseup event in javascript

The mouseup event works with the mouse movement on the web page using the javascript functionality. The mouse-up event works on the laptop's mouse, or a single mouse click using the mouseEvent event. If we release the press button on the laptop, then the mouse-up event starts its handling functionality.

If the mouse event function (mouseup) uses clicked mouse button after releasing the press button. It is similar to the mouse down function but has to click completely.

Syntax

The following syntax shows the mouse or mouse button release and go upside event using 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 following syntax uses a mouseup event with 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
IE

Examples

The mouseup events work with different methods and different events. We can use it to apply any functionality with mouse movement.

Example 1: the basic mouseup event with the html tag and javascript function. Here we can use the mouseup function on the div tag. Its function uses in the javascript tag with the style tag to change height, colour and others.

<!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 following output shows the changes in html after working the mouseup function.

How to use the mouseup event in javascript

Example 2: the basic mouseup event with the javascript function and handler. We can use the object of the html element id and use the function in the 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 following output shows the changes in html after working the mouseup function.

How to use the mouseup event in javascript

Example 3: the mouseup event uses for windows with the javascript function and its handler. We can use the window object with the mouseup event with the handler 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 following output shows the changes in html after working the mouseup function.

How to use the mouseup event in javascript

Example 4: the basic mouseup event with the javascript function and its handler. We can use the object of the html element id and use the function in the javascript. The mouse-down event uses the addEventListener event in 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 following output shows the changes in html after working the mouseup function.

How to use the mouseup event in javascript

Example 5: the example uses the mouseup event with the javascript function and its handler. We can use the object of the html body tag using id. The mouse-down event uses the addEventListener event in 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 following output shows the changes in html after working the mouseup function.

How to use the mouseup event in javascript

Next TopicThe "mousemove" Event in JavaScript

← prev next →

Latest Courses

Data-Structures

Cloud-Computing

Ethical-Hacking

We provides tutorials and interview questions of all technology like java tutorial, android, java frameworks

Contact info

G-13, 2nd Floor, Sec-3, Noida, UP, 201301, India

[email protected].

Follow us

Tutorials

Java Data Structures C Programming C++ Tutorial C# Tutorial PHP Tutorial HTML Tutorial JavaScript Tutorial jQuery Tutorial Spring Tutorial

Interview Questions

Tcs Intuit Wipro Adobe Infosys Amazon Accenture Cognizant Capgemini Microsoft

Online Compiler

C R C++ Php Java Html Swift Python JavaScript TypeScript

© Copyright 2024 Javatpoint. All Rights Reserved.