◆ 이벤트 핸들러
1. onclick
- onclick 이벤트 핸들러는 HTML 요소를 클릭할 때 발생합니다.
- 이벤트 핸들러 함수는 클릭 이벤트가 발생할 때 실행됩니다.
2. onchange
- onchange 이벤트는 요소의 값이 변경되고, 포커스가 해당 요소에서 벗어날 때 발생합니다.
- ex) input 요소의 값을 변경하고 포커스를 다른 요소로 이동하면 onchange 이벤트가 발생합니다. - 이벤트 핸들러 함수는 변경된 값을 전달하며 실행됩니다.
- 값이 변경될 때 바로 처리하지 않아도 되고, 요소의 값이 최종적으로 정해질 때까지 기다려야 하는 경우에 사용될 수 있습니다
- ex) select 요소에서 옵션을 변경했을 때, 변경된 값을 한꺼번에 처리할 수 있습니다.
3. oninput
- oninput 이벤트는 요소의 값이 변경될 때마다 발생합니다.
- ex) input 요소에서 사용자가 텍스트를 입력하거나 삭제하면 oninput 이벤트가 발생합니다. - 값을 변경할 때마다 바로 처리해야 하는 경우에 사용될 수 있습니다.
- ex) 검색 기능을 구현할 때, 사용자가 검색어를 입력할 때마다 검색 결과를 업데이트할 수 있습니다.
- 기본이벤트 (a태그, form태그)는 return 을 사용할 수 있다.
- (document.querySelector)선택을 2번하면 코드가 간결해지지만 성능면에서 안좋다.
document.querySelectorAll을 사용하면 대상이 여러 개이므로 배열 형태로 나온다.
- 반복문 사용 가능- input 창에 글씨를 쓰고 싶을 때
- value를 사용 - div 또는 span에 글씨를 쓰고 싶을 때
- .textContent 를 사용
Backend Developer