What is mousedown event Listener in javascript?

Rumman Ansari   Software Engineer   2023-03-26   303 Share
☰ Table of Contents

Table of Content:

The "mousedown" event in JavaScript is triggered when the mouse button is pressed down on an element on a webpage. You can use an event listener to execute a function when the "mousedown" event occurs on an element.

Here is an example of using an event listener to execute a function when the mouse button is pressed down on a button:


<button id="myButton">Click me!</button>

<script>
  // Define the function to be executed when the mouse button is pressed down on the button
  function buttonPressed() {
    alert("Mouse button was pressed down on the button!");
  }

  // Attach the function as an event listener to the "mousedown" event on the button
  document.getElementById("myButton").addEventListener("mousedown", buttonPressed);
</script>

In this example, the function buttonPressed is defined and is attached as an event listener to the "mousedown" event on the button with the ID "myButton". When the mouse button is pressed down on the button, the function will be executed and an alert message will be displayed.

Event listeners are a powerful tool for creating interactive and dynamic webpages. They can be attached to a wide range of events on different elements, such as mouse clicks, keyboard input, form submissions, and more.

You can copy below code and try it. 


<!DOCTYPE html>
<html>
<body> 
 <h2>Example of mousedown event Listener in javascript</h2> 
 <button id="myButton">Click me!</button>
</body>
</html>  



<script>
  // Define the function to be executed when the mouse button is pressed down on the button
  function buttonPressed() {
    alert("Mouse button was pressed down on the button!");
  }

  // Attach the function as an event listener to the "mousedown" event on the button
  document.getElementById("myButton").addEventListener("mousedown", buttonPressed);
</script>

You can also try this code:


<!DOCTYPE html>
<html>
<body>
<h1>HTML DOM Events</h1>
<h2>The onmousedown Event</h2>

<p>This example uses the addEventListener() method to attach a "mousedown" and "mouseup" event to a p element.</p>

<p id="demo">Click me.</p>

<script>
document.getElementById("demo").addEventListener("mousedown", mouseDown);
document.getElementById("demo").addEventListener("mouseup", mouseUp);

function mouseDown() {
  document.getElementById("demo").innerHTML = "The mouse button is held down.";
}

function mouseUp() {
  document.getElementById("demo").innerHTML = "You released the mouse button.";
}
</script>

</body>
</html>
‹ Previous -   mouseout event Listener
Next › -   Keydown event Listener