JavaScript Events

JavaScript Events
HTML 이벤트는 HTML 요소에 발생하는 것 입니다.

HTML 페이지에서 JavaScript가 사용되는 경우, JavaScript는 이러한 이벤트에 대해 “반응 (react)“할 수 있습니다.

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

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

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

종종 이벤트가 발생하면, 무언가를 하고 싶을 수 있습니다.

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

HTML을 사용하면 JavaScript 코드가 있는 이벤트 핸들러 속성(event handler attributes)을 HTML 요소에 추가 할 수 있습니다.

작은 따옴표 사용:

<element event = 'some JavaScript'>

큰 따옴표 사용:

<element event="some JavaScript">

다음의 예제에서,코드가 있는 onclick 속성은 <button> 요소에 추가합니다.

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

위의 예제에서, JavaScript는 id=“demo”를 가진 요소의 콘텐츠를 변경합니다.

다음 예제에서, 코드는 this.innerHTML를 사용하여 자체 요소의 콘텐츠를 변경합니다.

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

JavaScript 코드는 종종 몇 줄로 되어 있습니다. 함수를 호출하는 이벤트 속성을 보는 것이 더 일반적입니다.

<button onclick="displayDate()">The time is?</button>

다음은 몇 가지 일반적인 HTML 이벤트 목록입니다.

이외의 HTML 이벤트 목록은 W3Schools JavaScript Reference HTML DOM Events를 참조하세요.

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

• 페이지가 로딩될 때마다 수행해야 하는 작업
• 페이지를 닫을 때 해야 할 일
• 사용자가 버튼을 클릭할 때 수행되어야 하는 작업
• 사용자가 데이터를 입력할 때, 확인되어야하는 콘텐츠
• 그리고 더 …

JavaScript가 이벤트와 함께 작동하도록 하기 위해 다양한 방법을 사용할 수 있습니다.

• HTML 이벤트 속성은 JavaScript 코드를 직접 실행할 수 있습니다.
• HTML 이벤트 속성은 JavaScript 함수를 호출할 수 있습니다.
• HTML 요소에 고유한 이벤트 핸들러 함수를 할당할 수 있습니다.
• 이벤트가 전송되거나 처리되지 않도록 방지할 수 있습니다.
• 그리고 더 …

HTML DOM 챕터에서, 이벤트와 이벤트 핸들러에 대해 더 많이 배울 것입니다.