[Javascript] 이벤트와 이벤트 핸들러

DOM에서 발생되는 이벤트에 대한 핸들러를 등록하여 특정 이벤트에 대응하는 작업을 할 수 있다.

 

버튼을 클릭하거나 항목을 선택하는 것을 이벤트라고 한다. 이벤트는 일반적으로 함수와 연결이 되고, 이 함수는 이벤트가 발생되기 전에는 실행되지 않다가 이벤트가 발생할 경우 실행한다. 이벤트 핸들러 또는 이벤트 리스너라 한다.

 

이벤트의 종류

✅ 마우스 이벤트

click	클릭
dbclick	double click
mousedown	요소 위에서 마우스 버튼을 눌렀을 때
mousemove	요소 위에서 마우스 포인터를 움직일 때
mouseover	마우스 포인터가 요소 위로 옮겨질 때
mouseout	마우스 포인터가 요소를 벗어날 때
mouseup	사용자가 요소 위에 놓인 마우스 버튼에서 손을 뗄 때

 

✅ 키보드 이벤트

keydown	키를 누르는 동안 발생
keypress	키를 눌렀을 때
keyup	키에서 손을 뗄 때

 

✅ Frame(UI) 이벤트

abort	문서가 로딩되기 전 불러오기를 멈췄을 때
error	문서가 정확히 로딩되지 않았을 때
load	문서 로딩이 끝나면 발생
resize	문서 화면 크기가 바뀌었을 때
scroll	문서 화면이 스크롤 되었을 때
unload	문서에서 벗어날 때

 

✅ form 이벤트

blur	폼 요소에 포커스를 잃었을 때
change	목록이나 체크상태에가 변경되면 발생  <input> <select> <textarea> 태그에서 주로 사용
focus	폼 요소에 포커스가 놓였을 때  <label> <select> <textarea> <button> 태그에서 주로 사용
reset	폼이 리셋되었을 때
submit	submit 버튼을 클릭했을 때

---

이벤트 핸들러

이벤트가 발생하려면 이벤트가 발생된 태그인 이벤트 소스와 이벤트가 발생했을 때 처리하는 함수를 연결해주는 이벤트 핸들러가 필요하다.

• on + 이벤트 타입
• <태그 on+eventType = "함수명">

💡 이벤트 타입과 이벤트 핸들러는 잘 구분하자
예를 들어 마우스로 클릭했을 때의 이벤트 타입은 click 이다. 이벤트 소스 안에 onclick 이벤트 핸들러를 이용해 실행할 함수를 연결한다.

 

💡 이벤트 핸들러와 주로 사용하는 태그나 타입

• onclick : button, checkbox
• onsubmit : form 태그의 submit
• onkeyup : input 태그
• onchange : select 태그
• onmouseover onmouseout : img 태그
• onload : body 태그 👉 DOM 트리가 완성될 때 발생, 주로 head태그에서 DOM객체에 접근하기 위해 사용

인라인 이벤트 핸들러

HTML 요소의 내부에서 직접 이벤트 핸들러를 등록한다. 여러 개의 함수를 한 번에 호출이 가능하다.

<div id="clickBtn" onclick="click();">클릭해보세요</div>

최근 관심 받고 있는 CBD(Component Based Development) 방식의 Angular / React / Vue.js와 같은 프레임워크에서는 인라인 방식으로 이벤트를 처리한다. ( CBD에서는 html, css, js를 view의 구성 요소로만 보기 때문) 

 

이벤트 핸들러 프로퍼티 방식

JavaScript에서 이벤트 핸들러를 등록함으로써 HTML과 JavaScript 코드를 분리할 수 있다. 그러나 프로퍼티에 하나의 이벤트 핸들러만을 바인딩할 수 있다는 단점이 있다. 

<div id="clickBtn">클릭해보세요</div>

<script>
	document.getElementById("clickBtn").onclick = function() {
    		alert("안녕하세요"):
    	};
</script>

[Javascript] DOM level 0 고전 이벤트 모델 & 인라인 이벤트 모델

addEventListener 메소드 방식

addEventListener 메소드를 이용하여 대상 DOM 요소의 이벤트를 바인딩하고 해당 이벤트가 발생했을 때 실행될 콜백함수를 지정한다. 첫 번째 전달인자의 이벤트 이름에는 on 을 제거한 이벤트 이름을 사용한다. 

 

하나 이상의 이벤트 핸들러를 추가할 수 있다.

<script>
	const btn = document.querySelector('#btn');
    
    	btn.addEventListener('click', function() {
    		alert('안녕하세요');
    	});
</script>

---

이벤트 객체

event 객체의 property, method

• event.target : 이벤트 소스 참조
• event.preventDefault(); : 자동 submit 방지
• event.stopPropgation(); : 이벤트 전파 방지