HTML onshow Event Attribute

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The HTML onshow event attribute fires when a <menu> element is shown as a context menu. It is a new attribute in HTML5 and is not supported in all browsers.

To use the onshow attribute, you simply add it to the <menu> element and assign it the name of a JavaScript function. When the context menu is shown, the function will be executed.

Here is an example of how to use the onshow attribute:

<menu onshow="myFunction()">
  <li><a href="#">Option 1</a></li>
  <li><a href="#">Option 2</a></li>
</menu>

The myFunction() function can be used to perform any task you want, such as updating the contents of the context menu or displaying a message to the user.

Here is an example of a simple myFunction() function:

function myFunction() {
  alert("The context menu is now showing!");
}

When you right-click on a web page that contains the above code, you will see a context menu with two options. When you click on either option, the myFunction() function will be executed and an alert message will be displayed.

The onshow event attribute is a useful way to add custom functionality to context menus.

Syntax

<element onshow="script">

Values

scriptThe name of the script to use when the event has been triggered.

Example

HTML

<!DOCTYPE html > 

<html> 

  <head> 

    <title>onshow event</title>  

  </head> 

  <body>  

  <div contextmenu="mymenu"> 

  <p>Right click here to see the context menu.!</p> 

  <menu type="context" id="mymenu" onshow="test()"> 

  <menuitem label="Refresh" onclick="window.location.reload();"></menuitem> 

  </menu>

  </div>

<script>

function test() {

  alert("EXAMPLE: The context menu will be shown!");

}

</script>

  </body> 

</html>