EN
JavaScript - onmousedown event example
0
points
In this article, we would like to show you onmousedown event example in JavaScript.
Quick solution:
var myElement = document.querySelector('#my-element');
myElement.addEventListener('mousedown', function() {
console.log('onmousedown event occurred.');
});
or:
<div onmousedown="handleMousedown()"> div body here... </div>
or:
var myElement = document.querySelector('#my-element');
myElement.onmousedown = function() {
console.log('onmousedown event occurred.');
};
Note:
The
onmousedownis usually used withonmouseupevent. Check examples below to see how they work.
Practical examples
There are three common ways how to use onmousedown event:
- with event listener,
- with element attribute,
- with element property.
1. Event listener based example
In this section, we want to show how to use onmousedown event on div element via event listener mechanism.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
body {
padding: 0 0 0 10px;
height: 260px;
}
#square {
padding: 10px;
height: 120px;
width: 120px;
border-radius: 10px;
background: #b5edc2;
transition: 1.2s;
}
</style>
</head>
<body>
<p>Press and hold the square with any mouse button:</p>
<div id="square"/>
<script>
var mySquare = document.querySelector('#square'); // find element by id
mySquare.addEventListener("mousedown", handleMouseDown); // add mousedown event
function handleMouseDown(){
mySquare.style.height = "200px";
mySquare.style.width = "200px";
mySquare.style.background = "#28a745";
}
mySquare.addEventListener("mouseup", handleMouseUp); // add mouseup event
function handleMouseUp(){
mySquare.style.height = "120px";
mySquare.style.width = "120px";
mySquare.style.background = "#b5edc2";
}
</script>
</body>
</html>
2. Attribute based example
In this section, we want to show how to use onmousedown event on div element via attribute.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
body {
padding: 0 0 0 10px;
height: 260px;
}
#square {
padding: 10px;
height: 120px;
width: 120px;
border-radius: 10px;
background: #b5edc2;
transition: 1.2s;
}
</style>
</head>
<body>
<p>Press and hold the square with any mouse button:</p>
<div id="square" onmousedown="handleMouseDown()" onmouseup="handleMouseUp()"/>
<script>
var mySquare = document.querySelector('#square'); // find element by id
function handleMouseDown(){
mySquare.style.height = "200px";
mySquare.style.width = "200px";
mySquare.style.background = "#28a745";
}
function handleMouseUp(){
mySquare.style.height = "120px";
mySquare.style.width = "120px";
mySquare.style.background = "#b5edc2";
}
</script>
</body>
</html>
3. Property based example
In this section, we want to show how to use onmousedown event on input element via property.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
body {
padding: 0 0 0 10px;
height: 260px;
}
#square {
padding: 10px;
height: 120px;
width: 120px;
border-radius: 10px;
background: #b5edc2;
transition: 1.2s;
}
</style>
</head>
<body>
<p>Press and hold the square with any mouse button:</p>
<div id="square"/>
<script>
var mySquare = document.querySelector('#square'); // find element by id
mySquare.onmousedown = function(){
mySquare.style.height = "200px";
mySquare.style.width = "200px";
mySquare.style.background = "#28a745";
}
mySquare.onmouseup = function(){
mySquare.style.height = "120px";
mySquare.style.width = "120px";
mySquare.style.background = "#b5edc2";
}
</script>
</body>
</html>