이벤트(event)란 여러분이 프로그래밍하고 있는 시스템에서 일어나는 사건(action) 혹은 발생(occurrence)인데, 이는 여러분이 원한다면 그것들에 어떠한 방식으로 응답할 수 있도록 시스템이 말해주는 것입니다.
존대해도 간지나는 척 말하는건 좀 재수없다. 쉽개 말해서 브라우저에서 일어나는 브라우저에서의 사건을 말하는 것이다. 여기서 사건이란 사용자가 특정 행동을 했을 때 상호작용으로 인해 발생하는 것을 말한다. 예를 들어 당신이 브라우저 버튼을 클릭하면 클릭 이벤트가 발생하는 것이다.
전적으로 많이 사용하는 이벤트를 정리해봤다. (사실 다른 글에서 퍼옴 ㅎㅎ) 정리 잘해놓으셨네 ㅋㅋ..
JavaScript - 이벤트(Event), 이벤트의 종류, 이벤트 연결 < 깔쌈하게 정리해놓으심
이벤트 | 설명 |
---|---|
click | 요소 클릭시 이벤트 발생 |
dbclick | 요소 더블클릭시 이벤트 발생 |
mouseover | 요소에 마우스 오버시 이벤트 발생 |
mouseout | 요소에 마우스 아웃시 이벤트 발생 |
mousedown | 요소에 마우스를 눌렀을 때 이벤트 발생 |
mouseup | 요소에 마우스를 떼었을 때 이벤트 발생 |
mousemove | 요소에 마우스를 움직였을 때 이벤트 발생 |
contextmenu | contextmenu가 나오기 전에 이벤트 발생 |
이벤트 | 설명 |
---|---|
keydown | 키 다운시 이벤트 발생 |
keyup | 키 업시 이벤트 발생 |
keypress | 키 입력시 이벤트 발생 |
이벤트 | 설명 |
---|---|
focus | 요소에 포커스 인시 이벤트 발생 |
blur | 요소에 포커스 아웃시 이벤트 발생 |
change | 요소에 값이 변경 되었을 때 이벤트 발생 |
submit | submit 버튼을 눌렀을 때 이벤트 발생 |
reset | reset 버튼을 눌렀을 때 이벤트 발생 |
select | input이나 textarea 요소 안의 텍스트를 드래그하여 선택했을 때 이벤트 발생 |
이벤트 | 설명 |
---|---|
load | 페이지의 로딩이 완료되었을 때 이벤트 발생 |
abort | 이미지의 로딩이 중단되었을 때 이벤트 발생 |
unload | 페이지가 다른 곳으로 이동될 때 이벤트 발생 |
resize | 요소에 사이즈가 변경되었을 때 이벤트 발생 |
scroll | 스크롤바를 움직였을 때 이벤트 발생 |
종류는 머 대충 이 정도만 정리하면 될 것같다. 이제 실제 이벤트를 사용하기 위해 바인딩하는 2가지 방법에 대해 알아보자.
이벤트 리스너는 DOM 객체에서 이벤트가 발생할 경우 해당 이벤트 처리 핸들러를 추가할 수 있는 오브젝트이다. 지정된 타입의 이벤트가 발생하면, 이벤트 리스너가 듣고 있다가 이벤트 핸들러를 실행시킨다. addEventListener, removeEventListener 함수로 이벤트 리스너를 추가해주면 된다.
const obj = document.getElementById('target');
obj.addEventListener(이벤트종류, 콜백함수, {옵션});
obj.removeEventListener(이벤트종류, 콜백함수, {옵션});
💥 event 객체
발생한 이벤트 정보가 담긴 객체다. 이벤트 종류별로 객체 내부에 담겨있는 속성은 각기 다르다. 공통 사항은 다음과 같다.
속성 | 설명 |
---|---|
bubbles | 이벤트가 버블링되는지 true/false로 처리함 |
cancleable | 이벤트의 기본 동작 취소가능 여부를 true/false로 처리함 |
currentTarget | 현재 이벤트를 처리 중인 요소를 반환 |
defaultPrevented | true면 preventDefault()메서드가 호출상태 |
eventPhase | 현재 평가 중인 이벤트 흐름단계를 반환(1: 캡쳐링, 2: 타깃, 3: 버블링) |
stopImmediatePropagation | 이벤트 캡처링, 이벤트 버블링 모두 취소하며 다른 이벤트 핸들러 호출을 막음 |
stopPropagation | 이벤트 캡처링, 이벤트 버블링 모두 취소하며 bubbles가 true일때 기능함 |
target | 이벤트를 trigger한 요소를 반환 |
type | 발생된 이벤트 타입을 반환 |
view | 이벤트가 발생한 window개체에 대한 참조를 반환 |
const obj = document.getElementById('target');
const fn1 = (event) => {
alert('carrots day');
};
obj.attachEvent('onclick', fn1);
obj.detachEvent('onclick', fn1);
이벤트 핸들러는 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로 개발함에 있어 필수적으로 알아야한다.
오늘 저녁은 진라면 순한맛이다. 🥕
참조 : https://jhyonhyon.tistory.com/23
https://abc1211.tistory.com/201
https://jenny-daru.tistory.com/17
https://ossam5.tistory.com/236