[TIL-20210602] 이벤트(event)

Pizzahand·2021년 6월 2일

TIL

목록 보기

7/28

이벤트

이벤트(event)란 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 의미합니다. 브라우저에서의 사건이란 예를 들어 사용자가 클릭을 했을 '때', 스크롤을 했을 '때', 필드의 내용을 바꾸었을 '때'와 같은 것을 의미한다. 이것은 DOM의 요소와 관련이 있다.
javascript 개발자는 어떤 일이 발생했을 때 실행 되어야 하는 코드를 등록하고, 브라우저는 그 일이 발생했을 때 등록된 코드를 실행하게 된다. 이 과정을 통해 사용자와 웹페이지는 상호작용(Interaction)이 가능하게 된다.이러한 방식을 이벤트 프로그래밍이라고 한다.
이벤트가 발생하면 그에 맞는 반응을 하여야 한다. 이를 위해 이벤트는 일반적으로 함수에 연결되며 그 함수는 이벤트가 발생하기 전에는 실행되지 않다가 이벤트가 발생되면 실행된다. 이 함수를 이벤트 핸들러라 하며 이벤트에 대응하는 처리를 기술한다.

이벤트 예시

<!DOCTYPE html>
<html>
<body>
  <button class="myButton">Click me!</button>
  <script>
    document.querySelector('.myButton').addEventListener('click', function () {
      alert('Clicked!');
    });
  </script>
</body>
</html>

이벤트 핸들러(event handler)

이벤트 핸들러란 이벤트와 우리가 작성한 프로그램을 연결해 주는 역할을 한다. 개발자는 이벤트가 발생했을 때 수행할 작업을 준비하고 이벤트 핸들러에 그 작업을 하도록 연결해주면 된다.
이벤트와 이벤트 핸들러를 연결하는 기본적인 2가지 방법으로는

1. 인라인(inline)방식

인라인 방식은 이벤트를 이벤트 대상의 태그 속성으로 지정하는 것이다.

 <button onclick="alert('hello')">hello</button>

위 코드는 hello버튼을 누르면 hello를 경고창으로 출력한다.
인라인 방식은 태그에 이벤트가 포함되기 때문에 이벤트의 소재를 파악하는 것이 편리하다. 하지만 정보인 HTML과 제어인 JavaScript가 혼재된 형태이기 때문에 가독성이 좋지않고, 유지보수도 힘들어지기 때문에 바람직한 방법이라고 할수는 없다.

2. 프로퍼티 리스너(property listener)

프로퍼티 리스너 방식은 이벤트 대상에 해당하는 객체의 프로퍼티로 이벤트를 등록하는 방식이다. 인라인 방식에 비해서 HTML과 JavaScript를 분리할 수 있다는 점에서 선호되는 방식이지만 addEventListener 방식을 추천한다.

<input type="button" id="target" value="button" />
<script>
    let t = document.querySelector('target');
    t.onclick = function(){
        alert('Hello world');
    }
</script>

3.addEventListener

addEventListener은 이벤트를 등록하는 가장 권장되는 방식이다. 이 방식을 이용하면 여러개의 이벤트 핸들러를 등록할 수 있다.
자세한 내용은 생활코딩의 addEventListener 내용을 참조하자.
생활코딩 addEventListener()

이벤트의 종류와 의미(이벤트핸들러는 이벤트 앞에 on을 붙여 준다)

-UI Event

load - 웹페이지의 로드가 완료되었을 때
unload - 웹페이지가 언로드될 때(주로 새로운 페이지를 요청한 경우)
error - 브라우저가 자바스크립트 오류를 만났거나 요청한 자원이 존재하지 않는 경우
resize - 브라우저 창의 크기를 조절했을 때
scroll - 사용자가 페이지를 위아래로 스크롤할 때
select - 텍스트를 선택했을 때

-Keyboard Event

keydown - 키를 누르고 있을 때
keyup - 누르고 있던 키를 뗄 때
keypress - 키를 누르고 뗏을 때

-Mouse Event

click - 마우스 버튼을 클릭했을 때
dbclick - 마우스 버튼을 더블 클릭했을 때
mousedown - 마우스 버튼을 누르고 있을 때
mouseup - 누르고 있던 마우스 버튼을 뗄 때
mousemove - 마우스를 움직일 때 (터치스크린에서 동작하지 않는다)
mouseover - 마우스를 요소 위로 움직였을 때 (터치스크린에서 동작하지 않는다)
mouseout - 마우스를 요소 밖으로 움직였을 때 (터치스크린에서 동작하지 않는다)

-Focus Event

focus/focusin - 요소가 포커스를 얻었을 때
blur/foucusout - 요소가 포커스를 잃었을 때

-Form Event

input - input 또는 textarea 요소의 값이 변경되었을 때
change - select box, checkbox, radio button의 상태가 변경되었을 때
submit - form을 submit할 때 (버튼 또는 키)
reset - reset 버튼을 클릭할 때 (최근에는 사용 안함)