[ Javascript.08.Event ]

이벤트 (Event)

이벤트(event)란 여러분이 프로그래밍하고 있는 시스템에서 일어나는 사건(action) 혹은 발생(occurrence)인데, 이는 여러분이 원한다면 그것들에 어떠한 방식으로 응답할 수 있도록 시스템이 말해주는 것입니다.

 

존대해도 간지나는 척 말하는건 좀 재수없다. 쉽개 말해서 브라우저에서 일어나는 브라우저에서의 사건을 말하는 것이다. 여기서 사건이란 사용자가 특정 행동을 했을 때 상호작용으로 인해 발생하는 것을 말한다. 예를 들어 당신이 브라우저 버튼을 클릭하면 클릭 이벤트가 발생하는 것이다.

이벤트 종류

전적으로 많이 사용하는 이벤트를 정리해봤다. (사실 다른 글에서 퍼옴 ㅎㅎ) 정리 잘해놓으셨네 ㅋㅋ..
JavaScript - 이벤트(Event), 이벤트의 종류, 이벤트 연결 < 깔쌈하게 정리해놓으심

1. 마우스 이벤트

이벤트	설명
click	요소 클릭시 이벤트 발생
dbclick	요소 더블클릭시 이벤트 발생
mouseover	요소에 마우스 오버시 이벤트 발생
mouseout	요소에 마우스 아웃시 이벤트 발생
mousedown	요소에 마우스를 눌렀을 때 이벤트 발생
mouseup	요소에 마우스를 떼었을 때 이벤트 발생
mousemove	요소에 마우스를 움직였을 때 이벤트 발생
contextmenu	contextmenu가 나오기 전에 이벤트 발생

2. 키보드 이벤트

이벤트	설명
keydown	키 다운시 이벤트 발생
keyup	키 업시 이벤트 발생
keypress	키 입력시 이벤트 발생

3. 입력 폼 이벤트

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

4. 로드 및 기타 이벤트

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

종류는 머 대충 이 정도만 정리하면 될 것같다. 이제 실제 이벤트를 사용하기 위해 바인딩하는 2가지 방법에 대해 알아보자.

이벤트 리스너 (Event listener)

이벤트 리스너는 DOM 객체에서 이벤트가 발생할 경우 해당 이벤트 처리 핸들러를 추가할 수 있는 오브젝트이다. 지정된 타입의 이벤트가 발생하면, 이벤트 리스너가 듣고 있다가 이벤트 핸들러를 실행시킨다. addEventListener, removeEventListener 함수로 이벤트 리스너를 추가해주면 된다.

const obj = document.getElementById('target');
obj.addEventListener(이벤트종류, 콜백함수, {옵션});
obj.removeEventListener(이벤트종류, 콜백함수, {옵션});

 

• 이벤트종류 : 이벤트 종류을 입력한다. (click, dbclick 등등)
• 콜백함수 : 이벤트가 발생할 때 실행할 함수를 입력한다. 콜백 함수는 event 객체를 파라미터로 받는다.
• 옵션 : 생략 가능한 옵션이며, 자식과 부모 요소에서 발생하는 버블링을 제어하기 위한 옵션이다.

😎 버블링, 캡처, 위임에 대한 내용은 다음 글에서 다룬다.

💥 event 객체
발생한 이벤트 정보가 담긴 객체다. 이벤트 종류별로 객체 내부에 담겨있는 속성은 각기 다르다. 공통 사항은 다음과 같다.

속성	설명
bubbles	이벤트가 버블링되는지 true/false로 처리함
cancleable	이벤트의 기본 동작 취소가능 여부를 true/false로 처리함
currentTarget	현재 이벤트를 처리 중인 요소를 반환
defaultPrevented	true면 preventDefault()메서드가 호출상태
eventPhase	현재 평가 중인 이벤트 흐름단계를 반환(1: 캡쳐링, 2: 타깃, 3: 버블링)
stopImmediatePropagation	이벤트 캡처링, 이벤트 버블링 모두 취소하며 다른 이벤트 핸들러 호출을 막음
stopPropagation	이벤트 캡처링, 이벤트 버블링 모두 취소하며 bubbles가 true일때 기능함
target	이벤트를 trigger한 요소를 반환
type	발생된 이벤트 타입을 반환
view	이벤트가 발생한 window개체에 대한 참조를 반환

🦴 ie8이하에서는 호환되지 않는다. ie에서는 attachEvent, detachEvent 메소드를 사용해야 한다. (버려라 좀 ==)

const obj = document.getElementById('target');
const fn1 = (event) => {
    alert('carrots day');
};

obj.attachEvent('onclick', fn1);
obj.detachEvent('onclick', fn1);

이벤트 핸들러 (Event Handler)

이벤트 핸들러는 addEventListener() 함수를 사용하지 않고 이벤트와 함수를 다이렉트로 연결하는 것이다. 이벤트 리스너를 통해 객체에 바인딩 시키는 방식과는 다르게 객체가 지닌 이벤트 객체에 함수를 할당하는 방식이다.

const obj = document.getElementById("target");

obj.onclick = (event) => {
    alert('carrots day');
};

이벤트 리스너와 핸들러의 차이

개념도 비슷하고 말도 비슷하지만 1가지 차이점이 존재한다. 이벤트 핸들러는 이벤트 유형에 대해 하나의 이벤트 핸들러만 가질 수 있는 반면, 리스너는 여러 개가 등록가능하다. 뭔 개소린가 싶다면 코드를 보자.

 

• 이벤트 핸들러

const obj = document.getElementById("target");

obj.onclick = (event) => {
    console.log('carrots day');
};

obj.onclick = (event) => {
    console.log('banana day');
};

obj.onclick = (event) => {
    console.log('durian day');
};

durian day

• 이벤트 리스너

const obj = document.getElementById("target");

obj.addEventListener("click", (event) => {
    console.log('carrots day');
});

obj.addEventListener("click", (event) => {
    console.log('banana day');
});

obj.addEventListener("click", (event) => {
    console.log('durian day');
});

carrots day
banana day
durian day

이벤트 리스너는 같은 이벤트에 여러 개의 함수를 설정할 수 있다.

정리하며

오늘은 이벤트와 그 종류, 이벤트 리스너, 핸들러 등록에 대해 알아봤다. 기초적이지만 이벤트 종류에 대해서 항상 구글링했던 기억이 난다. 개념은 알지만 뇌공간을 쓸만큼 이해가 필요한 영역이 아니라는 생각 때문인 것 같다. 하지만 javascript로 개발함에 있어 필수적으로 알아야한다.

 

오늘 저녁은 진라면 순한맛이다. 🥕

 

JavaScript - 이벤트(Event), 이벤트의 종류, 이벤트 연결