Onshow | Qarpeo Institute

onshow event

The onshow event in HTML is triggered when a <menu> element is displayed, usually as part of a context or pop-up menu. It enables developers to run specific actions or scripts when the menu appears, improving user interaction.

Syntax

In HTML

index.html

<element onshow="myScript">

In JS

script.js

object.onshow = function(){myScript};

In JavaScript, the `addEventListener()` function is used.

script.js

object.addEventListener("show", myScript);

Example

::event-onshow ::

index.html

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background: yellow;
  border: 1px solid #cccccc;
  padding: 10px;
}
</style>
</head>
<body>

<p>Assign an "onshow" event to a menu element.</p>

<div contextmenu="mymenu">
<p>Right-click inside this box to see the context menu!

<menu type="context" id="mymenu" onshow="myFunction()">
  <menuitem label="Refresh" onclick="window.location.reload();" icon="ico_reload.png"></menuitem>
  <menu label="Share on...">
    <menuitem label="Twitter" icon="ico_twitter.png" onclick="window.open('//twitter.com/intent/tweet?text=' + window.location.href);"></menuitem>
    <menuitem label="Facebook" icon="ico_facebook.png" onclick="window.open('//facebook.com/sharer/sharer.php?u=' + window.location.href);"></menuitem>
  </menu>
  <menuitem label="Email This Page" onclick="window.location='mailto:?body='+window.location.href;"></menuitem>
</menu>

</div>

<p><strong>Note:</strong> The onshow event is currently only supported in Firefox.</p>

<script>
function myFunction() {
  alert("The context menu is about to be shown");
}
</script>

</body>
</html>

Values

<script>
- The <script> to run when the event is triggered.

Conclusion

The onshow event is useful for triggering actions when a menu or dialog element becomes visible. It's commonly used to enhance user interactions, such as showing context menus or pop-ups. By utilizing this event, developers can improve the dynamic behavior of web applications.

onpopstate

The onpopstate event in HTML is triggered when the active history entry changes, enabling developers to handle browser navigation actions such as going back or forward.

Network

HTML network event attributes track and manage the loading, error handling, and progress of external resources, enhancing user experience and page performance.