interaction은html이나css만으로 구현할 수 없고 자바스크립트 코딩이 필요하다. 이렇게 특정 요소에interactive한 반응을 할 수 있게 하는 것을이벤트라고 하는데 알아보자!
event
요즘 웹사이트를 보면 웹에 많은 이벤트들이 있다. 마우스를 올리면 이미지가 확대된다거나 스크롤를 내리면 이미지가 변하는 것 등이 많은 이벤트들로 이루어져 있다. 좋은 웹사이트들은 이러한 이벤트들을 빠르게 반응하고 자연스러워야 된다. 사람들은 좀 더 화려한 웹사이트를 원하는 경우가 많은데 이런 부분에서 프론트엔드 개발자가 처리해야 할 일들이 많아졌다.
addEventListener
요소.addEventListener(이벤트종류, function() {
//이벤트가 일어났을 때 실행할 내용
});이벤트를 사용할때 addEventListener을 사용한다. addEventListener는 특정 이벤트가 언제 발생하는지 가만히 듣고 있다가, 발생하면 인자로 받은 함수를 실행시켜준다.
특정 요소에 addEventListener 함수를 붙이고, 이벤트가 발생했을 때 실행할 함수를 전달한다. 이렇게 인자로 전달된 함수를 콜백 함수라고 부른다.
💡 callback 이란 ?
event 활용
click Event
- 로그인 버튼
클릭-> 로그인 api 호출 - 상품 사진
클릭-> 상세화면 이동
💡이벤트를 활용한 비밀번호 일치 & 불일치 코드
const thisIsButton = document.getElementsByClassName('login-btn')[0];
thisIsButton.addEventListener('click', function() {
const password = document.getElementById('password').value;
const rePassword = document.getElementById('re-password').value;
if (!password) {
alert('비밀번호를 입력해주세요!');
return;
}
if (!rePassword) {
alert('비밀번호 확인을 입력해주세요!');
return;
}
if (password !== rePassword) {
alert('비밀번호가 맞지 않습니다!');
return;
}
alert('로그인 성공!!');
});-
위 코드에서
[0]은class 이름은 여러 요소에 중복해서 이름을 줄 수 있다.getElementsByClassName으로 요소를 찾으면 여러 요소가 담긴 배열이 반환된다. 클래스 이름이 하나일지라도 인덱스를 붙여주어야 한다. -
button이라는 변수에 .login-btn 요소를 찾아서 저장하고, 그 요소에 addEventListener를 달아주었다. 첫 번째 인자에
'click'을 설정하였다. -
button.login-btn을 클릭(
click 이벤트가 발생) 하면, 두 번째 인자로 넘긴 함수가 실행되는 것이다.
