HTML onshow Event Attribute

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>