이벤트리스너
html을 사용하다 보면 버튼 클릭에 대한 이벤트를 처리해야 할 일이 자주 발생한다.
button 태그에 onClick을 사용해도 되지만 코드 가독성 및 편리함을 추구하고자 addEventListner라는 메소드를 알아보고자 한다.
addEventListener()
메서드는 지정한 유형의 이벤트를 대상이 수신할 때마다 호출할 함수를 설정한다.
<button id='btn'>버튼</button>
document.getElementById('btn').addEventListener('click', function(){
document.getElementById('btn').innerHtml = 'button';
}) 버튼을 클릭 시 버튼의 텍스트를 button으로 바꾼다는 예시 코드이다.
마우스 이벤트
- click : 요소에 마우스를 클릭했을 때
- mouseover : 요소 위로 마우스를 움직였을 때
- mouseout : 요소 바깥으로 마우스를 움직였을 때
- mousedown : 마우스를 누르고 있을 때
- mouseup : 눌렀던 마우스 버튼을 땔 때
- mousemove : 마우스를 움직였을 때
키보드 이벤트
- keydown : 키를 처음 눌렀을 때
- keyup : 키를 떼었을 때
- keypress : 키를 누른 상태에서
폼 이벤트
- input : input, textarea 요소 값이 변경되었을 때
- change : 선택 상자, 체크박스, 라디어 버튼의 상태가 변경되었을 때
- submit : 사용자가 버튼키를 이용해 폼을 제출할 때
- select : 텍스트를 선택했을 때
