ES6-이벤트

JavaScript는 페이지에 상호 작용을 추가하기위한 것입니다. JavaScript는 이벤트를 사용하는 메커니즘을 사용하여이를 수행합니다.Events DOM (Document Object Model) 레벨 3의 일부이며 모든 HTML 요소에는 JavaScript 코드를 트리거 할 수있는 이벤트 세트가 포함되어 있습니다.

이벤트는 소프트웨어가 인식하는 동작 또는 발생입니다. 사용자 또는 시스템에 의해 트리거 될 수 있습니다. 이벤트의 일반적인 예로는 사용자가 버튼을 클릭하고, 웹 페이지를로드하고, 하이퍼 링크를 클릭하는 등이 있습니다. 다음은 몇 가지 일반적인 HTML 이벤트입니다.

이벤트 핸들러

이벤트가 발생하면 응용 프로그램은 관련 작업 집합을 실행합니다. 이 목적을 달성하는 코드 블록을eventhandler. 모든 HTML 요소에는 연관된 이벤트 세트가 있습니다. 이벤트 핸들러를 사용하여 JavaScript에서 이벤트가 처리되는 방식을 정의 할 수 있습니다.

onclick 이벤트 유형

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

예

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

위 코드가 성공적으로 실행되면 다음 출력이 표시됩니다.

onsubmitEvent 유형

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 함수를 나타냅니다.

속성	값	기술
오프라인	스크립트	문서가 오프라인이 될 때 트리거됩니다.
중단하다	스크립트	중단 이벤트에 대한 트리거
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	스크립트	미디어가 볼륨을 변경할 때 트리거되며 볼륨이 "음소거"로 설정된 경우에도 트리거됩니다.
대기 중	스크립트	미디어 재생이 중지되었지만 다시 시작될 것으로 예상되는 경우 트리거됩니다.