자바스크립트 이벤트(Event)

이벤트(Event)

HTML 이벤트는 HTML 요소에서 발생하는 어떠한 사건을 의미합니다.

 

HTML 이벤트의 예는 다음과 같습니다.

• HTML 웹 페이지의 로딩이 완료된 경우
• HTML 입력필드가 변경된 경우
• HTML 버튼을 클릭한 경우

이 이벤트가 발생했을 때 우리는 무언가를 하도록 만들고 싶은 경우가 있습니다.

자바스크립트를 사용하면 이벤트가 감지될 때 코드를 실행할 수 있습니다.

즉, 이벤트에 대한 반응을 할 수 있도록 해줍니다. 이를 통해서 우리는 많은 것들을 구현 할 수 있습니다.

 

다음과 같이 HTML을 사용하면 자바스크립트 코드가 있는 이벤트 핸들러 속성을 HTML 요소에 추가할 수 있습니다.

<element event='eventHandler'>

<element event="eventHandler">

위의 코드에서 element는 HTML요소의 이름, event는 event 속성, 자바스크립트로 기록한 이벤트 핸들러 이름을

의미합니다. eventHandler 부분에 자바스크립트로 직접 기술하는 것도 가능하지만 이는 코드의 가독성을 떨어뜨리기

때문에 일반적으로 이벤트 핸들러를 함수로 미리 만들어두고 이 함수를 호출하는 방식으로 사용합니다.

 

event 속성의 종류는 다음과 같습니다.

Event	내용
onchange	HTML 요소가 변경된 경우
onclick	HTML 요소가 클릭된 경우
onmouseover	마우스 커서를 HTML요소 위로 올린 경우
onmouseout	마우스 커서를 HTML요소 밖으로 가져간 경우
onkeydown	키보드의 키를 입력한 경우
onload	웹 브라우져가 페이지의 로딩을 완료한 경우

 

 

이벤트 핸들러는 다음과 같은 사용자 입력, 사용자 행동 및 브라우저 행동을 처리하고 확인하는 데 사용할 수 있습니다.

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

자바스크립트에서 이벤트를 처리 할 수 ​​있도록 다양한 방법을 사용할 수 있습니다.

• HTML 이벤트 속성은 JavaScript 코드를 직접 실행할 수 있습니다
• HTML 이벤트 속성은 JavaScript 함수를 호출 할 수 있습니다
• HTML 요소에 고유 한 이벤트 핸들러 함수를 지정할 수 있습니다.
• 이벤트가 전송되거나 처리되는 것을 방지 할 수 있습니다
• 등등...