Learn Mouse Events Attribute

Tips (Total 5)

3. What is HTML ondblclick Event Attribute

4. What is HTML onmousedown Event Attribute

5. What is HTML onmousemove Event Attribute

# Tips-1) List of Mouse Events Attribute

Attribute	Value	Description
onclick	script	Fires on a mouse click on the element
ondblclick	script	Fires on a mouse double-click on the element
onmousedown	script	Fires when a mouse button is pressed down on an element
onmousemove	script	Fires when the mouse pointer is moving while it is over an element
onmouseout	script	Fires when the mouse pointer moves out of an element
onmouseover	script	Fires when the mouse pointer moves over an element
onmouseup	script	Fires when a mouse button is released over an element
onmousewheel	script	Deprecated. Use the onwheel attribute instead
onwheel	script	Fires when the mouse wheel rolls up or down over an element

# Tips-2) What is HTML onclick Event Attribute

The onclick event attribute in HTML is used to execute a script, typically a JavaScript function, when a user clicks on an HTML element. It is a fundamental part of creating interactive web pages, allowing developers to define actions that occur in response to user clicks.

Example of HTML onclick Event Attribute

It will Execute a JavaScript when a button is clicked.

index.html

Example: HTML

 <button onclick="myFunction()">Click me</button>

Output should be:

Definition and Usage of Definition and Usage

The onclick attribute fires on a mouse click on the element.

Browser Support of HTML onclick Event Attribute

img

Syntax of HTML onclick Event Attribute

<element onclick="script">

Attribute Values of HTML onclick Event Attribute

Value	Description
script	The script to be run on onclick

Technical Details of HTML onclick Event Attribute

Supported HTML tags:	All HTML elements, EXCEPT: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title>

How to Execute a JavaScript when a button is clicked

A function is triggered when the button is clicked. The function outputs some text in a p element with id="demo".

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<button onclick="myFunction()">Click me</button>

<p id="demo"></p>

<p>A function is triggered when the button is clicked. The function outputs some text in a p element with id="demo".</p>

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}
</script>

</body>
</html>

Output should be:

How to Click on a <p> element to change its text color to red

Click me to change my text color.

A function is triggered when the p element is clicked. The function sets the color of the p element to red.

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<p id="demo" onclick="myFunction()">Click me to change my text color.</p>

<p>A function is triggered when the p element is clicked. The function sets the color of the p element to red.</p>

<script>
function myFunction() {
  document.getElementById("demo").style.color = "red";
}
</script>

</body>
</html>

Output should be:

How to Click on a button to copy some text from an input field to another input field

A function is triggered when the button is clicked. The function copies the text from Field1 into Field2.

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

Field1: <input type="text" id="field1" value="Hello World!"><br>
Field2: <input type="text" id="field2"><br><br>

<button onclick="myFunction()">Copy Text</button>

<p>A function is triggered when the button is clicked. The function copies the text from Field1 into Field2.</p>

<script>
function myFunction() {
  document.getElementById("field2").value = document.getElementById("field1").value;
}
</script>

</body>
</html>

Output should be:

# Tips-3) What is HTML ondblclick Event Attribute

The HTML ondblclick event attribute specifies the JavaScript code to be executed when a user double-clicks on an HTML element. This attribute is part of the Event Attributes in HTML and can be applied to most visible HTML elements.

Example of HTML ondblclick Event Attribute

It will Execute a JavaScript when a button is double-clicked.

index.html

Example: HTML

 <button ondblclick="myFunction()">Double-click me</button>

Output should be:

Definition and Usage of HTML ondblclick Event Attribute

The ondblclick attribute fires on a mouse double-click on the element.

Browser Support of HTML ondblclick Event Attribute

img

Syntax of HTML ondblclick Event Attribute

<element ondblclick="script">

Attribute Values of HTML ondblclick Event Attribute

Value	Description
script	The script to be run on ondblclick

Technical Details of HTML ondblclick Event Attribute

Supported HTML tags:	All HTML elements, EXCEPT: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title>

How to Execute a JavaScript when a button is double-clicked

A function is triggered when the button is double-clicked. The function outputs some text in a p element with id="demo".

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<button ondblclick="myFunction()">Double-click me</button>

<p id="demo"></p>

<p>A function is triggered when the button is double-clicked. The function outputs some text in a p element with id="demo".</p>

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}
</script>

</body>
</html>

img

How to Double-click on a <p> element to change its text color to red

Double-click me to change my text color.

A function is triggered when the p element is double-clicked. The function sets the color of the p element to red.

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<p id="demo" ondblclick="myFunction()">Double-click me to change my text color.</p>

<p>A function is triggered when the p element is double-clicked. The function sets the color of the p element to red.</p>

<script>
function myFunction() {
  document.getElementById("demo").style.color = "red";
}
</script>

</body>
</html>

Output should be:

How to Double-click on a button to copy some text from an input field to another input field

A function is triggered when the button is double-clicked. The function copies the text from Field1 into Field2.

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

Field1: <input type="text" id="field1" value="Hello World!"><br>
Field2: <input type="text" id="field2"><br><br>

<button ondblclick="myFunction()">Copy Text</button>

<p>A function is triggered when the button is double-clicked. The function copies the text from Field1 into Field2.</p>

<script>
function myFunction() {
  document.getElementById("field2").value = document.getElementById("field1").value;
}
</script>

</body>
</html>

Output should be:

# Tips-4) What is HTML onmousedown Event Attribute

The onmousedown attribute in HTML is an event attribute that triggers a script when a mouse button is pressed down on an element. This event is part of the broader category of mouse events in the HTML DOM (Document Object Model).

Example of HTML onmousedown Event Attribute

It will Execute a JavaScript when pressing a mouse button over a paragraph.

index.html

Example: HTML

 <p onmousedown="mouseDown()">Click the text!</p>

Output should be:

Definition and Usage of HTML onmousedown Event Attribute

The onmousedown attribute fires when a mouse button is pressed down on the element.

Tip: The order of events related to the onmousedown event (for the left/middle mouse button):

onmousedown
onmouseup
onclick

The order of events related to the onmousedown event (for the right mouse button):

onmousedown
onmouseup
oncontextmenu

Browser Support of HTML onmousedown Event Attribute

img

Syntax of HTML onmousedown Event Attribute

<element onmousedown="script">

Attribute Values of HTML onmousedown Event Attribute

Value	Description
script	The script to be run on onmousedown

Technical Details of HTML onmousedown Event Attribute

Supported HTML tags:	All HTML elements, EXCEPT: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title>

How to Execute a JavaScript when pressing a mouse button over a paragraph

Click the text! The mouseDown() function is triggered when the mouse button is pressed down over this paragraph. The function sets the color of the text to red. The mouseUp() function is triggered when the mouse button is released. The mouseUp() function sets the color of the text to green.

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<p id="p1" onmousedown="mouseDown()" onmouseup="mouseUp()">
Click the text! The mouseDown() function is triggered when the mouse button is pressed down over this paragraph. The function sets the color of the text to red. The mouseUp() function is triggered when the mouse button is released. The mouseUp() function sets the color of the text to green.
</p>

<script>
function mouseDown() {
  document.getElementById("p1").style.color = "red";
}

function mouseUp() {
  document.getElementById("p1").style.color = "green";
}
</script>

</body>
</html>

Output should be:

# Tips-5) What is HTML onmousemove Event Attribute

The HTML onmousemove event attribute is a global event attribute that triggers a script when the mouse pointer is moved while it is over a specific HTML element.

Example of HTML onmousemove Event Attribute

It will Execute a JavaScript when moving the mouse pointer over an image.

index.html

Example: HTML

 <img onmousemove="bigImg(this)" src="smiley.gif" alt="Smiley">

Output should be:

Definition and Usage of HTML onmousemove Event Attribute

The onmousemove attribute fires when the pointer is moving while it is over an element.

Browser Support of HTML onmousemove Event Attribute

img

Syntax of HTML onmousemove Event Attribute

<element onmousemove="script">

Attribute Values of HTML onmousemove Event Attribute

Value	Description
script	The script to be run on onmousemove

Technical Details of HTML onmousemove Event Attribute

Supported HTML tags:	All HTML elements, EXCEPT: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title>

How to Execute a JavaScript when moving the mouse pointer over an image

The function bigImg() is triggered when the user mouse pointer is moved over the image. This function enlarges the image.

The function normalImg() is triggered when the mouse pointer is moved out of the image. That function sets the height and width of the image back to normal.

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<img onmousemove="bigImg(this)" onmouseout="normalImg(this)" border="0" src="https://horje.com/avatar.png" alt="Admin" width="32" height="32">

<p>The function bigImg() is triggered when the user mouse pointer is moved over the image. This function enlarges the image.</p>
<p>The function normalImg() is triggered when the mouse pointer is moved out of the image. That function sets the height and width of the image back to normal.</p>

<script>
function bigImg(x) {
  x.style.height = "64px";
  x.style.width = "64px";
}

function normalImg(x) {
  x.style.height = "32px";
  x.style.width = "32px";
}
</script>

</body>
</html>