자바스크립트 이벤트(JavaScript Events)

자바스크립트 이벤트

HTML 이벤트(events)는 HTML 요소(elements)에 발생하는 “것(things)”입니다.

자바스크립트가 HTML pages에서 사용될 때, 자바스크립트는 이 이벤트에 “반응(react)”할 수 있습니다.


HTML 이벤트(Events)

HTML 이벤트는 브라우저가 수행하거나 사용자가 수행하는 작업입니다.

다음은 HTML 이벤트의 몇 가지 예입니다:

  • HTML 웹 페이지가 로드가 종료되었습니다.
  • HTML 입력 필드가 변경되었습니다.
  • HTML 버튼을 클릭했습니다.

때로는 이벤트가 발생할 때 무언가를 하기를 원할 수 있습니다.

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

HTML은 JavaScript code를 사용하여이벤트 핸들러 속성(event handler attributes)을 HTML 요소(elements)에 추가할 수 있습니다.

작은 따옴표 사용(With single quotes):

큰 따옴표 사용(With double quotes):

다음 예제에서는 onclick 속성(attribute)(코드와 함께)이 버튼 요소(element)에 추가됩니다:

Example

위의 예제에서 자바스크립트 코드는 id = “demo”를 사용하여 요소의 내용(content of the element)을 변경합니다.

다음 예제 코드는 this.innerHTML을 사용하여 자체 요소의 내용(content of its own element )을 변경합니다:

Example

Example

날짜를 표시하려면 버튼을 클릭하세요!


일반적인 HTML 이벤트(Common HTML Events)

일반적인 HTML 이벤트 목록은 다음과 같습니다:

Event Description
onchange HTML 요소가 변경되었습니다.
onclick 사용자가 HTML 요소를 클릭합니다.
onmouseover 사용자가 HTML 요소 위로 마우스를 이동합니다.
onmouseout 사용자가 HTML 요소에서 마우스를 이동시킵니다.
onkeydown 사용자가 키보드 키를 누릅니다.
onload 브라우저가 페이지로드를 완료했습니다.

목록은 훨씬 더 많습니다: W3Schools JavaScript Reference HTML DOM Events.


자바스크립트는 무엇을 할 수 있습니까?

이벤트 핸들러(Event handlers)는 사용자 입력(user input), 사용자 작업(user actions) 및 브라우저 작업(browser actions)을 처리하고 확인하는 데 사용할 수 있습니다:

  • 페이지를로드 할 때마다 수행해야하는 작업
  • 페이지를 닫을 때 수행해야 할 작업
  • 사용자가 버튼을 클릭 할 때 수행해야하는 작업
  • 사용자가 데이터를 입력 할 때 확인해야하는 콘텐츠
  • And more …

많은 다른 메소드를 사용하여 자바스크립트가 이벤트와 함께 작동하도록 할 수 있습니다:

  • HTML 이벤트 속성은 자바스크립트 코드를 직접 실행할 수 있습니다.
  • HTML 이벤트 속성은 자바스크립트 함수를 호출 할 수 있습니다.
  • HTML 요소에 자신의 이벤트 핸들러 함수를 할당 할 수 있습니다.
  • 이벤트가 보내지거나 처리되는 것을 막을 수 있습니다.
  • And more …

댓글 남기기