EN
JavaScript - onmousedown event example
0 points
In this article, we would like to show you onmousedown event example in JavaScript.
Quick solution:
xxxxxxxxxx1
var myElement = document.querySelector('#my-element');2
3
myElement.addEventListener('mousedown', function() {4
console.log('onmousedown event occurred.');5
});or:
xxxxxxxxxx1
<div onmousedown="handleMousedown()"> div body here... </div>or:
xxxxxxxxxx1
var myElement = document.querySelector('#my-element');2
3
myElement.onmousedown = function() {4
console.log('onmousedown event occurred.');5
};Note:
The
onmousedownis usually used withonmouseupevent. Check examples below to see how they work.
There are three common ways how to use onmousedown event:
- with event listener,
- with element attribute,
- with element property.
In this section, we want to show how to use onmousedown event on div element via event listener mechanism.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
body {6
padding: 0 0 0 10px;7
height: 260px;8
}9
#square {10
padding: 10px;11
height: 120px;12
width: 120px;13
border-radius: 10px;14
background: #b5edc2;15
transition: 1.2s;16
}17
</style>18
</head>19
<body>20
<p>Press and hold the square with any mouse button:</p>21
<div id="square"/>22
<script>23
var mySquare = document.querySelector('#square'); // find element by id24
25
mySquare.addEventListener("mousedown", handleMouseDown); // add mousedown event26
27
function handleMouseDown(){28
mySquare.style.height = "200px";29
mySquare.style.width = "200px";30
mySquare.style.background = "#28a745";31
}32
33
mySquare.addEventListener("mouseup", handleMouseUp); // add mouseup event34
35
function handleMouseUp(){36
mySquare.style.height = "120px";37
mySquare.style.width = "120px";38
mySquare.style.background = "#b5edc2";39
}40
</script>41
</body>42
</html>In this section, we want to show how to use onmousedown event on div element via attribute.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
body {6
padding: 0 0 0 10px;7
height: 260px;8
}9
#square {10
padding: 10px;11
height: 120px;12
width: 120px;13
border-radius: 10px;14
background: #b5edc2;15
transition: 1.2s;16
}17
</style>18
</head>19
<body>20
<p>Press and hold the square with any mouse button:</p>21
<div id="square" onmousedown="handleMouseDown()" onmouseup="handleMouseUp()"/>22
<script>23
var mySquare = document.querySelector('#square'); // find element by id24
25
function handleMouseDown(){26
mySquare.style.height = "200px";27
mySquare.style.width = "200px";28
mySquare.style.background = "#28a745";29
}30
31
function handleMouseUp(){32
mySquare.style.height = "120px";33
mySquare.style.width = "120px";34
mySquare.style.background = "#b5edc2";35
}36
</script>37
</body>38
</html>In this section, we want to show how to use onmousedown event on input element via property.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
body {6
padding: 0 0 0 10px;7
height: 260px;8
}9
#square {10
padding: 10px;11
height: 120px;12
width: 120px;13
border-radius: 10px;14
background: #b5edc2;15
transition: 1.2s;16
}17
</style>18
</head>19
<body>20
<p>Press and hold the square with any mouse button:</p>21
<div id="square"/>22
<script>23
var mySquare = document.querySelector('#square'); // find element by id24
25
mySquare.onmousedown = function(){26
mySquare.style.height = "200px";27
mySquare.style.width = "200px";28
mySquare.style.background = "#28a745";29
}30
31
mySquare.onmouseup = function(){32
mySquare.style.height = "120px";33
mySquare.style.width = "120px";34
mySquare.style.background = "#b5edc2";35
}36
</script>37
</body>38
</html>