브라우저 이벤트

목차

1. 브라우저 이벤트

2. 자주 사용하는 DOM 이벤트

    2-1. 마우스 이벤트

    2-2. 폼 요소 이벤트

    2-3. 키보드 이벤트

    2-4. 문서 이벤트

    2-5. css 이벤트

3. 이벤트핸들러

    3-1. DOM 프로퍼티로 이벤트 핸들러 할당

   3-2. 메서드로 이벤트 핸들러 할당

---

1. 브라우저 이벤트

브라우저에서의 이벤트는 무언가 발생했다는 신호를 말한다.

모든 DOM 노드는 이벤트를 발생시킨다.

---

2. 자주 사용하는 DOM 이벤트

1. 마우스 이벤트

이벤트	설명
click	요소 위에서 마우스 왼쪽 버튼 클릭(tap)
contextmenu	요소 위에서 마우스 오른쪽 버튼 클릭
mouseover / mouseout	마우스 커서를 요소 위로 움직였을 때 / 커서가 요소 밖으로 움직였을 때
mousedown / mouseup	요소 위에서 마우스 왼쪽 버튼을 누르고 있을 때 / 마우스 버튼을 뗐을 때
mousemove	마우스를 움직일 때

 

2. 폼 요소 이벤트

이벤트	설명
submit	사용자가 <form>을 제출할 때
focus	사용자가 <input>과 같은 요소에 포커스 할 때

 

 

3. 키보드 이벤트

이벤트	설명
keydown / keyup	사용자가 키보드 버튼을 누를 때 / 키보드 버튼을 뗄 때

4. 문서 이벤트

이벤트	설명
DOMContentLoaded	HTML이 전부 로드 및 처리되어 DOM 생성이 완료되었을 때

5. CSS 이벤트

이벤트	설명
transitionend	CSS 애니메이션이 종료되었을 때

 

 

---

3. 이벤트 핸들러

이벤트에 반응하기 위해서는 이벤트가 발생했을 때 실행되는 함수인 핸들러(handler)를 할당해야 한다.

이벤트 핸들러는 3가지 방법으로 할당할 수 있다.

• HTML 속성 : onclick="..."
• DOM 프로퍼티 : elem.onClick = function
• 메서드 : elem.addEventListener(event, handler[, phase])로 추가, removeEventListener로 핸들러 제거

이 중 HTML 속성은 잘 사용하지 않는다.

HTML 태그 중간에 자바스크립트가 들어가면 불편하기 때문이다.

그러니까 일단 제외하고 정리하겠다.

 

1. DOM 프로퍼티로 이벤트 핸들러 할당

DOM 프로퍼티 on<event>를 사용해서 핸들러를 할당할 수 있다.

<input id="elem" type="button" value="클릭해주세요.">
<script>
  elem.onclick = function() {
    alert('감사합니다');
  };
</script>

 

이 때의 단점은 onclick 프로퍼티는 단 하나밖에 없기 때문에 복수의 이벤트 핸들러를 할당할 수 없다는 것이다.

핸들러를 제거하고 싶다면 elem.onclick = null과 같이 null을 할당한다.

 

 

핸들러 내부에 쓰인 this의 값은 핸들러가 할당된 요소이다.

<button onclick="alert(this.innerHTML)">클릭하세요</button>  // 클릭하세요

 

2. 메서드로 이벤트 핸들러 할당

버튼을 클릭할 때 메세지 보이기 + 버튼 강조하기 이렇게 두 가지 이벤트를 주고 싶을 수도 있다. 

메서드를 사용하면 여러 개의 이벤트 핸들러를 할당할 수 있다.

element.addEventListener(event, handler, [options]);
element.removeEventListener(event, handler, [options]);

• event : 이벤트 이름
• handler : 핸들러 함수
• options : 다음 프로퍼티를 가지는 객체
  • once : true일 경우 이벤트가 트리거될 때 리스너가 자동으로 삭제됨
  • capture : 어느 단계에서 이벤트를 다뤄야하는 지 알려줌
  • passive : true일 경우, 리스너에서 지정한 함수가 preventDefault()를 호출하지 않음

 

addEventListener를 여러 번 호출하면 핸들러를 여러 개 붙일 수 있다.

<input id="elem" type="button" value="클릭해 주세요."/>

<script>
  function handler1() {
    alert('감사합니다!');
  };

  function handler2() {
    alert('다시 한번 감사합니다!');
  }

  elem.onclick = () => alert("안녕하세요.");
  elem.addEventListener("click", handler1); // 감사합니다!
  elem.addEventListener("click", handler2); // 다시 한번 감사합니다!
</script>

 

 

 

참고

https://ko.javascript.info/introduction-browser-events

브라우저 이벤트 소개