사이트로 로고

이벤트

이벤트란?

  • 사용자가 html문서 내에서 특정 행동들을 취한 순간 이벤트가 발생한다.
  • 예를 들어, 사용자가 버튼을 클릭하면 클릭이벤트가 발생하고 스크롤을 하면 스크롤 이벤트가 발생한다.
  • 이렇게 이벤트가 발생할 때 실행시킬 함수를 추가할 수 있는데 이 함수를 이벤트 리스너 또는 이벤트 핸들러라고 부른다.

이벤트 리스너(핸들러) 추가하기

  • 이벤트 리스너를 이벤트에 추가(등록 또는 연결이라고도 한다)하는 방법을 이벤트 모델 이라고 부른다.
  • 이벤트 모델은 표준 이벤트모델, 고전 이벤트 모델, 인라인 이벤트 모델로 총 3가지가 있다.
표준 이벤트 모델(ES6 이후)
  • addEventListener() 메서드를 사용해 이벤트 리스너를 추가한다.
  • 대상객체.addEventListener(이벤트명, 콜백함수, 이벤트전파방식)의 형태로 사용한다.
  • 이벤트 전파방식은 생략해도 되며, true의 경우 캡쳐링(capturing), false의 경우 버블링(bubbling)방식으로 전파한다. 이벤트 전파방식 알아보기
1
2
3
4
5
6
7
8
const h1 = document.querySelector('h1');
h1.addEventListener('click', () => {
    alert("클릭"); //결과 : h1을 클릭하면 "클릭" 이라는 alert 창이 뜬다.
});
 
h1.addEventListener('mouseover', () => {
    alert("마우스오버"); //결과 : h1을 클릭하면 "마우스오버" 이라는 alert 창이 뜬다.
});
고전 이벤트 모델
  • ES6 이전에는 onclick = function(){...} 이런식으로 on 으로 시작하는 이벤트에 함수를 연결했었다.
  • 이벤트 리스너를 하나만 등록할 수 있다는 단점이 있다.
1
2
3
4
const h1 = document.querySelector('h1');
h1.onclick = function(){
    alert(); //결과 : h1을 클릭하면 alert 창이 뜬다.
};
인라인 이벤트 모델
  • 고전 이벤트 모델처럼 on 으로 시작하는 이벤트를 html 요소에 직접 넣어서 이벤트리스너를 추가한다.
  • 최근 프레임워크들이 인라인 이벤트 모델을 활용하는 형태로 코드를 작성하고 있어 현재 많이 사용되고 있다.
1
2
<h1 onclick="alert();">로고</h1> 
<!-- 결과 : h1 클릭시 alert 창이 뜬다. -->

이벤트 리스너 삭제하기

  • removeEventListener() 메서드를 사용하여 등록된 이벤트 리스너를 삭제한다.
1
2
3
4
5
6
7
8
9
10
11
12
const h1 = document.querySelector('h1'),
      btn = document.querySelector('button');
 
function eventBox(){
    alert("이벤트등록");
}
 
h1.addEventListener('click', eventBox); //h1 태그에 클릭 이벤트 등록
 
btn.addEventListener('click', () => {
    h1.removeEventListener('click', eventBox); //버튼 클릭하면 h1 태그에 있던 클릭 이벤트가 삭제된다.
});

이벤트 종류

  • 표준 이벤트 등록방식에서는 아래 이벤트 명을 그대로 사용해도 되지만, 고전 이벤트 등록방식에서는 on을 앞에 붙여 사용할 것
마우스이벤트
  • mouseover - 마우스오버했을때 발생
  • mouseout - 마우스가 벗어났을때 발생
  • mousemove - 해당영역안에서 마우스가 이동할때 발생
  • click - 클릭했을 때 발생
  • dblclick - 더블클릭했을때 발생
키보드이벤트
  • keypress - 키보드가 눌렸을때 발생 (누르고있는동안) 영문/숫자만 반응 (공백이 들어가기전까지는 글자수를 세지 않음)
  • keydown - 키보드를 눌렀을때 발생 (누를 당시에 발생) 모든 키에서 반응
  • keyup - 키보드를 눌렀다가 땠을때 발생 (키보드를 누르는 동안 늘어나는 글자수는 세지 않음)
  • 영어와는 다르게 중국어나 일본어, 한국어등은 한글자를 입력하기 위해 여러 키를 조합 해야하는 ('난'을 누를 경우 'ㄴ'.'ㅏ','ㄴ'을 눌러야 한다) 경우가 있어서 주로 keyup을 자주 사용한다.
기타
  • focus - 해당요소에 초점이 갔을때 발생
  • blur - 초점이 다른곳으로 이동했을 때 발생
  • change - value값이 바뀌고 초점이 이동했을 때 발생
  • load - 모두 로딩이 됐을때 발생
  • unload - 문서를 닫거나 다른 문서로 이동했을때 발생
  • submit - 전송버튼을 눌렀을때 발생(폼)
  • reset - 취소버튼을 눌렀을때 발생(폼)
  • resize - 요소의 크기가 변경되었을때 발생
  • error - 로드되는 과정에서 문제가 생겼을때 발생

키보드 접근성

  • 마우스가 없는경우에는 mouseover등의 이벤트를 사용할 수 없다.
  • 키보드만을 사용하여 웹페이지를 방문하는 방문자들을 고려하여 마우스 없이도 이벤트를 사용할 수 있도록 해주어야 한다.
  • mouseover(mouseenter)는 focus 와 함께, mouseout(mouseleave)은 blur 와 함께 써준다.
1
2
3
4
5
6
7
8
9
10
11
12
<button type="button">버튼</button> 에 mouseover 이벤트리스너를 추가해보자.
<!-- 인라인 이벤트 등록방식 -->
<button type="button" onmouseover="abc();" onfocus="abc();">버튼</button>
<script>
    const button = document.querySelector('button');
    /* 표준 이벤트 등록방식 */
    button.addEventListener("mouseover",abc);
    button.addEventListener("focus",abc);
    /* 고전 이벤트 등록방식 */
    button.onmouseover = abc;
    button.onfocus = abc;
</script>

this 키워드

  • 어떠한 요소를 눌러서 이벤트가 작동이 됐다면 그 요소를 this라는 키워드가 가리킨다.

이벤트 객체

  • 이벤트가 발생될때 이벤트 객체라는 것을 생성할 수 있는데, 이 객체의 속성을 이용하면 다양한 이벤트 정보를 가져올 수 있다.
  • 사용자가 이벤트를 발생할때 어떤 버튼을 눌렀는지, 어느 지점에서 마우스를 눌렀는지 등등 정보를 가져올 수 있다.
1
2
3
4
5
6
7
8
function(이벤트객체){
    실행문
}
 
/* 예시 */
document.getElementById("hello").addEventListener('click', function(e){
    let a = e.pageX; //결과 : 변수 a에 내가 클릭한 지점의 x 좌표값이 담긴다.
});
  • 위처럼 코드의 매개변수자리에 객체가 생성이 된다. 이때 객체 속성을 이용하여 해당 이벤트의 정보를 불러오는데 속성은 아래와 같다.
마우스 이벤트 속성
  • clientX/Y - 마우스 이벤트가 발생한 X/Y좌표값(스크롤바 이동너비 무시)
  • pageX/Y - 마우스 이벤트가 발생한 X/Y좌표값(스크롤바 이동너비 포함)
  • screenX/Y - 화면 모니터를 기준으로 이벤트가 발생한 X/Y좌표값
  • layerX/Y - position을 적용한 요소를 기준으로 이벤트가 발생한 X/Y좌표값
  • button - 마우스에 눌린 버튼값
키보드 이벤트 속성
  • code - 입력한 키를 나타내는 문자열 바로가기
  • keyCode - 키보드에 눌린 유니코드값 바로가기
  • altKey - alt키가 눌려있으면 true, 아니면 false
  • ctrlKey - ctrl키가 눌려있으면 true, 아니면 false
  • shiftKey - shift키가 눌려있으면 true, 아니면 false
전체 이벤트 속성
  • target - 이벤트를 발생시킨 요소를 가리킨다. this와 비슷하지만 버블링으로 인해 간혹 다른 타겟이 인식될 수 있다.
  • currentTarget - this와 같이 이벤트가 발생한 요소정보 알려준다. 따라서 화살표 함수를 사용할때 this 접근이 필요할 경우 this 대신 이 속성을 자주 사용한다.
익스 8 이하에서 이벤트 객체
  • 인위적으로 이벤트객체를 만들때에는 window.event를 실행문 내의 매개변수자리에 적어주면 된다.
  • function(e) {alert(window.event);} 따라서, 익스8 이하와 그 이외의 브라우저에서 모두 나오게 하려면 삼항조건연산자를 이용하여 let 변수=매개변수?이벤트객체:window.event 형식으로 만들어주면된다.
  • let test = e ? e : window.event 와 같은 형식으로 만들어주면 된다. (그러므로 이벤트 객체의 정보를 받아올때는 test를 써주면된다)
기본 이벤트 막기
  • 어떤 이벤트가 발생했을 때 웹 브라우저가 기본적으로 처리해주는 것을 기본이벤트 라고 부른다.
  • 예를 들어, 링크를 입력하면 링크값으로 url 이 변경되거나 마우스 오른쪽을 클릭할 경우 옵션 박스가 나오는 것등을 말한다.
  • preventDefault()라는 메서드를 사용하여 기본이벤트를 제거한다.
1
2
3
4
5
6
7
8
<a href="https://www.naver.com/" id="link">네이버</a>
 
<script>
    const link = document.getElementById("link");
    link.addEventListener("click", function(event){
        event.preventDefault();
    });
</script>