[javascript] 13. 이벤트(Events) - 자바스크립트 강좌 JS / CSE

JavaScript Events

 HTML 이벤트는 HTML 요소에서 발새하는 "사건"입니다.

 자바스크립트가 HTML 페이지에서 사용된다면, 자바스크립트는 이러한 이벤트에 반응 할 수 있습니다.

 

1. HTML Events

 HTML 이벤트는 브라우저가 하는 일 또는 사용자가 하는 일이 될 수 있습니다.

 

 HTML 이벤트의 몇 가지 예제:

  - HTML 웹 페이지가 로딩을 끝 맞췄을 때

  - HTML 입력 필드가 변경 되었을 때

  - HTML 버튼이 클릭 되었을 때

 

 종종 이벤트가 발생하면, 무언가 일을 하고 싶어합니다.

 자바스크립트는 이벤트가 감지되었을 때, 코드를 실행할 수 있게 해줍니다.

  

 

 
<button onclick='getElementById("demo").innerHTML=Date()'>The time is?</button>

 

<button onclick="this.innerHTML=Date()">The time is?</button>

2. Common HTML Events

 

Event	Description
onchange	An HTML element has been changed
onclick	The user clicks an HTML element
onmouseover	The user moves the mouse over an HTML element
onmouseout	The user moves the mouse away from an HTML element
onkeydown	The user pushes a keyboard key
onload	The browser has finished loading the page

[ 출처: W3Schools ]

3. What can JavaScript Do?

 이벤트 핸들러(Event Handler)는 사용자의 입력, 행위, 브라우저의 행위를 다루거나 검증 할 수 있습니다:

  - 페이지 로드가 매 순간 끝났을 때

  - 페이지가 닫혔을 때

  - 사용자가 버튼을 클릭 했을 때

  - 사용자 입력 값을 검증 할 때

  - 등등.....

 여러가지 메소드는 이벤트와 함께 작동할 수 있도록 자바스크립트를 지원합니다:

  - HTML 이벤트 속성은 자바스크립트 코드를 바로 실행 할 수 있습니다.

  - HTML 이벤트 속성은 자바스크립트 함수를 호출 할 수 있습니다.

  - HTML 요소에 대한 이벤트 핸들러 함수를 할당 할 수 있습니다.

  - 이벤트가 보내지거나 다루어지는 것을 방지 할 수 있습니다.

  - 등등....

  

 

 

 

3. What can JavaScript Do?

 이벤트 핸들러(Event Handler)는 사용자의 입력, 행위, 브라우저의 행위를 다루거나 검증 할 수 있습니다:

  - 페이지 로드가 매 순간 끝났을 때

  - 페이지가 닫혔을 때

  - 사용자가 버튼을 클릭 했을 때

  - 사용자 입력 값을 검증 할 때

  - 등등.....

 여러가지 메소드는 이벤트와 함께 작동할 수 있도록 자바스크립트를 지원합니다:

  - HTML 이벤트 속성은 자바스크립트 코드를 바로 실행 할 수 있습니다.

  - HTML 이벤트 속성은 자바스크립트 함수를 호출 할 수 있습니다.

  - HTML 요소에 대한 이벤트 핸들러 함수를 할당 할 수 있습니다.

  - 이벤트가 보내지거나 다루어지는 것을 방지 할 수 있습니다.

  - 등등....