[JS 스터디] 자바스크립트에서 이벤트 관리하기

우리가 많이 다루는 이벤트에 대해 확실하게 정리한 글입니다.

1. 이벤트란 ?

자바스크립트 안의 이벤트는 클릭, 스크롤 내리기 등 사용자와 웹페이지가 상호작용을 하며 브라우저가 감지하는 것.

* 이벤트 리스너, 이벤트 핸들러를 통해 처리 함.

ex) click, contextmenu, keydown, keyup, submit 등...

 

2. 등록 방법

- 인라인(inline) : 이벤트를 HTML요소로 직접 지정하는 방식. -> 유지 보수에 좋지 못함.

<button onclick="console.log('Hello World!);">Plz Click!</button>

- 프로퍼티(Property) : 선택자를 이용함. -> 인라인 방식의 단점은 보완하지만, 한 번에 하나의 이벤트만 가능함.

<button onclick="firstBtn">click</button>

<script>
  let firstBtn = document.querySelector('#firstBtn');
  firstBtn.onclick=function(){
    alert('Hello World!');
  };
  fristBtn.onclick=function(){
    alert('Hello World!!!');
  }; // 한 번만 실행됨!
</script>

- addEventListener() : 1개 이상의 이벤트가 가능하고, IE9이상 동작함.

<button id="firstBtn2">click</button>
// 프로퍼티 방식과 달리 onclick이 없다

<script>
  let firstBtn2 = document.querySelector('#firstBtn2')
  function testFunc(){
    alert('Hello World!');
  }
  firstBtn2.addEventListener('click', testFunc);
  firstBtn2.addEventListener('click', Function(){
    alert('Hello World!!!');
  }
  // "on"이 붙은 이벤트를 사용하지 않는다. onclick아닌 click
</script>

3. 해제 방법

- onclick의 경우 이벤트를 null로 만듦

- removeEventListener() 사용

 

4. 이벤트 버블링 

- 정의 : 이벤트 발생시 요소에 할당된 핸들러 동작 후 최상단 요소를 만날 때까지 부모 요소 핸들러를 동작하는 것.

-> 중단법 : event.stopPropagation()을 사용해 위쪽 핸들러를 막을 수 있으나 다른 핸들러 동작을 막지는 못함.

<form onclick="alert('form')">FORM
  <div onclick="alert('div')">DIV
    <p onclick="alert('p')">P</p>
  </div>
</form>

-> 그래서, event.stopImmediatePropagation()을 사용함.

 

5. 이벤트 캡쳐링 

- 정의 : 버블링과 반대로 하위 요소에 이벤트를 전파하는 것.

- 탐색할 때 사용한다.

elem.addEventListener(..., {capture:true})
elem.addEventListener(..., true)

// 제거
elem.removeEventListener(..., true)

6. 이벤트 위임

- 정의 : 하나의 부모에 이벤트를 등록해 부모가 이벤트를 위임하는 방식

- 상위 요소에서 하위요소의 이벤트 제어 -> 동적 요소들 처리하기 수월해짐. 이벤트 핸들러가 더 적게 등록됨

∴ 메모리 절약

- 하위 요소가 많으면 이벤트리스너 작업이 번거롭기 때문에 사용함.