이벤트(event) 는 무언가 일어났다는 신호이다. 모든 DOM 노드는 이런 신호를 만들어낸다.
📌 여러가지 이벤트
마우스 이벤트
click – 요소 위에서 마우스 왼쪽 버튼을 눌렀을 때
contextmenu – 요소 위에서 마우스 오른쪽 버튼을 눌렀을 때
mouseover - 마우스 커서를 요소 위로 움직였을 때
mouseout – 마우스 커서가 요소 밖으로 움직였을 때
mousemove – 마우스를 움직일 때폼 요소 이벤트
submit – 사용자가
<form>을 제출할 때
focus – 사용자가<input>과 같은 요소에 포커스 할 때키보드 이벤트
keydown과 keyup – 사용자가 키보드 버튼을 누르거나 뗄 때
문서 이벤트
DOMContentLoaded – HTML이 전부 로드 및 처리되어 DOM 생성이 완료되었을 때
CSS 이벤트
transitionend – CSS 애니메이션이 종료되었을 때
📌 이벤트 핸들러
이벤트에 반응하려면 이벤트가 발생했을 때 실행되는 함수인 핸들러(handler) 를 할당해야 한다.
핸들러는 사용자의 행동에 어떻게 반응할지를 자바스크립트 코드로 표현한 것이다.
핸들러를 할당하는 방법 3가지
1) HTML 안의 on<event> 속성에 핸들러를 할당
HTML만 사용하는 방법이다. 하나의 이벤트에 복수의 핸들러를 할당할 수 없다.
<input value="클릭해 주세요." type="button">버튼을 클릭하면 onclick 안의 코드가 실행
<script>
function countRabbits() {
for(let i=1; i<=3; i++) {
alert(`토끼 ${i}마리`);
}
}
</script>
<input type="button" onclick="countRabbits()" value="토끼를 세봅시다!">2) DOM 프로퍼티 on<event>을 사용
HTML과 자바스크립트를 함께 사용하는 방법이다. 하나의 이벤트에 복수의 핸들러를 할당할 수 없다
elem.onclick을 사용한 예시
<input id="elem" type="button" value="클릭해 주세요.">
<script>
elem.onclick = function() {
alert('감사합니다.');
};
</script>🔔 this로 요소에 접근하기
핸들러 내부에 쓰인 this의 값은 핸들러가 할당된 요소
아래 예시의this.innerHTML에서 this는 button이므로 버튼을 클릭하면 버튼 안의 콘텐츠가 얼럿창에 출력된다.
<button>클릭해 주세요.</button>
3) addEventListener
element.addEventListener(event, handler, [options]);
event : 이벤트 이름(예: "click")
handler : 핸들러 함수
options : 아래 프로퍼티를 갖는 객체
once: true이면 이벤트가 트리거 될 때 리스너가 자동으로 삭제
capture: 어느 단계에서 이벤트를 다뤄야 하는지를 알려주는 프로퍼티
passive
<input id="elem" type="button" value="클릭해 주세요."/>
<script>
function handler1() {
alert('감사합니다!');
};
function handler2() {
alert('다시 한번 감사합니다!');
}
elem.onclick = () => alert("안녕하세요.");
elem.addEventListener("click", handler1); // 감사합니다!
elem.addEventListener("click", handler2); // 다시 한번 감사합니다!
</script> 이벤트 객체
이벤트를 제대로 다루려면 어떤 일이 일어났는지 상세히 알아야 힌다.
‘click’ 이벤트가 발생했다면 마우스 포인터가 어디에 있는지, ‘keydown’ 이벤트가 발생했다면 어떤 키가 눌렸는지 등에 대한 상세한 정보가 필요하다.이벤트가 발생하면 브라우저는 이벤트 객체(event object)라는 것을 만들고 이벤트에 관한 상세한 정보를 넣은 다음, 핸들러에 인수 형태로 전달한다.
이벤트 객체로부터 포인터 좌표 정보를 얻어내는 예시
<input type="button" value="클릭해 주세요." id="elem">
<script>
elem.onclick = function(event) {
// 이벤트 타입과 요소, 클릭 이벤트가 발생한 좌표를 보여줌
alert(event.type + " 이벤트가 " + event.currentTarget + "에서 발생했습니다.");
alert("이벤트가 발생한 곳의 좌표는 " + event.clientX + ":" + event.clientY +"입니다.");
};
</script> 📌 이벤트 객체에서 지원하는 프로퍼티
event.type
이벤트 타입, 위 예시에선 "click".
event.currentTarget
이벤트를 처리하는 요소. 화살표 함수를 사용해 핸들러를 만들거나 다른 곳에 바인딩하지 않은 경우엔 this가 가리키는 값과 같음, 화살표 함수를 사용했거나 함수를 다른 곳에 바인딩한 경우엔 event.currentTarget를 사용해 이벤트가 처리되는 요소 정보를 얻을 수 있음
event.clientX / event.clientY
포인터 관련 이벤트에서, 커서의 상대 좌표
