이벤트

남자김용준·2021년 8월 30일
0

이벤트는 무언가가 일어났다는 신호이다. 모든 DOM 노드는 이런 신호를 만들어 낸다.

이벤트의 흐름

  1. 캡처링 단계 - 이벤트가 하위 요소로 전파되는 단계
  2. 타깃 단계 - 이벤트가 실제 타깃 요소에 전달되는 단계
  3. 버블링 단계 - 이벤트가 상위 요소로 전파되는 단계


[출처:https://ko.javascript.info/bubbling-and-capturing]

td 태그를 클릭하면 이벤트가 최상위 조상에서 시작해 아래로 전파되고(캡처링 단계), 이벤트가 타깃 요소에 도착해 실행된 후(타깃 단계), 다시 위로 전파됩니다(버블링 단계). 이런 과정을 통해 요소에 할당된 이벤트 핸들러가 호출됩니다.

버블링이란

한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작한다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작한다.

이벤트 객체란?

이벤트를 다룰려면 어떤 일이 일어났는 지 상세히 알아야한다. click 이벤트가 발생했다면 마우스 포인터가 어디에 있는 지, keydown 이벤트가 발생하면 어떤 키가 눌렸는지 등에 대한 상세한 정보가 필요하다. 이러한 정보를 담은 게 이벤트 객체이다. 이벤트 객체는 이벤트가 발생하면 브라우저가 만들어 핸들러에 인수 형태로 전달한다.

버블링에 의해서 이벤트 객체가 가리키고 있는 currentTarget은 ‘현재’ 요소로, 현재 실행 중인 핸들러가 할당된 요소를 참조하고 target은 실제 이벤트가 시작된 요소를 나타낸다.

이벤트 핸들러란?

이벤트에 반응하려면 이벤트가 발생했을 때 실행되는 함수인 핸들러를 할당해야 한다. 핸들러는 사용자의 행동에 어떻게 반응할 지를 자바스크립트 코드로 표현한 것이다.

핸들러를 할당하는 방법은 여러가지가 있다.
1. html 속성으로 할당

<script>
  function countRabbits() {
    for(let i=1; i<=3; i++) {
      alert(`토끼 ${i}마리`);
    }
  }
</script>

<input type="button" onclick="countRabbits()" value="토끼를 세봅시다!">
  1. dom property로 할당
<input id="elem" type="button" value="클릭해 주세요.">
<script>
  elem.onclick = function() {
    alert('감사합니다.');
  };
</script>

하지만 위와같은 방식으로 할당하게 되면 기존에 있는 핸들러가 덮어씌워지는 문제가 있다. 즉, 여러 개의 핸들러를 할당할 수가 없는 것이다. 웹 표준에 관여하는 개발자들은 이 문제를 인지하고, addEventListener와 removeEventListener라는 메서드를 이용해 핸들러를 관리하고자 하였다.

<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

profile
frontend-react

0개의 댓글