oncontextmenu 이벤트는 오른쪽 마우스 버튼을 클릭했을 때 발생합니다. 아래 예제는 오른쪽 마우스 버튼을 클릭했을 때 하위 메뉴를 나타나게 합니다. <style> a { text-decoration:none; } .smenu_hide { display: none; } #mmenu a { margin: 5px; padding: 5px; background-color: #efefef; } #sub_menu { border: 3px solid #f2d0da…
Read more »
라벨이 js 이벤트인 게시물 표시전체 보기
js
JS - 토글 이벤트
토글 이벤트는 <details> 요소를 열거나 닫을 때 발생합니다. 다음은 addEventListener 를 이용한 결과 입니다. <details id="toggle"> <summary>토글 열기</summary> <p>하보니 PHP</p> </details> <script> var btn = document.getElementById("toggle")…
Read more »사용자가 내용을 복사, 붙여넣기, 그리고 자르기를 하였을 때 이벤트가 발생합니다. 이벤트 설 명 oncopy 내용을 복사 할 때 oncut 내용을 자를 때 onpaste 내용을 붙여넣기 할 때 이 예제는 clip 속성의 문자열을 선택해서 복사하기 하면 이벤트가 발생합니다. 키보드로 복사하기 해도 이벤트가 발생…
Read more »
js
JS - 마우스 이벤트
마우스에 의해 발생한 이벤트는 다음 표를 아용할 수 있습니다. 이벤트 설 명 onmouseover 요소 위에 마우스를 올렸을 때 (이벤트 버블링이 이루어짐) onmouseenter 요소 위에 마우스를 올렸을 때 (이벤트 버블링되지 않음) onmousedown 마우스로 누르고 있을 떄 onmouseup…
Read more »
js
JS - 키보드 이벤트
사용자가 키보드를 눌렀을 때 발생한 이벤트를 처리할 수 있습니다. 이벤트 설 명 onkeydown 사용자가 키보드의 키를 누를 때 발생 onkeypress 사용자가 키보드의 키를 누른 상태일 때 발생 (shift, alt, ctrl, esc 는 작동하지 않음) onkeyup 사용자가 키를 누르고 놓을 때 발생 …
Read more »
js
JS - 폼 이벤트
폼 이벤트에는 다양한 이벤트를 제공합니다. 이벤트 설 명 onblur 폼 요소에서 포커스를 잃었을 때 onfocus 폼 요소가 포커스 되었을 때 onfocusin 폼 요소(또는 자식요소)가 포커스 되었을 때 onfocusout 폼 요소(또는 자식요소)가 포커스를 잃었을 때 …
Read more »
js
JS - 윈도우 이벤트
브라우저에 변화가 발생하면 자동으로 실행될 이벤트를 설정할 수 있습니다. 이벤트 설 명 onload 페이지가 모두 로드되었을 때 onpageshow 페이지가 로드되기 시작할 때 onunload 페이지를 빠져 나갈 때 onresize 브라우저 창 크기를 조정할 때 ona…
Read more »이벤트 버블링(Event Bubbling)이란 어떤 요소에서 이벤트가 발생하면 감지된 요소에서 상위 요소에 이르기까지 전달되어 이벤트가 전파되는 것을 말합니다. 예를 들어 최하위 요소에서 이벤트가 발생하면 <html>의 최상위 요소까지 이벤트가 전달됩니다. 아래 예제를 테스트해보면 알겠지만 하위 요소인 ‘자손요소’를 클릭하면 상위 요소인 <html> 까지 도달한다는 것을 알 수 있습니다. <html onclick="alert('…
Read more »이벤트란 브라우저에서 사용자의 조작이나 환경의 변화로 벌어진 사건을 말하며 이러한 이벤트에 대해 즉각적인 반응을 할 수 있게 하는 것을 핸들러라 부릅니다. 브라우저에서 발생하는 이벤트를 요약하면 다음과 같습니다. 설 명 윈도우 이벤트 브라우저에 변화가 생겼을 때 마우스 이벤트 사용자가 마우스로 조작했을 때 키보드 이벤트 사용자가 키보드…
Read more »
