[DOM_Event] JS - contextmenu 이벤트 (oncontextmenu 속성) - 마우스오른쪽메뉴선택 (= 컨텍스트메뉴 이벤트)

1. contextmenu 예제 - 마우스 오른쪽 메뉴 선택 이벤트
2. contextmenu 정의
3. contextmenu 구문

contextmenu 예제 - 마우스 오른쪽 메뉴 선택 이벤트 

 

<style>

div {

  background: yellow;

  border: 1px solid gray;

  padding: 10px;

}

</style>

<div oncontextmenu="homzzang()">

  <p>홈짱닷컴 Homzzang.com</p>

</div>

<script>

function homzzang() {

  alert("홈짱닷컴에 오셔서 코딩 배우세요.");

}

</script> 

 

결과보기 

contextmenu 정의

 

사용자가 요소를 마우스오른쪽 단추로 클릭해 메뉴를 열 때 발생. 

 

---

 

1.

oncontextmenu 속성은 모든 브라우저에서 지원되지만,
contextmenu 속성은 현재 Firefox에서만 지원.

 

2.

모든 브라우저 지원.

 

3.

• 이벤트확산 : O
• 취소가능성 : O
• 이벤트타입 : MouseEvent
• 지원 HTML : 모든 HTML 요소
• DOM 버전 : Level 3 Events

 

contextmenu 구문

 

HTML 속성 방식

<element oncontextmenu="homzzang()">

 

JS 속성 방식

object.oncontextmenu = function(){homzzang()};

 

JS 메서드 방식

object.addEventListener("contextmenu", homzzang);

 

※ homzzang : 실행함수명. (함수명 자리에 실행코드를 직접 입력 가능)

※ 이벤트명 앞에 on 붙는지 여부와 함수명 뒤에 () 붙는지 여부에 주의 !

※ addEventListener() 메서드는 IE8 및 그 이전 브라우저는 지원 안 함.