HTML에서 <menu> 요소가 컨텍스트 메뉴(context menu)로 화면에 표시되면 onshow 이벤트가 발생합니다. 이 이벤트에 핸들러를 연결하면 컨텍스트 메뉴가 나타나는 순간 원하는 자바스크립트 코드를 실행할 수 있습니다.
예제
다음 코드를 실행하면 <menu> 요소가 컨텍스트 메뉴로 표시될 때 스크립트가 실행되는 과정을 확인할 수 있습니다.
<!Doctype html>
<html>
<head>
<title>HTML menu</title>
</head>
<body>
<div style = "border:1px solid #000; padding:20px;" contextmenu = "clickmenu">
<p>Right click inside here....</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("The context menu will be visible now.");
}
</script>
</body>
</html>
코드 설명
- contextmenu 속성: div 영역에 지정되어 있으며, 해당 영역 안에서 마우스 오른쪽 버튼을 클릭하면 id가 'clickmenu'인 <menu> 요소가 컨텍스트 메뉴로 표시됩니다.
- onshow 이벤트: 컨텍스트 메뉴가 화면에 나타나기 직전에 발생하며, 이 예제에서는 display() 함수를 호출합니다.
- display() 함수: alert()을 통해 "컨텍스트 메뉴가 곧 표시됩니다"라는 알림 메시지를 보여줍니다.
참고: 브라우저 호환성
<menu>, <menuitem> 요소와 contextmenu 속성, onshow 이벤트는 초기 HTML5 초안에 포함되었지만 현재 HTML 표준에서는 제외되었으며, Chrome과 Edge 등 대부분의 최신 브라우저에서는 더 이상 지원되지 않습니다. 따라서 실무에서는 CSS와 JavaScript를 조합하여 직접 커스텀 컨텍스트 메뉴를 구현하는 방식이 일반적으로 사용됩니다.