onshowイベントとは
HTMLにおいて、<menu>要素がコンテキストメニューとして表示されると、onshowイベントが発生します。このイベントを利用することで、コンテキストメニューが画面に表示されるタイミングで、任意のスクリプト（JavaScript）を実行できます。
サンプルコード
以下のコードを実行し、枠内で右クリックしてみてください。<menu>要素がコンテキストメニューとして表示され、onshowイベントによってアラートが表示されます。
<!Doctype html>
<html>
<head>
<title>HTML menu</title>
</head>
<body>
<div style = "border:1px solid #000; padding:20px;" contextmenu = "clickmenu">
<p>ここで右クリックしてください...</p>
<menu type = "context" id = "clickmenu" onshow="display()">
<menuitem label = "Tutorialspoint" onclick = ""></menuitem>
<menuitem label = "Tutorials Library" onclick = ""></menuitem>
<menuitem label = "Coding Ground" onclick = ""></menuitem>
<menuitem label = "Q/A" onclick = ""></menuitem>
</menu>
</div>
<script>
function display() {
alert("コンテキストメニューが表示されます。");
}
</script>
</body>
</html>
コードのポイント
- contextmenu属性：対象の要素に関連付けるコンテキストメニューのIDを指定します。
- <menu type="context">：右クリック時に表示されるコンテキストメニューを定義します。
- <menuitem>：メニュー内の各項目を表します。label属性で表示名を設定できます。
- onshow属性：コンテキストメニューが表示された瞬間に呼び出される関数を指定します。
注意点
contextmenu属性、<menu type="context">、およびonshowイベントは、かつてFirefoxなど一部のブラウザでのみサポートされていましたが、現在はほとんどのモダンブラウザで利用できず、HTML仕様からも削除されています。現代のWeb開発で独自のコンテキストメニューを実装したい場合は、JavaScriptのcontextmenuイベントとCSSを組み合わせてカスタムメニューを作成するのが一般的です。
-
HTMLで要素がフォーカスを取得したときにスクリプトを実行する方法
HTMLでは、onfocus属性を使用することで、要素がフォーカスを取得した瞬間にJavaScriptを実行できます。 onfocus属性とは onfocus属性は、テキスト入力欄やボタンなどのフォーム要素がユーザーによって選択され（フォーカスされ）、入力可能な状態になったときに、指定したスクリプト（関数）を呼び出すイベントハンドラです。 主な活用シーンとしては、以下のようなものが挙げられます。 入力欄がフォーカスされたときに背景色を変えて、現在どの項目を編集中か視覚的に強調する 入力欄のプレースホルダーやヒントテキストを表示する バリデーションメッセージやガイダンスを動的に切り替える 実
-
HTMLのonmousedown属性でマウスボタンが押されたときにスクリプトを実行する方法
HTML要素の上でマウスボタンが押された瞬間にスクリプトを実行したい場合は、onmousedown属性を使用します。この属性は、ユーザーが対象の要素をマウスでクリック（押し下げ）したタイミングで、指定したJavaScript関数を呼び出します。なお、onmousedownはボタンを「押した」瞬間に発火するイベントであり、ボタンを「離した」瞬間に発火するonmouseup属性と組み合わせて使うことで、より直感的なインタラクションを実現できます。サンプルコード以下のコードでは、見出し（h3要素）にonmousedown属性とonmouseup属性を設定しています。見出しの上でマウスボタンを押すと文