Event
Interaction
요즘에는 화려하고 다양한 기능이 들어있는 웹사이트가 늘어나서 프론트엔드 개발자가 처리해야할 인터렉션이 많아짐
예를 들어 옷 쇼핑몰에서 사진 위에 마우스를 올렸을때(mouse over) 다른 각도의 제품 사진으로 바꿔서 보여주는 것
interaction은 HTML이나 CSS만으로 구현할 수 없고 자바스크립트 코딩이 필요하다.
특정요소에 interactive한 반응을 할 수 있게 하는 것을 이벤트라고 한다.
- 클릭 이벤트
- 마우스 이벤트
- 스크롤 이벤트
- 터치 이벤트
- resize(화면 크기 변화) 이벤트
등등 다양함
addEventListener
이벤트를 달 때 사용하는 함수.
addEventListener는 특정 이벤트가 언제 발생하는지 가만히 듣고 있다가, 발생하면 인자로 받은 함수를 실행시켜준다.
요소.addEventListener(이벤트종류, function() {
//이벤트가 일어났을 때 실행할 내용
});특정 요소에 addEventListener함수를 호출하고 인자로 이벤트 종류와 이벤트가 발생했을 때 실행할 함수를 전달한다.
위와 같이 함수도 인자로 전달할 수 있는데 이렇게 인자로 전달된 함수를 콜백함수라고 부른다.
클릭이벤트
버튼, 사진, 글 등 웹사이트에서 이루어지는 이벤트 중 가장 많은 것이 클릭 이벤트 아래 예제를 보면 event함수를 추가하고 싶으면,DOM을 사용한다.
const thisIsButton = document.getElementsByClassName('login-btn')[0];//login-btn라는 클래스 이름이 있는 요소를 찾는다. 뒤에 0이 붙은 이유는 class이름은 여러 요소에 중복해서 이름을 줄 수 있는데 이는 여러 요소가 담긴 배열이 반환되게 한다. 해당 클래스 이름을 가진 요소가 하나 밖에 없으면 요소가 하나인(배열 길이가 1개) 배열이 반환된다.
thisIsButton.addEventListener('click', function() {
//click했을 때 실행되어야할 기능
const password = document.getElementById('password').value;
const rePassword = document.getElementById('re-password').value;//함수 안에 선언. 함수 전에 선언하면 빈스트링이 담긴다.
키이벤트
사람이 키보드를 누르면 발생하는 이벤트
- 키보드를 눌렀을 때 발생하는 keydown
- 키보드를 누르고 떼는 순간 발생하는 keyup
- 키보드를 눌러 어떤 텍스트가 작성되는 순간 발생하는 keypress
keydown 이벤트로 addEventListener 추가
const thisIsPw = document.getElementById('password');
// getElementsByClassName으로 요소를 찾으면 배열이 return이 되어서 [0]으로 접근해야 했는데 id는 중복될 수 없으니 전체 페이지에서 요소가 1개밖에 없어서 배열로 리턴되지 않고 요소가 리턴된다.
const thisIsCode = document.getElementById('code');
thisIsPw.addEventListener('keydown', function(e) {
thisIsCode.innerHTML = e.keyCode;
});//key code란 각 키보드가 갖고 있는 고유한 code.여기서e는 이벤트
Front-end Developer 👩🏻💻