JavaScript-이벤트

이벤트 란?

HTML과 JavaScript의 상호 작용은 사용자 또는 브라우저가 페이지를 조작 할 때 발생하는 이벤트를 통해 처리됩니다.

페이지가로드 될 때이를 이벤트라고합니다. 사용자가 버튼을 클릭하면 그 클릭도 이벤트입니다. 다른 예로는 아무 키나 누르기, 창 닫기, 창 크기 조정 등과 같은 이벤트가 있습니다.

개발자는 이러한 이벤트를 사용하여 JavaScript 코딩 된 응답을 실행하여 버튼이 창을 닫고, 메시지가 사용자에게 표시되고, 데이터가 검증되며, 상상할 수있는 거의 모든 유형의 응답을 실행할 수 있습니다.

이벤트는 DOM (Document Object Model) 레벨 3의 일부이며 모든 HTML 요소에는 JavaScript 코드를 트리거 할 수있는 이벤트 세트가 포함되어 있습니다.

HTML 이벤트 참조를 더 잘 이해하려면이 작은 자습서를 살펴보십시오 . 여기서 우리는 Event와 JavaScript 사이의 관계를 이해하는 몇 가지 예를 볼 것입니다.

onclick 이벤트 유형

사용자가 마우스 왼쪽 버튼을 클릭 할 때 발생하는 가장 자주 사용되는 이벤트 유형입니다. 이 이벤트 유형에 대해 유효성 검사, 경고 등을 넣을 수 있습니다.

예

다음 예제를 시도하십시오.

<html>
   <head>   
      <script type = "text/javascript">
         <!--
            function sayHello() {
               alert("Hello World")
            }
         //-->
      </script>      
   </head>
   
   <body>
      <p>Click the following button and see result</p>      
      <form>
         <input type = "button" onclick = "sayHello()" value = "Say Hello" />
      </form>      
   </body>
</html>

산출

onsubmit 이벤트 유형

onsubmit양식을 제출하려고 할 때 발생하는 이벤트입니다. 이 이벤트 유형에 대해 양식 유효성 검사를 할 수 있습니다.

예

다음 예제는 onsubmit을 사용하는 방법을 보여줍니다. 여기서 우리는validate()웹 서버에 양식 데이터를 제출하기 전에 함수를 사용하십시오. 만약validate() 함수가 true를 반환하면 양식이 제출되고 그렇지 않으면 데이터가 제출되지 않습니다.

다음 예제를 시도하십시오.

<html>
   <head>   
      <script type = "text/javascript">
         <!--
            function validation() {
               all validation goes here
               .........
               return either true or false
            }
         //-->
      </script>      
   </head>
   
   <body>   
      <form method = "POST" action = "t.cgi" onsubmit = "return validate()">
         .......
         <input type = "submit" value = "Submit" />
      </form>      
   </body>
</html>

onmouseover 및 onmouseout

이 두 가지 이벤트 유형은 이미지 또는 텍스트로도 멋진 효과를 만드는 데 도움이됩니다. 그만큼onmouseover 이벤트는 요소 위에 마우스를 가져 가면 트리거됩니다. onmouseout해당 요소에서 마우스를 움직일 때 트리거됩니다. 다음 예제를 시도하십시오.

<html>
   <head>   
      <script type = "text/javascript">
         <!--
            function over() {
               document.write ("Mouse Over");
            }            
            function out() {
               document.write ("Mouse Out");
            }            
         //-->
      </script>      
   </head>
   
   <body>
      <p>Bring your mouse inside the division to see the result:</p>      
      <div onmouseover = "over()" onmouseout = "out()">
         <h2> This is inside the division </h2>
      </div>         
   </body>
</html>

산출

HTML 5 표준 이벤트

표준 HTML 5 이벤트가 여기에 나열되어 있습니다. 여기서 스크립트는 해당 이벤트에 대해 실행될 Javascript 함수를 나타냅니다.

속성	값	기술
오프라인	스크립트	문서가 오프라인이 될 때 트리거됩니다.
Onabort	스크립트	중단 이벤트에 대한 트리거
onafterprint	스크립트	문서가 인쇄 된 후 트리거됩니다.
onbeforeonload	스크립트	문서가로드되기 전에 트리거됩니다.
인쇄 전	스크립트	문서가 인쇄되기 전에 트리거됩니다.
onblur	스크립트	창이 초점을 잃을 때 트리거됩니다.
oncanplay	스크립트	미디어가 재생을 시작할 수 있지만 버퍼링을 위해 중지해야 할 때 트리거됩니다.
oncanplaythrough	스크립트	버퍼링을 위해 중지하지 않고 미디어를 끝까지 재생할 수있을 때 트리거됩니다.
onchange	스크립트	요소가 변경 될 때 트리거됩니다.
onclick	스크립트	마우스 클릭시 트리거
oncontextmenu	스크립트	상황에 맞는 메뉴가 트리거 될 때 트리거됩니다.
ondblclick	스크립트	마우스 두 번 클릭시 트리거
Ondrag	스크립트	요소를 끌 때 트리거됩니다.
Ondragend	스크립트	드래그 작업 종료시 트리거
Ondragenter	스크립트	요소를 유효한 놓기 대상으로 끌면 트리거됩니다.
ondragleave	스크립트	요소를 유효한 놓기 대상 위로 끌면 트리거됩니다.
Ondragover	스크립트	드래그 작업 시작시 트리거
ondragstart	스크립트	드래그 작업 시작시 트리거
온 드롭	스크립트	드래그 된 요소가 드롭 될 때 트리거됩니다.
ondurationchange	스크립트	미디어 길이가 변경되면 트리거됩니다.
비어있는	스크립트	미디어 리소스 요소가 갑자기 비워지면 트리거됩니다.
계속	스크립트	미디어가 끝에 도달하면 트리거됩니다.
오류	스크립트	오류가 발생하면 트리거됩니다.
onfocus	스크립트	창이 포커스를받을 때 트리거됩니다.
onformchange	스크립트	양식이 변경 될 때 트리거됩니다.
onforminput	스크립트	양식이 사용자 입력을받을 때 트리거됩니다.
onhaschange	스크립트	문서가 변경되면 트리거됩니다.
입력	스크립트	요소가 사용자 입력을받을 때 트리거됩니다.
oninvalid	스크립트	요소가 유효하지 않을 때 트리거됩니다.
onkeydown	스크립트	키를 누를 때 트리거됩니다.
onkeypress	스크립트	키를 눌렀다 놓을 때 트리거됩니다.
onkeyup	스크립트	키를 놓을 때 트리거됩니다.
길 위에	스크립트	문서가로드 될 때 트리거됩니다.
onloadeddata	스크립트	미디어 데이터가로드 될 때 트리거됩니다.
onloadedmetadata	스크립트	미디어 요소의 기간 및 기타 미디어 데이터가로드 될 때 트리거됩니다.
onloadstart	스크립트	브라우저가 미디어 데이터를로드하기 시작할 때 트리거됩니다.
onmessage	스크립트	메시지가 트리거 될 때 트리거됩니다.
onmousedown	스크립트	마우스 버튼을 누를 때 트리거됩니다.
onmousemove	스크립트	마우스 포인터가 움직일 때 트리거됩니다.
onmouseout	스크립트	마우스 포인터가 요소 밖으로 이동할 때 트리거됩니다.
onmouseover	스크립트	마우스 포인터가 요소 위로 이동할 때 트리거됩니다.
onmouseup	스크립트	마우스 버튼을 놓을 때 트리거됩니다.
onmousewheel	스크립트	마우스 휠이 회전 할 때 트리거됩니다.
온라인	스크립트	문서가 오프라인이 될 때 트리거됩니다.
오노 인	스크립트	문서가 온라인 상태가되면 트리거됩니다.
ononline	스크립트	문서가 온라인 상태가되면 트리거됩니다.
onpagehide	스크립트	창이 숨겨지면 트리거됩니다.
onpageshow	스크립트	창이 표시 될 때 트리거됩니다.
onpause	스크립트	미디어 데이터가 일시 중지 될 때 트리거됩니다.
onplay	스크립트	미디어 데이터 재생이 시작될 때 트리거됩니다.
onplaying	스크립트	미디어 데이터 재생이 시작되면 트리거됩니다.
온팝 스테이트	스크립트	창의 기록이 변경 될 때 트리거됩니다.
진행 중	스크립트	브라우저가 미디어 데이터를 가져올 때 트리거됩니다.
onratechange	스크립트	미디어 데이터의 재생 속도가 변경되면 트리거됩니다.
onreadystatechange	스크립트	준비 상태가 변경 될 때 트리거됩니다.
Onredo	스크립트	문서가 다시 실행을 수행 할 때 트리거됩니다.
onresize	스크립트	창 크기가 조정될 때 트리거됩니다.
스크롤	스크립트	요소의 스크롤바가 스크롤 될 때 트리거됩니다.
찾다	스크립트	미디어 요소의 검색 속성이 더 이상 참이 아니고 검색이 종료 될 때 트리거됩니다.
onseeking	스크립트	미디어 요소의 검색 속성이 true이고 검색이 시작된 경우 트리거됩니다.
onselect	스크립트	요소가 선택되면 트리거됩니다.
설치	스크립트	미디어 데이터를 가져 오는 데 오류가있을 때 트리거됩니다.
onstorage	스크립트	문서가로드 될 때 트리거됩니다.
제출시	스크립트	양식이 제출 될 때 트리거됩니다.
onsuspend	스크립트	브라우저가 미디어 데이터를 가져 왔지만 전체 미디어 파일을 가져 오기 전에 중지 된 경우 트리거됩니다.
ontimeupdate	스크립트	미디어가 재생 위치를 변경할 때 트리거됩니다.
Onundo	스크립트	문서가 실행 취소를 수행 할 때 트리거됩니다.
언로드	스크립트	사용자가 문서를 떠날 때 트리거됩니다.
onvolumechange	스크립트	미디어가 볼륨을 변경할 때 트리거되며 볼륨이 "음소거"로 설정된 경우에도 트리거됩니다.
대기 중	스크립트	미디어 재생이 중지되었지만 다시 시작될 것으로 예상되는 경우 트리거됩니다.