JS EVENTS
HTML 이벤트는 HTML 요소에 발생하는 "사물"이다.
JS가 HTML페에지에서 사용될 때, JS는 이러한 이벤트에 반응(react) 할 수 있다.
HTML Events
HTML 이벤트는 브라우저가 하는 것 또는 사용자가 하는 것이다.
아래는 HTML의 몇가지 예시다.
- HTML WEB페이지 로드가 완료되었다.
- HTML 입력 필드가 변경되었다.
- HTML 버튼이 클릭 되었다.
종종 이벤트가 발생할 때, 사용자는 무언가를 하고 싶을 수 있다.
JS는 이벤트가 감지될 때, 사용자의 코드를 실행 시킨다.
HTML을 사용하면 JS코드와 함께 이벤트 핸들러 속성을 HTML 요소에 추가할 수 있다.
따옴표를 사용할 때 :
<element event='some JavaScript'>
쌍 따옴표를 사용할 때 :
<element event="some JavaScript">
아래 예시에서 onclick이라는 속성을 <button> 요소에 코드 형식으로 넣어줄 것이다.
<!DOCTYPE html>
<html>
<body>
<button onclick="document.getElementById('demo').innerHTML=Date()">The time is?</button>
<p id="demo"></p>
</body>
</html>
위의 예시에서 JS코드는 id="demo"인 요소의 내용을 변경한다.
아래 예시에서 코드는 this.innerHTML을 사용하여 자체 요소의 내용을 변경한다.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML Events</h2>
<button onclick="this.innerHTML=Date()">The time is?</button>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript HTML Events</h2>
<p>Click the button to display the date.</p>
<button onclick="displayDate()">The time is?</button>
<script>
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
<p id="demo"></p>
</body>
</html> 
Common HTML Events
아래 표는 일반적으로 사용하는 HTML 이벤트 목록이다.
| 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 |
더 자세한 항목은 아래 주소를 참조, HTM DOM Events
(참조 : https://www.w3schools.com/jsref/dom_obj_event.asp)
What can JavaScript Do?
- 이벤트 핸들러는 사용자 입력, 사용자 작업 및 브라우저 작업을 처리하고 확인하는데 사용할 수 있다.
- 페이지가 로드될 때마다 수행해야 하는 작업
- 페이지를 닫았을 때 해야 할 일
- 사용자가 버튼을 클릭할 때 수행해야 하는 작업
- 사용자가 데이터를 입력 할 때 확인해야 하는 내용
- 그리고 등등..
- JS가 이벤트와 함께 작동하도록 하기 위해 다양한 방법을 사용할 수 있다.
- HTML 이벤트 속성은 JS 코드를 직접 실행할 수 있다.
- HTML 이벤트 속성은 JS 함수를 호출할 수 있다.
- HTML 요소에 고유한 이벤트 핸들러 기능을 할당할 수 있다.
- 이벤트가 전송되거나 처리되는 것을 방지할 수 있다.
- 그리고 등등..
공정 설비 개발/연구원에서 웹 서비스 개발자로 경력 이전하였습니다. Node.js 백엔드 기반 풀스택 개발자를 목표로 하고 있습니다.