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.

function using the addEventListener event.

The following syntax uses a mouseup event with a javascript function.

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.

Output

The following output shows the changes in html after working the mouseup function.

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.

Output

The following output shows the changes in html after working the mouseup function.

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.

Output

The following output shows the changes in html after working the mouseup function.

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.

Output

The following output shows the changes in html after working the mouseup function.

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.

Output

The following output shows the changes in html after working the mouseup function.