문제
아주대학교 공지사항 및 이벤트 알림 웹앱 ajouevent.com
프론트엔드 개발 중 문제가 발생했다!!!
이벤트 카드 내에 하트 아이콘을 클릭 시, 찜만 되어야하는데 상세페이지로 리다이렉션 되는 예상치 못한 문제가 발생했다.
최상단 게시물 하트아이콘(찜) 클릭!
-> 찜 + 상세페이지리다이렉션까지 되어버린 모습
해결과정
이벤트와 이벤트 핸들러, 이벤트 객체 event(e)
📌 이벤트란?
이벤트(event)란 웹페이지에서 발생하는 사용자 상호 작용을 말한다.
웹 페이지에서 무언가가 일어났다! 라는 신호이다.
즉, 사용자가 어떤 행동을 취하거나 브라우저에서 자체적으로 발생하는 상황을 말한다.
📌 이벤트의 종류
마우스이벤트
종류 설명
click 마우스 클릭 시 발생
dblclick 마우스 더블클릭 시 발생
mousedown 마우스를 누를 때 발생
mouseup 마우스를 뗐을 때 발생
mousemove 마우스를 움직일 때 발생
mouseover 마우스가 요소 위로 올라갈 때 발생
mouseout 마우스가 요소 바깥으로 나갈 때 발생💡 모달창 닫기 기능 구현 시 mousedown 이벤트 사용
모달창과 같이 바깥 영역을 클릭했을 때 닫히게 하고싶다면, mousedown 이벤트를 사용하면 된다.
click 이벤트를 사용할 경우 input 요소의 영역을 지정하다 마우스 드래그 상태에서 모달창 영역을 벗어나게 된다면, 모달창을 닫으려는 의도가 없어도 닫히게 되기 때문이다.
키보드 이벤트
종류 설명
keydown 키보드를 누를 때 발생
keyup 키보드를 뗐을 때 발생
keypress 키를 누르고 떼는 동작이 모두 일어날 때 발생폼 이벤트
종류 설명
submit 폼을 제출할 때 발생
change 입력 요소의 값이 변경될 때 발생
input 입력 요소에 사용자가 입력할 때 발생포커스 이벤트
종류 설명
focus 요소에 포커스가 설정될 때 발생
blur 요소에서 포커스가 해제될 때 발생윈도우 이벤트
종류 설명
load 문서나 자원들이 로드될 때 발생
resize 브라우저 창의 크기가 변경될 때 발생
scroll 스크롤바가 움직일 때 발생📌 이벤트 핸들러란?
Javascript 에서 이벤트를 다룰 때 이벤트 핸들러를 사용한다.
이벤트 핸들러는 "이벤트가 발생했을 때 실행되는 함수"를 말한다.
사용자의 동작으로 인해 어떤 이벤트가 발생했을 때 그로 인해 어떤 일이 발생될 것인지 정의해주는 것이다.
인라인 방식
인라인 방식은 HTML 요소의 속성으로 직접 이벤트 핸들러를 할당하는 방식이다.
<button onclick="myEvent()">클릭</button>💡 인라인 방식, 이벤트 핸들러의 단점
MDN 에서는 인라인 방식을 사용하지 말라고 명시해놨다.
HTML 과 Javascript 를 뒤죽박죽 섞어서 쓰면 분석하기 어려워지기 때문이다.
하나의 이벤트 핸들러만 등록시킨다.
📌 이벤트 리스너란?
JavaScript 코드에서 이벤트를 동적으로 처리하는 방식을 말한다.
addEventListener 메서드를 이용해 이벤트를 대상 요소에 연결하고, 이에 따라 실행될 함수(이벤트 핸들러)를 전달한다.
비 인라인 방식
비 인라인 방식은 HTML 이 아닌 Javscript 코드를 이용해 이벤트 핸들러를 동적으로 할당하는 방식이다.
<button id="button">클릭</button>
var Button = document.getElementById('button');
Button.addEventListener('click', myEvent());
const myEvent = () => {
alert('클릭!');
}주로 이벤트 리스너가 Javascript 에서 동적으로 이벤트를 다룰 때 일반적으로 사용한다.
💡 비 인라인 방식, 이벤트 리스너의 장점
이벤트 리스너를 여러개 등록 가능
모든 DOM 노드에 이벤트 리스너 등록 가능
이벤트 전파 제어 가능
📌 이벤트 리스너 추가 및 제거
이벤트 리스너 추가
addEventListener 메서드에는 두 가지 매개변수가 존재한다.
첫번째 매개변수에 핸들러에 등록하고자 하는 이벤트의 이름과,
두번째 매개변수에 우리가 이벤트 후에 실행되기를 원하는 핸들러 함수를 넣어주면 된다.
button.addEventListener("click",
() => {
let RGB_COLOR =
"rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";
document.body.style.backgroundColor = RGB_COLOR;
}
);이벤트 리스너 제거
button.removeEventListener("click", changeFontSize);📌 이벤트 객체
이벤트 핸들러 함수 내부에서 event, evt, e 와 같은 이름의 매개변수를 본 적 있을 것이다.
이것을 이벤트 객체라고 한다.
e.target.value
e.currentTarget
e.preventDefault()
e.stopPropagation()자주 사용되는 이벤트 객체를 사용한 기능이다.
e : 이벤트 객체 설명
e.target.value 주로 입력 요소에서 발생하는 이벤트.
이벤트가 발생한 요소 자체를 가리키며, 요소의 현재 값을 반환한다.
ex. input, textarea, ...
e.currentTarget 이벤트 핸들러가 현재 실행 중인 요소를 가리키는 속성.
이벤트 버블링(Bubbling)이나 캡처링(Capturing) 단계에서 어떤 요소에서 이벤트가 발생했는지에 대한 정보를 제공한다.
e.preventDefault() 이벤트의 기본 동작을 취소하는 메서드.
버튼의 새로고침하는 기본 동작을 막을 수 있다.
e.stopPropagation() 이벤트의 전파(버블링 or 캡처링)를 중지시키는 메서드.
현재 이벤트가 상위 요소로 전파되지 않도록 막는다.
결국 하트 아이콘을 누를때 클릭 이벤트 버블링이 발생하여 카드에 있던 이벤트핸들러까지 반응한거였음
-> 하트 아이콘 이벤트 핸들러에 e.stopPropagation() 추가로 문제 해결
