Javascript 이벤트(1)

📘 이벤트

웹페이지에서 어떠한 상호작용이 발생했을 때, 정해진 사건을 발생시키는 것을 이벤트라고 한다.

📖 Event 구성 요소

1. 이벤트 소스
   • 상호작용이 발생한 위치
   • DOM요소(HTML)과 관련이 있고, 주로 input이 있다.
2. 이벤트 클래스
   • 이벤트의 종류를 의미한다.
   • click, focus, load, mouseover 등의 종류가 있다.
3. 이벤트 핸들러
   • 사용자가 실제 이벤트를 발생시켰을 때, 그 이벤트를 처리하는 것
   • 인라인 방식
   • 프로퍼티 방식
   • 이벤트 객체 방식
   • addEventListener

📖 Event Class

1) 마우스 이벤트

이벤트	설명
click	요소에 마우스 클릭
dbclick	요소에 마우스 더블 클릭
mouseover	요소 위에 마우스 올림
mouseout	요소에서 마우스가 벗어났을 때
mousedown	요소에 마우스를 눌렀을 때
mouseup	요소에서 마우스를 떼었을 때
mousemove	요소에서 마우스를 움직였을 때
contextmenu	마우스 오른쪽 버튼 눌렀을 때 나오는 메뉴가 나오기 전 이벤트 발생

2) 키보드 이벤트

이벤트	설명
keydown	키를 눌렀을 때
keyup	키를 떼었을 때
keypress	키를 누른 상태에서 이벤트 발생

3) 폼 이벤트

이벤트	설명
focus	요소에 포커스가 이동되었을 때
blur	요소에서 포커스가 벗어났을 때
change	요소의 값이 변경되었을 때
submit	submit 버튼을 눌렀을 때
reset	reset 버튼을 눌렀을 때
select	input이나 textarea 요소 안의 텍스트를 드래그하여 선택했을 때 이벤트 발생

4) 로드 및 기타 이벤트

이벤트	설명
load	페이지의 로딩이 완료되었을 때
abort	이미지의 로딩이 중단되었을 때
unload	페이지가 다른 곳으로 이동될 때
resize	요소에 사이즈가 변경되었을 때
scroll	스크롤바를 움직였을 이벤트 발생

📖 이벤트 핸들러 등록 방법

1) 인라인(inline) 방식

<input type="button" onclick="alert('Hello world');" value="button" />

인라인 방식은 태그의 속성으로 이벤트 객체를 등록한다.

2) 프로퍼티(property) 방식

<button id='btn'>button</button>
<script>
    var targetBtn = document.getElementById('btn');
    targetBtn.onclick = function(){
        alert('Hello world');
        // 실행 >> Hello world
    }
</script>

프로퍼티 방식은 해당하는 요소의 객체의 프로퍼티로 이벤트를 등록하는 방법이다.

3) 이벤트 객체 방식

<button id='btn'>button</button>
<script>
    var targetBtn = document.getElementById('btn');
    targetBtn.onclick = function(ev){
        alert('Hello world' + ev.target.value);
        // 실행 >> Hello world button
    }
</script>

이벤트 객체를 이벤트 핸들러의 인자로 넘기는 방식인데, 여기서 ev.target과 targetBtn은 같은 표현이라는 것도 알아두자. targetBtn.value를 넣어도 똑같이 출력된다.

4) addEventListener(’event class’, handler function(), capture)

<button id='btn'>button</button>
<script>
    var targetBtn = document.getElementById('btn');
	  targetBtn.addEventListener('click', ev=>{
				alert('Hello world' + ev.target.value);
				// 실행 >> Hello world button
		}, false);
</script>

• 첫 번째 인자 : 이벤트 종류
• 두 번째 인자 : 이벤트 발생 시에 호출될 함수
• 세 번째 인자 : 캡처링 사용 여부 (default : false)

addEventListener 메서드를 통해 이벤트를 지정하게 되면, 하나의 이벤트에 대해 여러 개의 이벤트 핸들러를 지정해줄 수 있고, HTML뿐만 아니라 모든 DOM요소에 사용가능하여 가장 권장되는 방식이라고 한다. 또한 캡처링과 버블링을 지원해주는데, 다음 포스팅에서 다룰 예정이다.

참고

---

https://jenny-daru.tistory.com/17

https://jhyonhyon.tistory.com/23